Tailwind Components

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

Navigation

Return Home Report An Issue

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.

Mark As Completed

file_name = Path.basename(Regex.replace(~r/#.+/, __ENV__.file, ""), ".livemd")

save_name =
  case Path.basename(__DIR__) do
    "reading" -> "tailwind_css_components_reading"
    "exercises" -> "tailwind_css_components_exercise"
  end

progress_path = __DIR__ <> "/../progress.json"
existing_progress = File.read!(progress_path) |> Jason.decode!()

default = Map.get(existing_progress, save_name, false)

form =
  Kino.Control.form(
    [
      completed: input = Kino.Input.checkbox("Mark As Completed", default: default)
    ],
    report_changes: true
  )

Task.async(fn ->
  for %{data: %{completed: completed}} <- Kino.Control.stream(form) do
    File.write!(
      progress_path,
      Jason.encode!(Map.put(existing_progress, save_name, completed), pretty: true)
    )
  end
end)

form

Commit Your Progress

Run the following in your command line from the curriculum folder to track and save your progress in a Git commit. Ensure that you do not already have undesired or unrelated changes by running git status or by checking the source control tab in Visual Studio Code.

$ git checkout -b tailwind-css-components-exercise
$ git add .
$ git commit -m "finish tailwind css components exercise"
$ git push origin tailwind-css-components-exercise

Create a pull request from your tailwind-css-components-exercise branch to your solutions branch. Please do not create a pull request to the DockYard Academy repository as this will spam our PR tracker.

DockYard Academy Students Only:

Notify your teacher by including @BrooklinJazz in your PR description to get feedback. You (or your teacher) may merge your PR into your solutions branch after review.

If you are interested in joining the next academy cohort, sign up here to receive more news when it is available.

Up Next