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

## 00 - Learn Tailwind CSS - Scrimba - Challenges Started.md

      
    Raw
  

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

learn-tailwind-pdf

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

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

## 03-block-gallery-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>
  <!-- Must take up all of the available space -->
  <!-- Evenly distributed 3x3 grid -->
  <!-- Letters must be centered on the square -->
  <!-- Must have some spacing between the blocks -->
  <div class="">
    <div class="bg-teal-100">A</div>
    <div class="bg-teal-200">B</div>
    <div class="bg-teal-300">C</div>
    <div class="bg-teal-400">D</div>
    <div class="bg-teal-500">E</div>
    <div class="bg-teal-600">F</div>
    <div class="bg-teal-700">G</div>
    <div class="bg-teal-800">H</div>
    <div class="bg-teal-900">I</div>
  </div>
</body>

</html>

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

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

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

## 07 - 30 Days Of Tailwind.md

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