30 Days of Tailwind CSS

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 ban layout, with cards and boxes and make it responsive.

Make a dropdown with links and icons. You can use Alpine.js too, why not.

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 notifications for a few states with a close icon. Make it work with Alpine.js

Create some cards and give them different Tailwind gradients.

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

Create pagination widgets. With a button group, separated and side to side.

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.