Common UI Patterns

Back

Loading concept...

Interview Essentials: Common UI Patterns in Tailwind CSS

🎭 The Story of the UI Toolbox

Imagine you’re a builder. Not building houses, but building websites. And just like a house builder has special tools—hammers, nails, saws—you have special building blocks called UI patterns.

These patterns are like LEGO pieces. Once you learn them, you can snap them together to build anything!

Today, we’ll open your toolbox and look at the 5 most important pieces every web builder needs:

  1. 🔘 Buttons – The doorbells of your website
  2. 🃏 Cards – Little boxes that hold information
  3. 📝 Forms – Where users talk back to you
  4. 🧭 Navigation – The map that helps people find their way
  5. 🎩 Headless UI – Magic helpers that do the hard work

🔘 Button Component Patterns

What is a Button?

Think of a button like a doorbell. When someone presses it, something happens!

On a website:

  • Click “Buy Now” → Something goes to your cart
  • Click “Send” → Your message flies away
  • Click “Play” → A video starts

The Basic Button Recipe

<button class="
  bg-blue-500
  text-white
  px-4 py-2
  rounded
">
  Click Me!
</button>

What each ingredient does:

  • bg-blue-500 → Paint it blue
  • text-white → White letters
  • px-4 py-2 → Padding (breathing room inside)
  • rounded → Soft, friendly corners

Button Flavors

Just like ice cream comes in flavors, buttons do too!

graph TD
    A["Button Types"] --> B["Primary"]
    A --> C["Secondary"]
    A --> D["Danger"]
    A --> E["Ghost"]
    B --> B1["bg-blue-500 text-white"]
    C --> C1["bg-gray-200 text-gray-800"]
    D --> D1["bg-red-500 text-white"]
    E --> E1["border-2 bg-transparent"]

Primary Button (The Star)

<button class="
  bg-blue-600
  hover:bg-blue-700
  text-white
  font-semibold
  px-6 py-3
  rounded-lg
  transition
">
  Save Changes
</button>

Secondary Button (The Helper)

<button class="
  bg-gray-100
  hover:bg-gray-200
  text-gray-800
  px-6 py-3
  rounded-lg
  transition
">
  Cancel
</button>

Danger Button (The Warning)

<button class="
  bg-red-500
  hover:bg-red-600
  text-white
  px-6 py-3
  rounded-lg
">
  Delete
</button>

Ghost Button (The Invisible Friend)

<button class="
  border-2
  border-blue-500
  text-blue-500
  hover:bg-blue-50
  px-6 py-3
  rounded-lg
">
  Learn More
</button>

Button States: How Buttons Feel

Buttons have feelings too! They change when you interact with them:

State What Happens Tailwind Classes
Normal Just sitting there bg-blue-500
Hover Mouse is over it hover:bg-blue-600
Active Being pressed active:bg-blue-700
Disabled Can’t be clicked disabled:opacity-50
Loading Working… Add a spinner!

Disabled Button Example

<button
  disabled
  class="
    bg-blue-500
    text-white
    px-6 py-3
    rounded-lg
    disabled:opacity-50
    disabled:cursor-not-allowed
">
  Can't Click Me
</button>

Button with Icon

<button class="
  flex items-center gap-2
  bg-green-500 text-white
  px-4 py-2 rounded-lg
">
  <svg class="w-5 h-5">...</svg>
  Download
</button>

🃏 Card Component Patterns

What is a Card?

Imagine a trading card or a flashcard. It’s a little box that holds information together—like a picture, a title, and some words.

Cards help organize information so it’s easy to read and looks pretty.

The Basic Card

<div class="
  bg-white
  rounded-xl
  shadow-md
  p-6
">
  <h3 class="font-bold text-lg">
    Card Title
  </h3>
  <p class="text-gray-600 mt-2">
    Some helpful information here.
  </p>
</div>

Card Anatomy

graph TD
    A["Card Container"] --> B["Header"]
    A --> C["Body/Content"]
    A --> D["Footer/Actions"]
    B --> B1["Image or Title"]
    C --> C1["Text, Lists, Data"]
    D --> D1["Buttons, Links"]

Product Card (Shopping)

<div class="
  bg-white rounded-xl
  shadow-lg overflow-hidden
  max-w-sm
">
  <img
    src="product.jpg"
    class="w-full h-48 object-cover"
  >
  <div class="p-4">
    <h3 class="font-bold">
      Cool Sneakers
    </h3>
    <p class="text-gray-500">$99.99</p>
    <button class="
      mt-4 w-full
      bg-blue-500 text-white
      py-2 rounded-lg
    ">
      Add to Cart
    </button>
  </div>
</div>

Profile Card (People)

<div class="
  bg-white rounded-xl
  shadow-md p-6
  text-center
">
  <img
    src="avatar.jpg"
    class="
      w-20 h-20
      rounded-full
      mx-auto
    "
  >
  <h3 class="mt-4 font-bold">
    Sarah Johnson
  </h3>
  <p class="text-gray-500 text-sm">
    Designer
  </p>
  <div class="mt-4 flex justify-center gap-2">
    <button class="
      bg-blue-500 text-white
      px-4 py-1 rounded-full text-sm
    ">
      Follow
    </button>
  </div>
</div>

Horizontal Card (News/Blog)

<div class="
  flex bg-white
  rounded-xl shadow-md
  overflow-hidden
">
  <img
    src="news.jpg"
    class="w-1/3 object-cover"
  >
  <div class="p-4">
    <span class="
      text-xs text-blue-500
      uppercase font-bold
    ">
      Technology
    </span>
    <h3 class="font-bold mt-1">
      Big News Title
    </h3>
    <p class="text-gray-600 text-sm mt-2">
      A short description...
    </p>
  </div>
</div>

📝 Form Styling Patterns

What is a Form?

A form is like a questionnaire. It’s how your website asks questions and users give answers.

  • Login form: “What’s your email? What’s your password?”
  • Contact form: “What’s your name? What do you want to say?”
  • Search: “What are you looking for?”

Basic Text Input

<input
  type="text"
  placeholder="Your name"
  class="
    w-full
    border border-gray-300
    rounded-lg
    px-4 py-3
    focus:outline-none
    focus:ring-2
    focus:ring-blue-500
    focus:border-transparent
  "
>

Input with Label (The Right Way!)

<div>
  <label class="
    block text-sm
    font-medium text-gray-700
    mb-1
  ">
    Email Address
  </label>
  <input
    type="email"
    class="
      w-full border border-gray-300
      rounded-lg px-4 py-3
      focus:ring-2 focus:ring-blue-500
    "
  >
</div>

Form Field States

Forms have moods too:

graph TD
    A["Input States"] --> B["Normal"]
    A --> C["Focus"]
    A --> D["Error"]
    A --> E["Success"]
    A --> F["Disabled"]

Error State (Something’s Wrong!)

<div>
  <label class="
    block text-sm font-medium
    text-red-600 mb-1
  ">
    Password
  </label>
  <input
    type="password"
    class="
      w-full
      border-2 border-red-500
      rounded-lg px-4 py-3
      focus:ring-2 focus:ring-red-500
    "
  >
  <p class="text-red-500 text-sm mt-1">
    Password must be 8+ characters
  </p>
</div>

Success State (All Good!)

<input
  class="
    w-full
    border-2 border-green-500
    rounded-lg px-4 py-3
  "
>

Complete Login Form

<form class="
  bg-white p-6
  rounded-xl shadow-lg
  max-w-md mx-auto
">
  <h2 class="text-2xl font-bold mb-6">
    Welcome Back
  </h2>

  <div class="mb-4">
    <label class="
      block text-sm font-medium mb-1
    ">
      Email
    </label>
    <input
      type="email"
      class="
        w-full border rounded-lg
        px-4 py-3
        focus:ring-2 focus:ring-blue-500
      "
    >
  </div>

  <div class="mb-6">
    <label class="
      block text-sm font-medium mb-1
    ">
      Password
    </label>
    <input
      type="password"
      class="
        w-full border rounded-lg
        px-4 py-3
      "
    >
  </div>

  <button class="
    w-full bg-blue-600
    text-white font-semibold
    py-3 rounded-lg
    hover:bg-blue-700
  ">
    Sign In
  </button>
</form>

Select Dropdown

<select class="
  w-full border border-gray-300
  rounded-lg px-4 py-3
  bg-white
  focus:ring-2 focus:ring-blue-500
">
  <option>Choose an option</option>
  <option>Option 1</option>
  <option>Option 2</option>
</select>

Checkbox & Radio

<!-- Checkbox -->
<label class="flex items-center gap-2">
  <input
    type="checkbox"
    class="
      w-5 h-5
      rounded
      text-blue-500
    "
  >
  <span>Remember me</span>
</label>

<!-- Radio -->
<label class="flex items-center gap-2">
  <input
    type="radio"
    name="plan"
    class="w-5 h-5 text-blue-500"
  >
  <span>Free Plan</span>
</label>

🧭 Navigation Patterns

What is Navigation?

Navigation is like a map for your website. It shows people where they can go and helps them get there.

Think of it like signs in a shopping mall:

  • “Food Court →”
  • “← Restrooms”
  • “Shops ↑”

Simple Navbar

<nav class="
  bg-white shadow-md
  px-6 py-4
">
  <div class="
    flex items-center
    justify-between
  ">
    <a href="/" class="
      text-xl font-bold
      text-blue-600
    ">
      MyBrand
    </a>

    <div class="flex gap-6">
      <a href="#" class="
        text-gray-600
        hover:text-blue-600
      ">
        Home
      </a>
      <a href="#" class="
        text-gray-600
        hover:text-blue-600
      ">
        About
      </a>
      <a href="#" class="
        text-gray-600
        hover:text-blue-600
      ">
        Contact
      </a>
    </div>
  </div>
</nav>

Navigation Anatomy

graph TD
    A["Navigation"] --> B["Logo/Brand"]
    A --> C["Links"]
    A --> D["Actions"]
    C --> C1["Home"]
    C --> C2["About"]
    C --> C3["Products"]
    D --> D1["Search"]
    D --> D2["Sign In Button"]

Mobile Menu Button (Hamburger)

<button class="
  md:hidden
  p-2
  text-gray-600
">
  <svg class="w-6 h-6">
    <!-- 3 horizontal lines -->
    <path d="M4 6h16M4 12h16M4 18h16"/>
  </svg>
</button>

Tabs Navigation

<div class="
  flex border-b
  border-gray-200
">
  <button class="
    px-6 py-3
    border-b-2 border-blue-500
    text-blue-600 font-medium
  ">
    Tab 1
  </button>
  <button class="
    px-6 py-3
    text-gray-500
    hover:text-gray-700
  ">
    Tab 2
  </button>
  <button class="
    px-6 py-3
    text-gray-500
    hover:text-gray-700
  ">
    Tab 3
  </button>
</div>

Breadcrumb (Trail of Crumbs)

<nav class="flex text-sm">
  <a href="#" class="text-gray-500">
    Home
  </a>
  <span class="mx-2 text-gray-400">/</span>
  <a href="#" class="text-gray-500">
    Products
  </a>
  <span class="mx-2 text-gray-400">/</span>
  <span class="text-gray-900">
    Sneakers
  </span>
</nav>

Sidebar Navigation

<aside class="
  w-64 bg-gray-900
  text-white min-h-screen
  p-4
">
  <div class="text-xl font-bold mb-8">
    Dashboard
  </div>

  <nav class="space-y-2">
    <a href="#" class="
      flex items-center gap-3
      px-4 py-2 rounded-lg
      bg-gray-800
    ">
      <svg>...</svg>
      Overview
    </a>
    <a href="#" class="
      flex items-center gap-3
      px-4 py-2 rounded-lg
      hover:bg-gray-800
    ">
      <svg>...</svg>
      Analytics
    </a>
  </nav>
</aside>

🎩 Headless UI Integration

What is Headless UI?

Imagine you buy a toy car without paint. The wheels work, doors open, but YOU decide what color to paint it!

Headless UI is like that. It gives you working parts (dropdowns that open, modals that close), but YOU style them however you want with Tailwind!

Why Use Headless UI?

graph TD
    A["Headless UI"] --> B["Accessibility Built-in"]
    A --> C["Keyboard Navigation"]
    A --> D["Screen Reader Support"]
    A --> E["You Style Everything"]
    E --> F["Total Design Control"]

Without Headless UI: You build everything from scratch—menus, keyboard support, screen readers… SO much work!

With Headless UI: The hard stuff is done. You just add your Tailwind classes!

Installing Headless UI

npm install @headlessui/react

Dropdown Menu Example

import { Menu } from '@headlessui/react'

function MyDropdown() {
  return (
    <Menu>
      <Menu.Button className="
        bg-blue-500 text-white
        px-4 py-2 rounded-lg
      ">
        Options
      </Menu.Button>

      <Menu.Items className="
        bg-white shadow-lg
        rounded-lg mt-2 p-1
      ">
        <Menu.Item>
          {({ active }) => (
            <button className={`
              w-full px-4 py-2
              rounded text-left
              ${active ? 'bg-blue-100' : ''}
            `}>
              Edit
            </button>
          )}
        </Menu.Item>
        <Menu.Item>
          {({ active }) => (
            <button className={`
              w-full px-4 py-2
              rounded text-left
              ${active ? 'bg-blue-100' : ''}
            `}>
              Delete
            </button>
          )}
        </Menu.Item>
      </Menu.Items>
    </Menu>
  )
}

Modal/Dialog Example

import { Dialog } from '@headlessui/react'
import { useState } from 'react'

function MyModal() {
  const [isOpen, setIsOpen] = useState(false)

  return (
    <>
      <button
        onClick={() => setIsOpen(true)}
        className="
          bg-blue-500 text-white
          px-4 py-2 rounded
        "
      >
        Open Modal
      </button>

      <Dialog
        open={isOpen}
        onClose={() => setIsOpen(false)}
        className="relative z-50"
      >
        <div className="
          fixed inset-0
          bg-black/30
        "/>

        <div className="
          fixed inset-0
          flex items-center
          justify-center p-4
        ">
          <Dialog.Panel className="
            bg-white rounded-xl
            p-6 max-w-md
            shadow-xl
          ">
            <Dialog.Title className="
              text-lg font-bold
            ">
              Confirm Action
            </Dialog.Title>

            <p className="mt-2 text-gray-600">
              Are you sure?
            </p>

            <button
              onClick={() => setIsOpen(false)}
              className="
                mt-4 bg-blue-500
                text-white px-4 py-2
                rounded
              "
            >
              Got it!
            </button>
          </Dialog.Panel>
        </div>
      </Dialog>
    </>
  )
}

Switch/Toggle Example

import { Switch } from '@headlessui/react'
import { useState } from 'react'

function MyToggle() {
  const [enabled, setEnabled] = useState(false)

  return (
    <Switch
      checked={enabled}
      onChange={setEnabled}
      className={`
        relative w-14 h-8
        rounded-full transition
        ${enabled ? 'bg-blue-500' : 'bg-gray-300'}
      `}
    >
      <span className={`
        inline-block w-6 h-6
        bg-white rounded-full
        transform transition
        ${enabled ? 'translate-x-7' : 'translate-x-1'}
      `}/>
    </Switch>
  )
}

🎯 Quick Reference Table

Pattern Key Classes Use When
Primary Button bg-blue-600 text-white Main action
Card bg-white rounded-xl shadow-md p-6 Group content
Input border rounded-lg px-4 py-3 focus:ring-2 User input
Navbar flex justify-between items-center Site navigation
Tabs border-b-2 border-blue-500 Section switching
Headless Menu <Menu> + Tailwind Accessible dropdowns

🚀 You Did It!

You now know the 5 essential UI patterns that appear in almost every website:

  1. Buttons – Make them clickable and beautiful
  2. Cards – Organize information in neat boxes
  3. Forms – Collect user input with style
  4. Navigation – Help users find their way
  5. Headless UI – Get accessibility for free

Remember: These patterns are like LEGO bricks. Mix and match them to build amazing things!

Happy building! 🏗️

Loading story...

Story - Premium Content

Please sign in to view this story and start learning.

Upgrade to Premium to unlock full access to all stories.

Sign In to Access Get Premium Access Close

Stay Tuned!

Story is coming soon.

Story Preview

Story - Premium Content

Please sign in to view this concept and start learning.

Upgrade to Premium to unlock full access to all content.

Sign In to Access Get Premium Access Close