Tailwind Components

Mix.install([
  {:kino, github: "livebook-dev/kino", override: true},
  {:kino_lab, "~> 0.1.0-dev", github: "jonatanklosko/kino_lab"},
  {:vega_lite, "~> 0.1.4"},
  {:kino_vega_lite, "~> 0.1.1"},
  {:benchee, "~> 0.1"},
  {:ecto, "~> 3.7"},
  {:math, "~> 0.7.0"},
  {:faker, "~> 0.17.0"},
  {:utils, path: "utils"},
  {:tested_cell, git: "https://github.com/BrooklinJazz/tested_cell"}
])

Navigation

Return Home Report An Issue

Tailwind Components

You’re going to use Tailwind 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.

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:

Commit Your Progress

Run the following in your command line from the project folder to track and save your progress in a Git commit.

$ git add .
$ git commit -m "finish tailwind components exercise"