Greetings to all developers!
I'm one of the founders and project maintainers of the Flowbite Library, one of the most popular collection of UI components built on top of the Tailwind CSS framework.
Today I am happy to show you what we've been working on the past few months and I will also show you how you can create a simple landing page with the Flowbite Blocks system and Tailwind CSS.
Here's a screenshot of the landing page that we'll build:
You can also check out these helpful links for reference:
Let's get started then!
Flowbite Blocks - Tailwind UI components
First of all, let me introduce you the system that you will work with in this tutorial.
Using the utility classes from Tailwind CSS and the interactive components from the core Flowbite Library we have built over 120+ website sections featuring hero sections, advanced headers (navigation), CTA sections, cookie consent modal, and many more!
Some of them are actually free to use under the MIT license while some other can be accessed via the Flowbite Pro license.
Here's an overview of the block categories that are readily available:
- Hero sections (14 components)
- Feature sections (9 components)
- Headers (8 components)
- CTA sections (8 components)
- Pricing sections (7 components)
- Content sections (7 components)
- Footer sections (7 components)
- Social proof (6 components)
- Popups (5 components)
- Team sections (5 components)
- FAQ sections (5 components)
- Testimonials (5 components)
- Newsletter sections (5 components)
- Banners (5 components)
- Contact Forms (5 components)
- Blog Sections (5 components)
- Customer Logos (4 components)
- Cookie Consent (3 components)
- 404 Pages (3 components)
- 500 Pages (3 components)
- Maintenance Pages (3 components)
These website sections can be easily used to build landing pages and marketing oriented websites by copy-pasting the code using the Flowbite Blocks interface.
Let me show you show you can work build a landing page in just a few minutes!
Building a landing page in Tailwind CSS
The first section that we need to use is a header component, so let's check out the Tailwind CSS Header component from Flowbite Blocks.
As you can see, there's a "Requires Flowbite" label just above this block which means that we need to install Flowbite via NPM to make sure that the hamburger toggle works on responsive view.
Follow this quickstart guide from the Flowbite Library to install it on your project.
Install Flowbite as a dependency using NPM by running the following command:
npm i flowbite
Require Flowbite as a plugin inside the tailwind.config.js file:
module.exports = {
plugins: [
require('flowbite/plugin')
]
}
Include the main JavaScript file to make interactive elements work:
<script src="../path/to/flowbite/dist/flowbite.js"></script>
Make sure that you copy over the tailwind.config.js file generated by the block system so that the primary class will be available:
/** @type {import('tailwindcss').Config} */
module.exports = {
content: ["index.html", "./node_modules/flowbite/**/*.js"],
darkMode: 'class',
theme: {
extend: {
colors: {
primary: { "50": "#eff6ff", "100": "#dbeafe", "200": "#bfdbfe", "300": "#93c5fd", "400": "#60a5fa", "500": "#3b82f6", "600": "#2563eb", "700": "#1d4ed8", "800": "#1e40af", "900": "#1e3a8a" }
}
},
},
plugins: [
require('flowbite/plugin')
],
}
Here's where you can get it:
After you've pulled in the project, head back to the header block on Flowbite Blocks and click on the "Show code" button and then on the "Copy code" button on the right side to save it in your clipboard.
Now head over to your own project and copy-paste it just after the beginning of your <body> tag.
Choosing a hero section
The next step we need to take is choose from one of the Tailwind CSS Hero Sections from Flowbite.
I will choose the second one with the mobile mockup:
Let's add this right after the navigation bar inside your project.
Customer logos
It's a good idea to also showcase the companies using your project so we're going to take at the customer logos blocks and choose the first one:
We can add this section right after the hero section.
Choosing a feature section
A nice way to explain what your website is about can be done by choosing one of the Tailwind CSS Feature Sections sections from Flowbite Blocks.
I like the first one because I can also use the icons as a visual description:
Let's add this after the customer logo section.
Additional content
You should usually show at least 2-3 sections which explains what your website is about so choosing from the feature or content sections is advisable.
Let's take two content sections from Flowbite Blocks and add them right after the feature section:
Let's take this one too where we can also add a link:
We're almost ready! Next up we need to finish the page using a CTA (call to action) section to encourage the user to do something!
CTA section
Luckily, there is a huge collection of CTA sections coded with Tailwind CSS inside the Flowbite Blocks system.
Let's use this one which looks pretty good just before the footer:
Choosing a footer
Of course we also need to choose a footer that will be used to round up the landing page. The good news is that there are a lot of Tailwind CSS Footer to choose from.
I really like the first one so let's choose this one:
Awesome! Let's take a look how this landing page looks:
You can also check out these helpful links for reference:
- Github repository/source code
- Landing page demo
- Flowbite Blocks
- Flowbite Library
- Flowbite Figma
- Tailwind CSS
If you liked this tutorial make sure to give it a tweet or let me know the comments section what you think!
Top comments (0)