Skip to content

Instantly share code, notes, and snippets.

@herminiotorres

herminiotorres/00 - Learn Tailwind CSS - Scrimba - Challenges Started.md

Last active May 26, 2023 12:10
Star
Embed
What would you like to do?
Learn more about clone URLs
Download ZIP
Learn Tailwind CSS - Scrimba - Challenges Started
Raw
01-shades-of-blue-challenge.html
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.19/tailwind.min.css" referrerpolicy="no-referrer" />
</head>
<body class="bg-gray-200">
<!-- 9 boxes that are 20px wide by 24px tall -->
<!-- Each box should represent a shade of the blue color scheme -->
</body>
</html>
Raw
02-the-buttons-challenge.html
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.19/tailwind.min.css" referrerpolicy="no-referrer" />
</head>
<body>
<!-- blue background, rounded, thick left border -->
<div><button class="">Submit</button></div>
<!-- Red text, outlined -->
<div><button class="">Cancel</button></div>
<!-- light Indigo background, bottom border, indigo text -->
<div><button class="">Save</button></div>
<!-- Thick rounded, lots of padding, large button -->
<div><button class="">Buy Now</button></div>
<!-- Outlined, serif font, uppercase, rounded -->
<div><button class="">Send Postcard</button></div>
</body>
</html>
Raw
04-input-component-challenge.html
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.19/tailwind.min.css" referrerpolicy="no-referrer" />
</head>
<body class="h-screen flex flex-col justify-center items-center">
</body>
</html>
Raw
05-employee-card-challenge.html
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.19/tailwind.min.css" referrerpolicy="no-referrer" />
</head>
<body class="bg-gray-600 flex justify-center items-center h-screen">
</body>
</html>
Raw
06-final-course-project-landing-page.html
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.19/tailwind.min.css" referrerpolicy="no-referrer" />
</head>
<body class="">
</body>
</html>
Raw
07 - 30 Days Of Tailwind.md

30 days of Tailwind CSS

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

Challenge #1

Install Tailwind CSS without any Javascript Framework locally with purgeCSS, enable the dark mode option, preferences 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 ban layout, with cards and boxes and make it responsive.

Challenge #18

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

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

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 pagination widgets. With a button group, separated and side to side.

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment