FAQ Sections
Get started with a collection of FAQ (frequently asked questions) sections to show a list of questions and answers to your website visitors and users.
Default example
Use this simple example of a FAQ section to show a list of questions and answers based on two columns and a question mark icon.
Default example
html
<section class="bg-white dark:bg-gray-900">
<div class="py-8 px-4 mx-auto max-w-screen-xl sm:py-16 lg:px-6">
<h2 class="mb-8 text-4xl tracking-tight font-extrabold text-gray-900 dark:text-white">Frequently asked questions</h2>
<div class="grid pt-8 text-left border-t border-gray-200 md:gap-16 dark:border-gray-700 md:grid-cols-2">
<div>
<div class="mb-10">
<h3 class="flex items-center mb-4 text-lg font-medium text-gray-900 dark:text-white">
<svg class="flex-shrink-0 mr-2 w-5 h-5 text-gray-500 dark:text-gray-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-8-3a1 1 0 00-.867.5 1 1 0 11-1.731-1A3 3 0 0113 8a3.001 3.001 0 01-2 2.83V11a1 1 0 11-2 0v-1a1 1 0 011-1 1 1 0 100-2zm0 8a1 1 0 100-2 1 1 0 000 2z" clip-rule="evenodd"></path></svg>
What do you mean by "Figma assets"?
</h3>
<p class="text-gray-500 dark:text-gray-400">You will have access to download the full Figma project including all of the pages, the components, responsive pages, and also the icons, illustrations, and images included in the screens.</p>
</div>
<div class="mb-10">
<h3 class="flex items-center mb-4 text-lg font-medium text-gray-900 dark:text-white">
<svg class="flex-shrink-0 mr-2 w-5 h-5 text-gray-500 dark:text-gray-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-8-3a1 1 0 00-.867.5 1 1 0 11-1.731-1A3 3 0 0113 8a3.001 3.001 0 01-2 2.83V11a1 1 0 11-2 0v-1a1 1 0 011-1 1 1 0 100-2zm0 8a1 1 0 100-2 1 1 0 000 2z" clip-rule="evenodd"></path></svg>
What does "lifetime access" exactly mean?
</h3>
<p class="text-gray-500 dark:text-gray-400">Once you have purchased either the design, code, or both packages, you will have access to all of the future updates based on the roadmap, free of charge.</p>
</div>
<div class="mb-10">
<h3 class="flex items-center mb-4 text-lg font-medium text-gray-900 dark:text-white">
<svg class="flex-shrink-0 mr-2 w-5 h-5 text-gray-500 dark:text-gray-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-8-3a1 1 0 00-.867.5 1 1 0 11-1.731-1A3 3 0 0113 8a3.001 3.001 0 01-2 2.83V11a1 1 0 11-2 0v-1a1 1 0 011-1 1 1 0 100-2zm0 8a1 1 0 100-2 1 1 0 000 2z" clip-rule="evenodd"></path></svg>
How does support work?
</h3>
<p class="text-gray-500 dark:text-gray-400">We're aware of the importance of well qualified support, that is why we decided that support will only be provided by the authors that actually worked on this project.</p>
<p class="text-gray-500 dark:text-gray-400">Feel free to <a href="#" class="font-medium underline text-primary-600 dark:text-primary-500 hover:no-underline" target="_blank" rel="noreferrer">contact us</a> and we'll help you out as soon as we can.</p>
</div>
<div class="mb-10">
<h3 class="flex items-center mb-4 text-lg font-medium text-gray-900 dark:text-white">
<svg class="flex-shrink-0 mr-2 w-5 h-5 text-gray-500 dark:text-gray-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-8-3a1 1 0 00-.867.5 1 1 0 11-1.731-1A3 3 0 0113 8a3.001 3.001 0 01-2 2.83V11a1 1 0 11-2 0v-1a1 1 0 011-1 1 1 0 100-2zm0 8a1 1 0 100-2 1 1 0 000 2z" clip-rule="evenodd"></path></svg>
I want to build more than one project. Is that allowed?
</h3>
<p class="text-gray-500 dark:text-gray-400">You can use Windster for an unlimited amount of projects, whether it's a personal website, a SaaS app, or a website for a client. As long as you don't build a product that will directly compete with Windster either as a UI kit, theme, or template, it's fine.</p>
<p class="text-gray-500 dark:text-gray-400">Find out more information by <a href="#" class="font-medium underline text-primary-600 dark:text-primary-500 hover:no-underline">reading the license</a>.</p>
</div>
</div>
<div>
<div class="mb-10">
<h3 class="flex items-center mb-4 text-lg font-medium text-gray-900 dark:text-white">
<svg class="flex-shrink-0 mr-2 w-5 h-5 text-gray-500 dark:text-gray-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-8-3a1 1 0 00-.867.5 1 1 0 11-1.731-1A3 3 0 0113 8a3.001 3.001 0 01-2 2.83V11a1 1 0 11-2 0v-1a1 1 0 011-1 1 1 0 100-2zm0 8a1 1 0 100-2 1 1 0 000 2z" clip-rule="evenodd"></path></svg>
What does "free updates" include?
</h3>
<p class="text-gray-500 dark:text-gray-400">The free updates that will be provided is based on the <a href="#" class="font-medium underline text-primary-600 dark:text-primary-500 hover:no-underline">roadmap</a> that we have laid out for this project. It is also possible that we will provide extra updates outside of the roadmap as well.</p>
</div>
<div class="mb-10">
<h3 class="flex items-center mb-4 text-lg font-medium text-gray-900 dark:text-white">
<svg class="flex-shrink-0 mr-2 w-5 h-5 text-gray-500 dark:text-gray-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-8-3a1 1 0 00-.867.5 1 1 0 11-1.731-1A3 3 0 0113 8a3.001 3.001 0 01-2 2.83V11a1 1 0 11-2 0v-1a1 1 0 011-1 1 1 0 100-2zm0 8a1 1 0 100-2 1 1 0 000 2z" clip-rule="evenodd"></path></svg>
What does the free version include?
</h3>
<p class="text-gray-500 dark:text-gray-400">The <a href="#" class="font-medium underline text-primary-600 dark:text-primary-500 hover:no-underline">free version</a> of Windster includes a minimal style guidelines, component variants, and a dashboard page with the mobile version alongside it.</p>
<p class="text-gray-500 dark:text-gray-400">You can use this version for any purposes, because it is open-source under the MIT license.</p>
</div>
<div class="mb-10">
<h3 class="flex items-center mb-4 text-lg font-medium text-gray-900 dark:text-white">
<svg class="flex-shrink-0 mr-2 w-5 h-5 text-gray-500 dark:text-gray-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-8-3a1 1 0 00-.867.5 1 1 0 11-1.731-1A3 3 0 0113 8a3.001 3.001 0 01-2 2.83V11a1 1 0 11-2 0v-1a1 1 0 011-1 1 1 0 100-2zm0 8a1 1 0 100-2 1 1 0 000 2z" clip-rule="evenodd"></path></svg>
What is the difference between Windster and Tailwind UI?
</h3>
<p class="text-gray-500 dark:text-gray-400">Although both Windster and Tailwind UI are built for integration with Tailwind CSS, the main difference is in the design, the pages, the extra components and UI elements that Windster includes.</p>
<p class="text-gray-500 dark:text-gray-400">Additionally, Windster is a project that is still in development, and later it will include both the application, marketing, and e-commerce UI interfaces.</p>
</div>
<div class="mb-10">
<h3 class="flex items-center mb-4 text-lg font-medium text-gray-900 dark:text-white">
<svg class="flex-shrink-0 mr-2 w-5 h-5 text-gray-500 dark:text-gray-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-8-3a1 1 0 00-.867.5 1 1 0 11-1.731-1A3 3 0 0113 8a3.001 3.001 0 01-2 2.83V11a1 1 0 11-2 0v-1a1 1 0 011-1 1 1 0 100-2zm0 8a1 1 0 100-2 1 1 0 000 2z" clip-rule="evenodd"></path></svg>
Can I use Windster in open-source projects?
</h3>
<p class="text-gray-500 dark:text-gray-400">Generally, it is accepted to use Windster in open-source projects, as long as it is not a UI library, a theme, a template, a page-builder that would be considered as an alternative to Windster itself.</p>
<p class="text-gray-500 dark:text-gray-400">With that being said, feel free to use this design kit for your open-source projects.</p>
<p class="text-gray-500 dark:text-gray-400">Find out more information by <a href="#" class="font-medium underline text-primary-600 dark:text-primary-500 hover:no-underline">reading the license</a>.</p>
</div>
</div>
</div>
</div>
</section>Search bar with links
Use this example to enable the possibility to search for questions and answers and also show a list of helpful links to commonly asked questions.
Search bar with links
html
<section class="bg-white dark:bg-gray-900">
<div class="max-w-screen-xl px-4 py-8 mx-auto sm:py-16 lg:px-6">
<div class="max-w-screen-md mx-auto text-center mb-8 lg:mb-16">
<h2
class="mb-4 text-4xl tracking-tight font-extrabold text-gray-900 dark:text-white"
>
How can we help you?
</h2>
<p class="mb-8 font-light text-gray-500 dark:text-gray-400 sm:text-xl">
Here are a few of the questions we get the most. If you don't see what's
on your mind, reach out to us anytime on phone, chat, or email.
</p>
<label
for="email-adress-icon"
class="block mb-2 text-sm font-medium text-gray-900 sr-only dark:text-gray-300"
>Your Email</label
>
<div class="relative">
<div
class="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none"
>
<svg
class="w-6 h-6 text-gray-500 dark:text-gray-400"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z"
clip-rule="evenodd"
></path>
</svg>
</div>
<input
type="text"
id="email-adress-icon"
class="block w-full p-4 pl-12 text-gray-900 border border-gray-300 rounded-lg bg-gray-50 focus:ring-primary-500 focus:border-primary-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500"
placeholder="Type keywords to find answers"
/>
</div>
<p class="mt-4 text-sm text-gray-500 dark:text-gray-400">
You can also browse the topics below to find what you are looking for.
</p>
</div>
<div class="grid gap-8 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
<div>
<h3 class="mb-4 text-xl font-bold dark:text-white">General</h3>
<ul role="list" class="space-y-4 text-gray-500 dark:text-gray-400">
<li>
<a href="#" class="hover:underline">How to update</a>
</li>
<li>
<a href="#" class="hover:underline">How to change the language</a>
</li>
<li>
<a href="#" class="hover:underline">About forwarding limits</a>
</li>
<li>
<a href="#" class="hover:underline">How to update Flowbite</a>
</li>
</ul>
</div>
<div>
<h3 class="mb-4 text-xl font-bold dark:text-white">Android</h3>
<ul role="list" class="space-y-4 text-gray-500 dark:text-gray-400">
<li>
<a href="#" class="hover:underline">Verifying your number</a>
</li>
<li>
<a href="#" class="hover:underline"
>How to restore your chat history</a
>
</li>
<li>
<a href="#" class="hover:underline"
>How to manage your notifications</a
>
</li>
<li>
<a href="#" class="hover:underline">Account & Profile</a>
</li>
</ul>
</div>
<div>
<h3 class="mb-4 text-xl font-bold dark:text-white">Iphone</h3>
<ul role="list" class="space-y-4 text-gray-500 dark:text-gray-400">
<li>
<a href="#" class="hover:underline"
>How to restore your chat history</a
>
</li>
<li>
<a href="#" class="hover:underline">How to use status</a>
</li>
<li>
<a href="#" class="hover:underline"
>How to manage your notifications</a
>
</li>
<li>
<a href="#" class="hover:underline">Can’t log out</a>
</li>
</ul>
</div>
<div>
<h3 class="mb-4 text-xl font-bold dark:text-white">Web & Desktop</h3>
<ul role="list" class="space-y-4 text-gray-500 dark:text-gray-400">
<li>
<a href="#" class="hover:underline"
>About WhatsApp Web and Desktop</a
>
</li>
<li>
<a href="#" class="hover:underline">How to log in or out</a>
</li>
<li>
<a href="#" class="hover:underline"
>How to manage your notifications</a
>
</li>
<li>
<a href="#" class="hover:underline">How to update Flowbite</a>
</li>
</ul>
</div>
</div>
</div>
</section>FAQ as accordion
This example is based on the Accordion component from Flowbite and it can be used to only expand the answer to each question based on user interaction.
FAQ as accordion
html
<section class="bg-white dark:bg-gray-900">
<div class="py-8 px-4 mx-auto max-w-screen-xl sm:py-16 lg:px-6">
<h2
class="mb-6 lg:mb-8 text-3xl lg:text-4xl tracking-tight font-extrabold text-center text-gray-900 dark:text-white"
>
Frequently asked questions
</h2>
<div class="mx-auto max-w-screen-md">
<div
id="accordion-flush"
data-accordion="collapse"
data-active-classes="bg-white dark:bg-gray-900 text-gray-900 dark:text-white"
data-inactive-classes="text-gray-500 dark:text-gray-400"
>
<h2 id="accordion-flush-heading-1">
<button
type="button"
class="flex justify-between items-center py-5 w-full font-medium text-left text-gray-900 bg-white border-b border-gray-200 dark:border-gray-700 dark:bg-gray-900 dark:text-white"
data-accordion-target="#accordion-flush-body-1"
aria-expanded="true"
aria-controls="accordion-flush-body-1"
>
<span>Can I use Flowbite in open-source projects?</span>
<svg
data-accordion-icon=""
class="w-6 h-6 rotate-180 shrink-0"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
clip-rule="evenodd"
></path>
</svg>
</button>
</h2>
<div
id="accordion-flush-body-1"
class=""
aria-labelledby="accordion-flush-heading-1"
>
<div class="py-5 border-b border-gray-200 dark:border-gray-700">
<p class="mb-2 text-gray-500 dark:text-gray-400">
Flowbite is an open-source library of interactive components built
on top of Tailwind CSS including buttons, dropdowns, modals,
navbars, and more.
</p>
<p class="text-gray-500 dark:text-gray-400">
Check out this guide to learn how to
<a
href="#"
class="text-primary-600 dark:text-primary-500 hover:underline"
>get started</a
>
and start developing websites even faster with components on top
of Tailwind CSS.
</p>
</div>
</div>
<h2 id="accordion-flush-heading-2">
<button
type="button"
class="flex justify-between items-center py-5 w-full font-medium text-left text-gray-500 border-b border-gray-200 dark:border-gray-700 dark:text-gray-400"
data-accordion-target="#accordion-flush-body-2"
aria-expanded="false"
aria-controls="accordion-flush-body-2"
>
<span>Is there a Figma file available?</span>
<svg
data-accordion-icon=""
class="w-6 h-6 shrink-0"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
clip-rule="evenodd"
></path>
</svg>
</button>
</h2>
<div
id="accordion-flush-body-2"
class="hidden"
aria-labelledby="accordion-flush-heading-2"
>
<div class="py-5 border-b border-gray-200 dark:border-gray-700">
<p class="mb-2 text-gray-500 dark:text-gray-400">
Flowbite is first conceptualized and designed using the Figma
software so everything you see in the library has a design
equivalent in our Figma file.
</p>
<p class="text-gray-500 dark:text-gray-400">
Check out the
<a
href="#"
class="text-primary-600 dark:text-primary-500 hover:underline"
>Figma design system</a
>
based on the utility classes from Tailwind CSS and components from
Flowbite.
</p>
</div>
</div>
<h2 id="accordion-flush-heading-3">
<button
type="button"
class="flex justify-between items-center py-5 w-full font-medium text-left text-gray-500 border-b border-gray-200 dark:border-gray-700 dark:text-gray-400"
data-accordion-target="#accordion-flush-body-3"
aria-expanded="false"
aria-controls="accordion-flush-body-3"
>
<span
>What are the differences between Flowbite and Tailwind UI?</span
>
<svg
data-accordion-icon=""
class="w-6 h-6 shrink-0"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
clip-rule="evenodd"
></path>
</svg>
</button>
</h2>
<div
id="accordion-flush-body-3"
class="hidden"
aria-labelledby="accordion-flush-heading-3"
>
<div class="py-5 border-b border-gray-200 dark:border-gray-700">
<p class="mb-2 text-gray-500 dark:text-gray-400">
The main difference is that the core components from Flowbite are
open source under the MIT license, whereas Tailwind UI is a paid
product. Another difference is that Flowbite relies on smaller and
standalone components, whereas Tailwind UI offers sections of
pages.
</p>
<p class="mb-2 text-gray-500 dark:text-gray-400">
However, we actually recommend using both Flowbite, Flowbite Pro,
and even Tailwind UI as there is no technical reason stopping you
from using the best of two worlds.
</p>
<p class="mb-2 text-gray-500 dark:text-gray-400">
Learn more about these technologies:
</p>
<ul class="pl-5 list-disc text-gray-500 dark:text-gray-400">
<li>
<a
href="#"
class="text-primary-600 dark:text-primary-500 hover:underline"
>Flowbite Pro</a
>
</li>
<li>
<a
href="#"
class="text-primary-600 dark:text-primary-500 hover:underline"
>Tailwind UI</a
>
</li>
</ul>
</div>
</div>
<h2 id="accordion-flush-heading-4">
<button
type="button"
class="flex justify-between items-center py-5 w-full font-medium text-left text-gray-500 border-b border-gray-200 dark:border-gray-700 dark:text-gray-400"
data-accordion-target="#accordion-flush-body-4"
aria-expanded="false"
aria-controls="accordion-flush-body-4"
>
<span>What about browser support?</span>
<svg
data-accordion-icon=""
class="w-6 h-6 shrink-0"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
clip-rule="evenodd"
></path>
</svg>
</button>
</h2>
<div
id="accordion-flush-body-4"
class="hidden"
aria-labelledby="accordion-flush-heading-4"
>
<div class="py-5 border-b border-gray-200 dark:border-gray-700">
<p class="mb-2 text-gray-500 dark:text-gray-400">
The main difference is that the core components from Flowbite are
open source under the MIT license, whereas Tailwind UI is a paid
product. Another difference is that Flowbite relies on smaller and
standalone components, whereas Tailwind UI offers sections of
pages.
</p>
<p class="mb-2 text-gray-500 dark:text-gray-400">
However, we actually recommend using both Flowbite, Flowbite Pro,
and even Tailwind UI as there is no technical reason stopping you
from using the best of two worlds.
</p>
<p class="mb-2 text-gray-500 dark:text-gray-400">
Learn more about these technologies:
</p>
<ul class="pl-5 list-disc text-gray-500 dark:text-gray-400">
<li>
<a
href="#"
class="text-primary-600 dark:text-primary-500 hover:underline"
>Flowbite Pro</a
>
</li>
<li>
<a
href="#"
class="text-primary-600 dark:text-primary-500 hover:underline"
>Tailwind UI</a
>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</section>Example with three columns
Use this example if you want to show up to three FAQ items for every row and place them below a pricing section for increased conversion rate.
Example with three columns
html
<section class="bg-white dark:bg-gray-900">
<div class="py-8 px-4 mx-auto max-w-screen-xl sm:py-16 lg:px-6">
<div class="mx-auto max-w-screen-lg text-center">
<h2
class="mb-2 text-4xl tracking-tight font-extrabold text-gray-900 dark:text-white"
>
Frequently asked questions
</h2>
<p class="mb-8 text-gray-500 lg:text-lg dark:text-gray-400">
Ask us anything about our brand and products, and get factual responses.
</p>
</div>
<div
class="grid pt-8 text-left border-t border-gray-200 dark:border-gray-700 sm:gap-8 lg:gap-16 sm:grid-cols-2 lg:grid-cols-3"
>
<div>
<div class="mb-10">
<h3 class="mb-4 text-lg font-medium text-gray-900 dark:text-white">
What do you mean by "Figma assets"?
</h3>
<p class="text-gray-500 dark:text-gray-400">
You will have access to download the full Figma project including
all of the pages, the components, responsive pages, and also the
icons, illustrations, and images included in the screens.
</p>
</div>
<div class="mb-10">
<h3 class="mb-4 text-lg font-medium text-gray-900 dark:text-white">
What does "lifetime access" exactly mean?
</h3>
<p class="mb-4 text-gray-500 dark:text-gray-400">
Once you have purchased either the design, code, or both packages,
you will have access to all of the future updates based on the
roadmap, free of charge.
</p>
</div>
<div class="mb-10">
<h3 class="mb-4 text-lg font-medium text-gray-900 dark:text-white">
How does support work?
</h3>
<p class="mb-4 text-gray-500 dark:text-gray-400">
We're aware of the importance of well qualified support, that is why
we decided that support will only be provided by the authors that
actually worked on this project.
</p>
<p class="mb-4 text-gray-500 dark:text-gray-400">
Feel free to
<a
href="#"
class="font-medium underline text-primary-600 dark:text-primary-500 hover:no-underline"
target="_blank"
rel="noreferrer"
>contact us</a
>
and we'll help you out as soon as we can.
</p>
</div>
<div class="mb-10">
<h3 class="mb-4 text-lg font-medium text-gray-900 dark:text-white">
I want to build more than one project with Flowbite. Is that
allowed?
</h3>
<p class="mb-4 text-gray-500 dark:text-gray-400">
You can use Flowbite for an unlimited amount of projects, whether
it's a personal website, a SaaS app, or a website for a client. As
long as you don't build a product that will directly compete with
Flowbite either as a UI kit, theme, or template, it's fine.
</p>
<p class="mb-4 text-gray-500 dark:text-gray-400">
Find out more information by
<a
href="#"
class="font-medium underline text-primary-600 dark:text-primary-500 hover:no-underline"
>reading the license</a
>.
</p>
</div>
</div>
<div>
<div class="mb-10">
<h3 class="mb-4 text-lg font-medium text-gray-900 dark:text-white">
What does "free updates" include?
</h3>
<p class="mb-4 text-gray-500 dark:text-gray-400">
The free updates that will be provided is based on the
<a
href="#"
class="font-medium underline text-primary-600 dark:text-primary-500 hover:no-underline"
>roadmap</a
>
that we have laid out for this project. It is also possible that we
will provide extra updates outside of the roadmap as well.
</p>
</div>
<div class="mb-10">
<h3 class="mb-4 text-lg font-medium text-gray-900 dark:text-white">
What does the free version include?
</h3>
<p class="mb-4 text-gray-500 dark:text-gray-400">
The
<a
href="#"
class="font-medium underline text-primary-600 dark:text-primary-500 hover:no-underline"
>free version</a
>
of Flowbite includes a minimal style guidelines, component variants,
and a dashboard page with the mobile version alongside it.
</p>
<p class="mb-4 text-gray-500 dark:text-gray-400">
You can use this version for any purposes, because it is open-source
under the MIT license.
</p>
</div>
<div class="mb-10">
<h3 class="mb-4 text-lg font-medium text-gray-900 dark:text-white">
What is the difference between Flowbite and Tailwind UI?
</h3>
<p class="mb-4 text-gray-500 dark:text-gray-400">
Although both Flowbite and Tailwind UI are built for integration
with Tailwind CSS, the main difference is in the design, the pages,
the extra components and UI elements that Flowbite includes.
</p>
<p class="mb-4 text-gray-500 dark:text-gray-400">
Additionally, Flowbite is a project that is still in development,
and later it will include both the application, marketing, and
e-commerce UI interfaces.
</p>
</div>
<div class="mb-10">
<h3 class="mb-4 text-lg font-medium text-gray-900 dark:text-white">
Can I use Flowbite in open-source projects?
</h3>
<p class="mb-4 text-gray-500 dark:text-gray-400">
Generally, it is accepted to use Flowbite in open-source projects,
as long as it is not a UI library, a theme, a template, a
page-builder that would be considered as an alternative to Flowbite
itself.
</p>
<p class="mb-4 text-gray-500 dark:text-gray-400">
With that being said, feel free to use this design kit for your
open-source projects.
</p>
<p class="mb-4 text-gray-500 dark:text-gray-400">
Find out more information by
<a
href="#"
class="font-medium underline text-primary-600 dark:text-primary-500 hover:no-underline"
>reading the license</a
>.
</p>
</div>
</div>
<div>
<div class="mb-10">
<h3 class="mb-4 text-lg font-medium text-gray-900 dark:text-white">
When will I get access to the Tailwind CSS code if I pre-ordered it?
</h3>
<p class="mb-4 text-gray-500 dark:text-gray-400">
The official date that we have set out to release the code version
of Flowbite is the
<span class="font-medium text-gray-900"
>25th of September, 2021</span
>. We are already working on the integration and if you have a
pre-order, you will also get frequent updates about the progress.
</p>
<p class="mb-4 text-gray-500 dark:text-gray-400">
You'll be one of the first to know when it will be available.
</p>
</div>
<div class="mb-10">
<h3 class="mb-4 text-lg font-medium text-gray-900 dark:text-white">
What is your refund policy?
</h3>
<p class="mb-4 text-gray-500 dark:text-gray-400">
If you are unhappy with your purchase, just
<a
href="#"
class="font-medium underline text-primary-600 dark:text-primary-500 hover:no-underline"
target="_blank"
rel="noreferrer"
>contact us</a
>
within 30 days and we'll issue a full refund.
</p>
</div>
<div class="mb-10">
<h3 class="mb-4 text-lg font-medium text-gray-900 dark:text-white">
Is it allowed to use the design assets, such as the fonts, icons,
and illustrations?
</h3>
<p class="mb-4 text-gray-500 dark:text-gray-400">
What you see is what you get. Which means that all icons, fonts, and
illustrations can be used based on the licensing that we researched
or purchased. For example, we purchased rights to use the
illustrations in Flowbite.
</p>
</div>
<div class="mb-10">
<h3 class="mb-4 text-lg font-medium text-gray-900 dark:text-white">
Where can I access my download files?
</h3>
<p class="mb-4 text-gray-500 dark:text-gray-400">
After you purchased one of the plans, you will get two emails: one
for the invoice, and another one with the download files.
</p>
<p class="mb-4 text-gray-500 dark:text-gray-400">
Soon we will create a way that you will be able to access the
download files from the Flowbite dashboard from this website.
</p>
</div>
</div>
</div>
</div>
</section>Help center
This is an advanced example that you can use to allow the user to search for questions and also show a list of helpful links inside cards.
Help center
html
<section class="bg-white dark:bg-gray-900">
<div class="py-8 px-4 mx-auto max-w-screen-xl sm:py-16 lg:px-6">
<div class="mx-auto max-w-screen-md text-center mb-8 lg:mb-16">
<h2
class="mb-4 text-4xl tracking-tight font-extrabold text-gray-900 dark:text-white"
>
How can we help you?
</h2>
<p class="mb-8 font-light text-gray-500 sm:text-xl dark:text-gray-500">
Here are a few of the questions we get the most. If you don't see what's
on your mind, reach out to us anytime on phone, chat, or email.
</p>
<label
for="email-adress-icon"
class="block mb-2 text-sm font-medium text-gray-900 sr-only dark:text-gray-300"
>Your Email</label
>
<div class="relative">
<div
class="flex absolute inset-y-0 left-0 items-center pl-3 pointer-events-none"
>
<svg
class="w-6 h-6 text-gray-500 dark:text-gray-400"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path d="M9 2a1 1 0 000 2h2a1 1 0 100-2H9z"></path>
<path
fill-rule="evenodd"
d="M4 5a2 2 0 012-2 3 3 0 003 3h2a3 3 0 003-3 2 2 0 012 2v11a2 2 0 01-2 2H6a2 2 0 01-2-2V5zm3 4a1 1 0 000 2h.01a1 1 0 100-2H7zm3 0a1 1 0 000 2h3a1 1 0 100-2h-3zm-3 4a1 1 0 100 2h.01a1 1 0 100-2H7zm3 0a1 1 0 100 2h3a1 1 0 100-2h-3z"
clip-rule="evenodd"
></path>
</svg>
</div>
<input
type="text"
id="email-adress-icon"
class="block p-4 pl-12 w-full text-gray-900 bg-gray-50 rounded-lg border border-gray-300 focus:ring-primary-500 focus:border-primary-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500"
placeholder="Type keywords to find answers"
/>
</div>
<p class="mt-4 text-sm text-gray-500 dark:text-gray-400">
You can also browse the topics below to find what you are looking for.
</p>
</div>
<div class="grid gap-8 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
<div class="p-4 rounded shadow dark:bg-gray-800">
<div
class="flex justify-center items-center mb-4 w-10 h-10 rounded bg-primary-100 dark:bg-primary-900 lg:h-12 lg:w-12"
>
<svg
class="w-5 h-5 text-primary-600 lg:w-6 lg:h-6 dark:text-primary-300"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path d="M9 2a1 1 0 000 2h2a1 1 0 100-2H9z"></path>
<path
fill-rule="evenodd"
d="M4 5a2 2 0 012-2 3 3 0 003 3h2a3 3 0 003-3 2 2 0 012 2v11a2 2 0 01-2 2H6a2 2 0 01-2-2V5zm3 4a1 1 0 000 2h.01a1 1 0 100-2H7zm3 0a1 1 0 000 2h3a1 1 0 100-2h-3zm-3 4a1 1 0 100 2h.01a1 1 0 100-2H7zm3 0a1 1 0 100 2h3a1 1 0 100-2h-3z"
clip-rule="evenodd"
></path>
</svg>
</div>
<h3 class="mb-4 text-xl font-bold dark:text-white">General</h3>
<ul role="list" class="mb-4 space-y-3 text-gray-500 dark:text-gray-400">
<li>
<a href="#" class="hover:underline">About forwarding limits</a>
</li>
<li>
<a href="#" class="hover:underline">How to update Flowbite?</a>
</li>
<li>
<a href="#" class="hover:underline"
>How to change privacy settings?</a
>
</li>
</ul>
<a
href="#"
class="font-medium text-primary-600 hover:underline dark:text-primary-500"
>See all</a
>
</div>
<div class="p-4 rounded shadow dark:bg-gray-800">
<div
class="flex justify-center items-center mb-4 w-10 h-10 rounded bg-primary-100 dark:bg-primary-900 lg:h-12 lg:w-12"
>
<svg
class="w-5 h-5 text-primary-600 lg:w-6 lg:h-6 dark:text-primary-300"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path d="M4 4a2 2 0 00-2 2v1h16V6a2 2 0 00-2-2H4z"></path>
<path
fill-rule="evenodd"
d="M18 9H2v5a2 2 0 002 2h12a2 2 0 002-2V9zM4 13a1 1 0 011-1h1a1 1 0 110 2H5a1 1 0 01-1-1zm5-1a1 1 0 100 2h1a1 1 0 100-2H9z"
clip-rule="evenodd"
></path>
</svg>
</div>
<h3 class="mb-4 text-xl font-bold dark:text-white">License</h3>
<ul role="list" class="mb-4 space-y-3 text-gray-500 dark:text-gray-400">
<li>
<a href="#" class="hover:underline">Verifying your number</a>
</li>
<li>
<a href="#" class="hover:underline"
>How to restore your chat history</a
>
</li>
<li>
<a href="#" class="hover:underline"
>How to manage your notifications</a
>
</li>
</ul>
<a
href="#"
class="font-medium text-primary-600 hover:underline dark:text-primary-500"
>See all</a
>
</div>
<div class="p-4 rounded shadow dark:bg-gray-800">
<div
class="flex justify-center items-center mb-4 w-10 h-10 rounded bg-primary-100 dark:bg-primary-900 lg:h-12 lg:w-12"
>
<svg
class="w-5 h-5 text-primary-600 lg:w-6 lg:h-6 dark:text-primary-300"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
d="M5 2a2 2 0 00-2 2v14l3.5-2 3.5 2 3.5-2 3.5 2V4a2 2 0 00-2-2H5zm4.707 3.707a1 1 0 00-1.414-1.414l-3 3a1 1 0 000 1.414l3 3a1 1 0 001.414-1.414L8.414 9H10a3 3 0 013 3v1a1 1 0 102 0v-1a5 5 0 00-5-5H8.414l1.293-1.293z"
clip-rule="evenodd"
></path>
</svg>
</div>
<h3 class="mb-4 text-xl font-bold dark:text-white">Refund policy</h3>
<ul role="list" class="mb-4 space-y-4 text-gray-500 dark:text-gray-400">
<li>
<a href="#" class="hover:underline"
>How to restore your chat history</a
>
</li>
<li>
<a href="#" class="hover:underline">How to use status</a>
</li>
<li>
<a href="#" class="hover:underline"
>How to manage your notifications</a
>
</li>
</ul>
<a
href="#"
class="font-medium text-primary-600 hover:underline dark:text-primary-500"
>See all</a
>
</div>
<div class="p-4 rounded shadow dark:bg-gray-800">
<div
class="flex justify-center items-center mb-4 w-10 h-10 rounded bg-primary-100 dark:bg-primary-900 lg:h-12 lg:w-12"
>
<svg
class="w-5 h-5 text-primary-600 lg:w-6 lg:h-6 dark:text-primary-300"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-6-3a2 2 0 11-4 0 2 2 0 014 0zm-2 4a5 5 0 00-4.546 2.916A5.986 5.986 0 0010 16a5.986 5.986 0 004.546-2.084A5 5 0 0010 11z"
clip-rule="evenodd"
></path>
</svg>
</div>
<h3 class="mb-4 text-xl font-bold dark:text-white">Account</h3>
<ul role="list" class="mb-4 space-y-3 text-gray-500 dark:text-gray-400">
<li>
<a href="#" class="hover:underline"
>About WhatsApp Web and Desktop</a
>
</li>
<li>
<a href="#" class="hover:underline">How to log in or out</a>
</li>
<li>
<a href="#" class="hover:underline"
>How to manage your notifications</a
>
</li>
</ul>
<a
href="#"
class="font-medium text-primary-600 hover:underline dark:text-primary-500"
>See all</a
>
</div>
</div>
</div>
</section>