30 Days of Tailwind CSS

Install Tailwind CSS without any Javascript Framewrok locally with purgeCSS, enable the dark mode option, prefferences or class is up to you.

Write some text including headings and subheadings, quotes, italics. Train your typography.

Create state buttons with a hover and a transition effect. like primary button, secondary and for example disable.

Create and rework a select element including options and style it with only Tailwind.

Create a form with buttons, inputs and text areas. Remember the download and upload buttons, those can be also included. And center it in the middle. Make it responsive.

Create an avatar inside a card along with some text, and make it 100% reponsive.

Create a navigation bar with logo, links and a CTA. Make it fixed, sticky or normal.

Create a grid with columns and rows, use tailwinds flexbox utilities make it responsive.

Create a 5 widget and position them differently on the website.

Make a card with and image and text. The text has to be on top of the image, use absolute and relative.

Make some sections and a container within and give them different widths and heights.

Create a section with an image, with text to the right, left or underneath or on top of it. Make it responsive.

Create a footer layout with links and logo. Remember the white space and to make it responsive.

Create a sidebar, fixed, sticky or normal. include links and a top logo.

Make sidebar layout with left or right scrollable content.

Create your color, font and shadow themes within the tailwind.config.js and use them on any layout you created before. Give them custom names. .

Create a kan border layout and make it responsive.

MMake a dropdown with links and icons.

Make a dropdown with two columns, links and icons. Make it responsive.

Create a layout, any of your choice. Use your creations as content, make it responsive.

Create a horizontal scrollable layout only using Tailwind CSS, for example a card row and make it responsive.

Create a full width and height grid of two columns and 5 rows, make it responsive.

Create a grid with cards for your team and make them responsive, include a picture, name and twitter.

Create a grid layout with cards, give them different widths and heights.

Create a notification with a close icon.

Create some cards and give them different Tailwind gradients.

Make some headings and give them a gradient color, use bg-clip-text .

Create a pagination widget.

Create a pricing table with three or more cards, make this ones responsive.

Re-create your favourite UI or a whole website only using Tailwind.