# Tailwind Elements

### Collection of free, popular components like modal, dropdown, carousel, popover, cards, charts and many more.

<a href="https://twitter.com/intent/tweet/?text=Thanks+@TailwindElement+for+creating+an+amazing+collection+of+open+source+components+for+@tailwindcss%20https://tailwind-elements.com/&hashtags=tailwindCSS,bootstrap,webdesign,javascript,100DaysOfCode,DevCommunity"><img src="https://img.shields.io/twitter/url/http/shields.io.svg?style=social&label=Let%20us%20know%20you%20were%20here%21&"></a>

---

[![Tailwind Elements](https://tailwind-elements.com/img/tailwind-elements.jpg)](https://tailwind-elements.com/)

Tailwind Elements **does not change or add any CSS** to the already one from TailwindCSS.

You can **copy our components directly** into your Tailwind design and **they will work straight away**.

In some dynamic components (like dropdowns or modals) we add Font Awesome icons and custom JavaScript. However, they do not require any additional installation, all the necessary code is always included in the example and copied to any Tailwind project - it will work.

---

## Quick Start tutorial

[![Quick Start tutorial](https://mdbootstrap.com/img/Marketing/campaigns/tailwind/video.jpg)](https://www.youtube.com/watch?v=RAhugF8NOBs)

![Carousel](https://mdbootstrap.com/img/Marketing/campaigns/tailwind/carousel.gif)
![enter image description here](https://mdbootstrap.com/img/Marketing/campaigns/tailwind/1.jpg)
![Buttons](https://mdbootstrap.com/img/Marketing/campaigns/tailwind/buttons.gif)

![Alerts](https://mdbootstrap.com/img/Marketing/campaigns/tailwind/2.jpg)
![Chart](https://mdbootstrap.com/img/Marketing/campaigns/tailwind/chart.gif)
![Alerts](https://mdbootstrap.com/img/Marketing/campaigns/tailwind/3.jpg)
![Datepicker](https://mdbootstrap.com/img/Marketing/campaigns/tailwind/datepicker.gif)
![Chart Linear](https://mdbootstrap.com/img/Marketing/campaigns/tailwind/4.jpg)
![Loaders](https://mdbootstrap.com/img/Marketing/campaigns/tailwind/loaders.gif)
![Badges](https://mdbootstrap.com/img/Marketing/campaigns/tailwind/5.jpg)
![Dropdown](https://mdbootstrap.com/img/Marketing/campaigns/tailwind/dropdown.gif)
![Progress](https://mdbootstrap.com/img/Marketing/campaigns/tailwind/6.jpg)

![enter image description here](https://mdbootstrap.com/img/Marketing/campaigns/tailwind/7.jpg)

![enter image description here](https://mdbootstrap.com/img/Marketing/campaigns/tailwind/9.jpg)

![enter image description here](https://mdbootstrap.com/img/Marketing/campaigns/tailwind/8.jpg)