Tailwind Elements is a huge collection of free, interactive components for Tailwind CSS. Bootstrap components recreated with Tailwind CSS, but with better design and more functionalities
![]() |
|
Tailwind Elements is a community-driven project. We invite you to track our live progress ποΈ on the upcoming release.
In the meantime you can also:
Check out the upcoming features - make sure to join the waiting list in order to get early access!
A collection of stunning components made with attention to the smallest details. Forms, cards, buttons, and hundreds of others β in Tailwind Elements you will find all the essential elements necessary for every project.
Responsive Landing page blocks built with Tailwind CSS. Plenty of design blocks examples such as Teams, services, projects, faq, and many more.
![]() | ![]() | ![]() |
Hero | Pricing | Call to action |
![]() | ![]() | ![]() |
Features | Contact | News/blog |
![]() | ![]() | ![]() |
Team | Stats | Testimonials |
![]() | ![]() | ![]() |
Content | Newsletter | Projects |
![]() | ![]() | ![]() |
Headers | FAQ | Logo Clouds |
![]() | ![]() | ![]() |
Banners | Mega Menu | More coming soon |
NPM
Before starting the project make sure to install Node.js (LTS) and TailwindCSS.
Run the following command to install the package via NPM:
npm install tw-elements
module.exports = {
content: [
"./src/**/*.{html,js}",
"./node_modules/tw-elements/dist/js/**/*.js",
],
plugins: [require("tw-elements/dist/plugin")],
darkMode: "class",
};
<script src="./TW-ELEMENTS-PATH/dist/js/tw-elements.umd.min.js"></script>
Alternatively, you can import it in the following way (bundler version):
import 'tw-elements';
MDB GO / CLI
Create, deploy and host anything with a single command.
npm install -g mdb-cli
mdb login
mdb init tailwind-elements-free
npm install
npm start
mdb publish
CDN
You can easily test Tailwind Elements by adding CDN scripts to your classic HTML template without the need for installing any packages.
Add the stylesheet files below in the head section:
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,900&display=swap" rel="stylesheet" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/tw-elements/dist/css/tw-elements.min.css" />
<script src="https://cdn.tailwindcss.com"></script>
<script>
tailwind.config = {
darkMode: "class",
theme: {
fontFamily: {
sans: ["Roboto", "sans-serif"],
body: ["Roboto", "sans-serif"],
mono: ["ui-monospace", "monospace"],
},
},
corePlugins: {
preflight: false,
},
};
</script>
Require the js bundled file right before the body closing tag:
<script src="https://cdn.jsdelivr.net/npm/tw-elements/dist/js/tw-elements.umd.min.js"></script>
Source: https://github.com
#tailwindcss