30 Days of Tailwind CSS

Keep yourself accountable while learning Tailwind.Share your process on Twitter with the hashtag

#30DaysOfTailwindCSS
Challenge #1

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

Challenge #2

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

Challenge #3

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

Challenge #4

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

Challenge #5

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.

Challenge #6

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

Challenge #7

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

Challenge #8

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

Challenge #9

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

Challenge #10

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

Challenge #11

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

Challenge #12

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

Challenge #13

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

Challenge #14

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

Challenge #15

Make sidebar layout with left or right scrollable content.

Challenge #16

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. .

Challenge #17

Create a kan border layout and make it responsive.

Challenge #18

MMake a dropdown with links and icons.

Challenge #19

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

Challenge #20

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

Challenge #21

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

Challenge #22

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

Challenge #23

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

Challenge #24

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

Challenge #25

Create a notification with a close icon.

Challenge #26

Create some cards and give them different Tailwind gradients.

Challenge #27

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

Challenge #28

Create a pagination widget.

Challenge #29

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

Challenge #30

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