3/9/22, 12:45 Tailwind CSS Components Tutorial – How to get started with Flowbite

Flowbite is an open-source library of web components built with the utility-first classes
from Tailwind CSS. It also includes interactive elements such as dropdowns, modals,
datepickers.

Tailwind CSS is a framework that I've been using a lot lately in my web-related projects
because of how fast it is to build the pages using the utility-first classes.

One problem that I have encountered, however, is that the framework does not include a
basic set of components to get started with. So I had to build them over and over for every
project.

But then I found a component library based on Tailwind CSS called Flowbite. It comes with
the most commonly used web components, such as buttons, navigation bars, cards, form
elements, and more which are conveniently built with the utility classes from Tailwind CSS.

Flowbite - Tailwind CSS component library

https://www.freecodecamp.org/news/tailwind-css-components-flowbite/ 1/10
3/9/22, 12:45 Tailwind CSS Components Tutorial – How to get started with Flowbite

Today I want to show you how you can get started with this library and start building
websites even faster with Tailwind CSS and the components from Flowbite.

The project is available on Github and it is open source under the MIT License.

Getting started with Flowbite

First of all you need to understand how Flowbite works. This library is not another
framework. Rather, it is a set of components based on Tailwind CSS that you can just copy-
paste from the documentation.

Flowbite - Tailwind CSS form components

It also includes a JavaScript file that enables interactive components, such as modals,
dropdowns, and datepickers which you can optionally include into your project via CDN or
NPM.

You can check out the quickstart guide to explore the elements by including the CDN files
into your project. But if you want to build a project with Flowbite I recommend you to follow
the build tools steps so that you can purge and minify the generated CSS.
https://www.freecodecamp.org/news/tailwind-css-components-flowbite/ 2/10
3/9/22, 12:45 Tailwind CSS Components Tutorial – How to get started with Flowbite

For a faster configuration we will include everything using a CDN.

How to include Flowbite and

Tailwind CSS via CDN
Let's start by including the CSS file inside the  head  tag of your HTML:

<link rel="stylesheet" href="https://unpkg.com/flowbite@latest/dist/flowbite.min.css" />

Then also include the JavaScript file that enables the interactive elements before the
closure of the  body  tag:

<script src="https://unpkg.com/flowbite@latest/dist/flowbite.bundle.js"></script>

If you've followed these two steps correctly you should now have both Tailwind CSS and
Flowbite included in your project and the components from Flowbite should all work now.

Exploring the components from

Flowbite
The next step is to check out the components from the documentation which are all built
using the utility classes from Tailwind CSS.

You can find anything from alerts, buttons, and badges all the way to navigation bars,
modals, dropdown menus, and even datepickers.

https://www.freecodecamp.org/news/tailwind-css-components-flowbite/ 3/10
3/9/22, 12:45 Tailwind CSS Components Tutorial – How to get started with Flowbite

Flowbite - Tailwind CSS components

Here's the full list of components:

Alerts

Badges

Breadcrumb

Buttons

Button group

Cards

Dropdowns

Forms
https://www.freecodecamp.org/news/tailwind-css-components-flowbite/ 4/10
3/9/22, 12:45 Tailwind CSS Components Tutorial – How to get started with Flowbite

List group

Typography

Modal

Navbar

Pagination

Progress bar

Tables

Tooltips

Datepicker

You can check out the all of the components on the homepage and then it will be
accessible from every page of the documentation.

All you need to do now is to copy-paste the element of your choice inside your project and
then use them any way you see fit.

Let's create a user authentication page using the components from Flowbite and the utility
classes from Tailwind CSS to show you the workflow of this library.

Here's how it will look in the end:

https://www.freecodecamp.org/news/tailwind-css-components-flowbite/ 5/10
3/9/22, 12:45 Tailwind CSS Components Tutorial – How to get started with Flowbite

Authentication page built with Flowbite

How to build a user authentication

page with Flowbite
The first requirement is to include Flowbite into the HTML page that you're going to work
with either via CDN or NPM. I already showed you how to do that in this article, so I'll
assume you've already done that.

Let's first build the wrapper element to which we will later add the logo and the main card
element.

<div class="mx-auto md:h-screen flex flex-col justify-center items-center px-6 pt-8

<!-- content will go here -->

</div>

https://www.freecodecamp.org/news/tailwind-css-components-flowbite/ 6/10
3/9/22, 12:45 Tailwind CSS Components Tutorial – How to get started with Flowbite

Wrapper element

This element ensures that everything will be centered horizontally and vertically on larger
screens.

Let's now add the logo which is good for branding and which users can also click on to go
back to the homepage.

<div class="mx-auto md:h-screen flex flex-col justify-center items-center px-6 pt-8

<a href="#" class="text-2xl font-semibold flex justify-center items-center mb

<img src="https://flowbite.com/application-ui/demo/images/logo.svg" class=

<span>Flowbite</span>

</a>

</div>

Logo inside wrapper element

Next we should create the main card element that comes just after the logo that we've
added and also add the image inside the card.

<div class="bg-white shadow rounded-lg lg:flex items-center justify-center md:mt-0 w

<div class="hidden lg:flex w-2/3">

<img class="rounded-l-lg" src="https://flowbite.com/application-ui/demo

</div>

<div class="w-full p-6 sm:p-8 lg:p-16 lg:py-0 space-y-8">

<!-- Authentication form goes here -->

</div>

</div>

https://www.freecodecamp.org/news/tailwind-css-components-flowbite/ 7/10
3/9/22, 12:45 Tailwind CSS Components Tutorial – How to get started with Flowbite

Card element

If you've followed the steps correctly you should have an empty authentication card with an
image inside it and the logo above.

Empty authentication card

How to use the Flowbite Tailwind CSS

form element
This is where Flowbite comes into play, as we need to build a form element which includes
two text input fields, a checkbox, and a button. We don't have to build it ourselves because
we can use the Tailwind CSS form elements from Flowbite.

Let's add the following title and the form element inside the second  div  element from the
card.

https://www.freecodecamp.org/news/tailwind-css-components-flowbite/ 8/10
3/9/22, 12:45 Tailwind CSS Components Tutorial – How to get started with Flowbite

<h2 class="text-2xl lg:text-3xl font-bold text-gray-900">

Sign in to platform

</h2>

<form class="mt-8 space-y-6" action="#">

<div>

<label for="email" class="text-sm font-medium text-gray-900 block mb-2">Yo

<input type="email" name="email" id="email"

class="bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-l

placeholder="[email protected]" required>

</div>

<div>

<label for="password" class="text-sm font-medium text-gray-900 block mb-2"

<input type="password" name="password" id="password" placeholder=""

class="bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-l

required>

</div>

<div class="flex items-start">

<div class="flex items-center h-5">

<input id="remember" aria-describedby="remember" name="remember" type

class="bg-gray-50 border-gray-300 focus:ring-3 focus:ring-blue-300 h-4 w

</div>

<div class="text-sm ml-3">

<label for="remember" class="font-medium text-gray-900">Remember

</div>

<a href="#" class="text-sm text-blue-700 hover:underline ml-auto">Lost

</div>

<button type="submit"

class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-3

https://www.freecodecamp.org/news/tailwind-css-components-flowbite/ 9/10
3/9/22, 12:45 Tailwind CSS Components Tutorial – How to get started with Flowbite

to your account</button>

<div class="text-sm font-medium text-gray-500">

Not registered? <a class="text-blue-700 hover:underline">Creat

</div>

</form>

Authentication form element

The final result should look like this:

Authentication page built with Flowbite and Tailwind CSS

Congratulations! You've built your first page using both Tailwind CSS and Flowbite. Imagine
how much it'll help you with your projects not having to build all of the commonly used web
components over and over again.

https://www.freecodecamp.org/news/tailwind-css-components-flowbite/ 10/10