UI elements examples with Tailwind CSS 🖼️

Introduction
What is Tailwind CSS?
Examples
- Button
- Input
- Select
- Checkbox
- Form
- Modal
Summary

Introduction

In this article I would like to go over the basics of using Tailwind CSS and provide some examples on how you can use it to create common UI elements such as buttons, forms, modals, navigation menus and so on, so you can later reuse them in your own projects.

What is Tailwind CSS?

In case you're not familiar with it already, Tailwind CSS is a utility-first CSS framework that allows you to create custom user interfaces without the bloat of traditional frameworks. It's perfect to quickly prototype and build beautiful, functional user interfaces for your web projects. You can read more about it on their website here.

Examples

Let's dive in and take a look at how we can use Tailwind CSS to create some common UI elements. Each example comes with a ready to use HTML code snippet.

Button

A base for a regular primary button.

<button
  class="
    px-2
    py-1.5
    rounded-md
    bg-blue-500
    hover:bg-blue-600
    font-medium
    text-white
  "
>
  Submit
</button>

You can change bg-* and text-* classes to create other variants:

red - bg-red-500 hover:bg-red-600 text-white
dark - bg-slate-900 hover:bg-slate-800 text-white
light - bg-slate-50 hover:bg-slate-100 text-slate-800

Input

A base for a regular input field.

<input
  class="
    px-2
    py-1.5
    rounded
    ring-1 ring-slate-700/20
    text-slate-700
    block
  "
  type="email"
  placeholder="Your email goes here"
/>

You can change ring-* class to create other variants:

blue - ring-blue-500/30
red - ring-red-500/30

Select

A base for a regular select element.

<select
  class="
    block
    w-48
    p-2
    rounded-md
    bg-slate-200
    font-medium
    text-slate-700
  "
>
  <option value="apple">Apple</option>
  <option value="banana">Banana</option>
  <option value="orange">Orange</option>
</select>

This one has some limitations in terms of styling, but still I prefer to use native solutions rather than building my own from scratch. Just for the sake of accessibility.

Checkbox

A base for a regular checkbox field with label.

<label class="flex items-center">
  <input class="mr-1.5 accent-blue-500" type="checkbox" />
  <span class="text-slate-800">Subscribe</span>
</label>

You can change checkbox background by changing accent-* class.

Form

A boilerplate for a simple and responsive sign up form.

<form class="max-w-md p-4 rounded-md border border-slate-100 shadow-md">
  <h2 class="mb-1 font-bold text-xl text-slate-800">Sign up</h2>
  <p class="mb-2 text-slate-500">
    Create an account and join our awesome community. It's completely
    free.
  </p>
  <label class="block mb-2">
    <span class="block mb-1 font-semibold text-sm text-slate-700">
      Email address
    </span>
    <input
      class="
        block
        w-full
        px-2
        py-1.5
        rounded
        ring-1 ring-slate-700/20
        text-slate-700
        block
      "
      type="email"
      placeholder="Your email"
    />
  </label>
  <label class="block mb-3">
    <span class="block mb-1 font-semibold text-sm text-slate-700">
      Password
    </span>
    <input
      class="
        block
        w-full
        px-2
        py-1.5
        rounded
        ring-1 ring-slate-700/20
        text-slate-700
        block
      "
      type="password"
      placeholder="At least 6 characters"
    />
  </label>
  <button
    class="
      w-full
      mb-1
      px-2
      py-1.5
      rounded-md
      bg-blue-500
      hover:bg-blue-600
      font-medium
      text-white
    "
    type="submit"
  >
    Register
  </button>
  <a
    class="block text-xs text-blue-500 hover:text-blue-600 text-center"
    href="#"
  >
    Already have an account?
  </a>
</form>

Modal

A boilerplate for a simple modal with close button.

<dialog
  class="
    fixed
    top-0
    left-0
    p-4
    w-full
    h-full
    bg-slate-800/80
    flex
    items-center
    justify-center
  "
  open
>
  <div class="max-w-md w-full p-5 rounded-md bg-white shadow-sm">
    <div class="mb-1 flex items-center justify-between">
      <h2 class="font-bold text-xl text-slate-800">
        Lorem ipsum dolor sit amet
      </h2>
      <button
        class="
          shrink-0
          w-[1.5rem]
          h-[1.5rem]
          rounded
          bg-slate-100
          hover:bg-slate-200
          text-slate-600
        "
      >
        &times;
      </button>
    </div>
    <p class="leading-relaxed text-slate-500">
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Non
      dolorem vitae optio fuga itaque ab, voluptatibus officia iusto
      ipsa at.
    </p>
  </div>
</dialog>

All of the above listed examples are also available here, so take a look to see them in action.

Summary

I hope this article provided you with a good demonstration of Tailwind CSS possibilities. If you have a specific questions or examples that you'd like to see, feel free to leave them in the comment section below.

Thanks for reading! 👋