Tailwind Components

Mix.install([
  {:jason, "~> 1.4"},
  {:kino, "~> 0.9", override: true},
  {:youtube, github: "brooklinjazz/youtube"},
  {:hidden_cell, github: "brooklinjazz/hidden_cell"}
])

Navigation

Tailwind Components

You’re going to use Tailwind CSS and HTML to mimic a provided image. Create a new HTML file in your projects folder for each exercise.

  
  
  


  

    Hello world!
  

Hoverable Outline Button

Create a button with rounder corners, an underline, the orange-500 background and 3xl size text.

On hover, the button should change the background color to orange-500.

Sign Up Form

Create the following Sign Up form.

You can find an example solution here: https://play.tailwindcss.com/fghjDPOp7Y

Rainbow Boxes

Create a series of rainbow colored boxes like the following.

Card Component

Components like the following are often called Card Components. Create a card component matching the following with an image, heading, subtitle, body, and bottom bar decoration.

You can use https://picsum.photos/200/100 to retrieve a fake image:

Bonus: Clone Component

Front-end developers who focus on building UI often work together with Designers to build out an existing design. While you might not have access to your own designer, you can mimic this experience for further practice.

Go to one of your favourite websites and pick an element on the page. Recreate the element using HTML + Tailwind. You may even create an entire “clone” of the page to really stretch your skills.

Commit Your Progress

DockYard Academy now recommends you use the latest Release rather than forking or cloning our repository.

Run git status to ensure there are no undesirable changes. Then run the following in your command line from the curriculum folder to commit your progress.

$ git add .
$ git commit -m "finish Tailwind Components exercise"
$ git push

We’re proud to offer our open-source curriculum free of charge for anyone to learn from at their own pace.

We also offer a paid course where you can learn from an instructor alongside a cohort of your peers. We will accept applications for the June-August 2023 cohort soon.

Navigation