Component Patterns

In this chapter, you learn patterns for reusable UI components you can use in real projects.

This chapter focuses on "styling"

Interactive behavior, such as opening and closing a modal or expanding an accordion, requires JavaScript (or a framework). Basic JavaScript implementation examples are included for the major components.

Buttons

Basic buttons

<!-- Primary -->
<button class="px-4 py-2 bg-blue-500 text-white font-medium rounded-lg
               hover:bg-blue-600 focus:ring-4 focus:ring-blue-300
               transition-colors">
  Primary
</button>

<!-- Secondary -->
<button class="px-4 py-2 bg-gray-200 text-gray-800 font-medium rounded-lg
               hover:bg-gray-300 focus:ring-4 focus:ring-gray-200
               transition-colors">
  Secondary
</button>

<!-- Outline -->
<button class="px-4 py-2 border-2 border-blue-500 text-blue-500 font-medium rounded-lg
               hover:bg-blue-50 focus:ring-4 focus:ring-blue-200
               transition-colors">
  Outline
</button>

<!-- Ghost -->
<button class="px-4 py-2 text-blue-500 font-medium rounded-lg
               hover:bg-blue-50 focus:ring-4 focus:ring-blue-200
               transition-colors">
  Ghost
</button>

Size variations

<!-- Small -->
<button class="px-3 py-1.5 text-sm bg-blue-500 text-white rounded-md">
  Small
</button>

<!-- Medium -->
<button class="px-4 py-2 text-base bg-blue-500 text-white rounded-lg">
  Medium
</button>

<!-- Large -->
<button class="px-6 py-3 text-lg bg-blue-500 text-white rounded-xl">
  Large
</button>

Button group

<div class="inline-flex rounded-lg overflow-hidden">
  <button class="px-4 py-2 bg-blue-500 text-white border-r border-blue-400">
    Left
  </button>
  <button class="px-4 py-2 bg-blue-500 text-white border-r border-blue-400">
    Center
  </button>
  <button class="px-4 py-2 bg-blue-500 text-white">
    Right
  </button>
</div>

Button with an icon

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

<!-- Icon only -->
<button class="p-2 bg-blue-500 text-white rounded-lg">
  <svg class="w-5 h-5">...</svg>
</button>

Cards

Basic card

<div class="bg-white rounded-xl shadow-lg overflow-hidden">
  <img src="..." class="w-full h-48 object-cover" />
  <div class="p-6">
    <span class="text-sm text-blue-600 font-semibold">Category</span>
    <h3 class="mt-2 text-xl font-bold text-gray-900">Card title</h3>
    <p class="mt-2 text-gray-600">
      Description goes here...
    </p>
    <button class="mt-4 px-4 py-2 bg-blue-500 text-white rounded-lg w-full">
      View details
    </button>
  </div>
</div>

Horizontal card

<div class="flex bg-white rounded-xl shadow-lg overflow-hidden">
  <img src="..." class="w-1/3 object-cover" />
  <div class="flex-1 p-6">
    <h3 class="text-xl font-bold">Title</h3>
    <p class="mt-2 text-gray-600">Description...</p>
  </div>
</div>

Interactive card

<div class="group bg-white rounded-xl shadow-lg overflow-hidden
            hover:shadow-xl transition-shadow cursor-pointer">
  <div class="relative">
    <img src="..." class="w-full h-48 object-cover
                          group-hover:scale-105 transition-transform duration-300" />
    <div class="absolute inset-0 bg-linear-to-t from-black/50 to-transparent
                opacity-0 group-hover:opacity-100 transition-opacity"></div>
  </div>
  <div class="p-6">
    <h3 class="text-xl font-bold group-hover:text-blue-500 transition-colors">
      Title
    </h3>
    <p class="mt-2 text-gray-600">Description...</p>
  </div>
</div>

Form elements

Text input

<div>
  <label class="block text-sm font-medium text-gray-700 mb-1">
    Label
  </label>
  <input
    type="text"
    class="w-full px-4 py-2 border border-gray-300 rounded-lg
           focus:ring-2 focus:ring-blue-500 focus:border-transparent
           placeholder:text-gray-400"
    placeholder="Placeholder"
  />
  <p class="mt-1 text-sm text-gray-500">Help text</p>
</div>

Error state

<div>
  <label class="block text-sm font-medium text-gray-700 mb-1">
    Email address
  </label>
  <input
    type="email"
    class="w-full px-4 py-2 border border-red-500 rounded-lg
           focus:ring-2 focus:ring-red-500 focus:border-transparent
           text-red-900 placeholder:text-red-300 bg-red-50"
    placeholder="example@email.com"
  />
  <p class="mt-1 text-sm text-red-500">Please enter a valid email address</p>
</div>

Select

<select class="w-full px-4 py-2 border border-gray-300 rounded-lg
               focus:ring-2 focus:ring-blue-500 focus:border-transparent
               bg-white appearance-none
               bg-[url('data:image/svg+xml,...')] bg-no-repeat bg-position-[right_1rem_center]">
  <option>Option 1</option>
  <option>Option 2</option>
  <option>Option 3</option>
</select>

Checkbox

<label class="flex items-center gap-3 cursor-pointer">
  <input
    type="checkbox"
    class="w-5 h-5 accent-blue-500"
  />
  <span class="text-gray-700">I agree to the terms of service</span>
</label>

Radio buttons

<div class="space-y-3">
  <label class="flex items-center gap-3 cursor-pointer">
    <input
      type="radio"
      name="plan"
      class="w-5 h-5 accent-blue-500"
    />
    <span class="text-gray-700">Basic plan</span>
  </label>
  <label class="flex items-center gap-3 cursor-pointer">
    <input
      type="radio"
      name="plan"
      class="w-5 h-5 accent-blue-500"
    />
    <span class="text-gray-700">Pro plan</span>
  </label>
</div>

Toggle switch

<label class="relative inline-flex items-center cursor-pointer">
  <input type="checkbox" class="sr-only peer" />
  <div class="w-11 h-6 bg-gray-200 rounded-full
              peer-focus:ring-4 peer-focus:ring-blue-300
              peer-checked:bg-blue-500
              after:content-[''] after:absolute after:top-0.5 after:left-0.5
              after:w-5 after:h-5 after:bg-white after:rounded-full
              after:transition-all peer-checked:after:translate-x-5"></div>
  <span class="ml-3 text-gray-700">Enable notifications</span>
</label>

<header class="bg-white shadow-sm sticky top-0 z-50">
  <nav class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
    <div class="flex justify-between h-16">
      <!-- Logo -->
      <div class="flex items-center">
        <a href="/" class="font-bold text-xl text-gray-900">Logo</a>
      </div>

      <!-- Desktop menu -->
      <div class="hidden md:flex items-center gap-8">
        <a href="#" class="text-gray-600 hover:text-gray-900">Home</a>
        <a href="#" class="text-gray-600 hover:text-gray-900">Products</a>
        <a href="#" class="text-gray-600 hover:text-gray-900">About</a>
        <a href="#" class="text-gray-600 hover:text-gray-900">Contact</a>
      </div>

      <!-- Action buttons -->
      <div class="flex items-center gap-4">
        <button class="px-4 py-2 text-gray-600 hover:text-gray-900">
          Log in
        </button>
        <button class="px-4 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600">
          Sign up
        </button>
      </div>
    </div>
  </nav>
</header>

Tabs

<div class="border-b border-gray-200">
  <nav class="flex gap-8">
    <a href="#" class="py-4 px-1 border-b-2 border-blue-500 text-blue-600 font-medium">
      Tab 1
    </a>
    <a href="#" class="py-4 px-1 border-b-2 border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300">
      Tab 2
    </a>
    <a href="#" class="py-4 px-1 border-b-2 border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300">
      Tab 3
    </a>
  </nav>
</div>

Breadcrumbs

<nav class="flex items-center gap-2 text-sm">
  <a href="#" class="text-gray-500 hover:text-gray-700">Home</a>
  <span class="text-gray-400">/</span>
  <a href="#" class="text-gray-500 hover:text-gray-700">Category</a>
  <span class="text-gray-400">/</span>
  <span class="text-gray-900 font-medium">Current page</span>
</nav>

Pagination

<nav class="flex items-center justify-center gap-1">
  <button class="px-3 py-2 text-gray-500 hover:bg-gray-100 rounded-lg disabled:opacity-50" disabled>
    Previous
  </button>
  <button class="px-4 py-2 bg-blue-500 text-white rounded-lg">1</button>
  <button class="px-4 py-2 text-gray-700 hover:bg-gray-100 rounded-lg">2</button>
  <button class="px-4 py-2 text-gray-700 hover:bg-gray-100 rounded-lg">3</button>
  <span class="px-2">...</span>
  <button class="px-4 py-2 text-gray-700 hover:bg-gray-100 rounded-lg">10</button>
  <button class="px-3 py-2 text-gray-700 hover:bg-gray-100 rounded-lg">
    Next
  </button>
</nav>

Feedback

Alerts

<!-- Info -->
<div class="flex items-start gap-3 p-4 bg-blue-50 border-l-4 border-blue-500 rounded-r-lg">
  <svg class="w-5 h-5 text-blue-500 shrink-0 mt-0.5">...</svg>
  <div>
    <h4 class="font-medium text-blue-800">Info</h4>
    <p class="mt-1 text-sm text-blue-700">The notification content goes here.</p>
  </div>
</div>

<!-- Success -->
<div class="flex items-start gap-3 p-4 bg-green-50 border-l-4 border-green-500 rounded-r-lg">
  <svg class="w-5 h-5 text-green-500 shrink-0 mt-0.5">...</svg>
  <div>
    <h4 class="font-medium text-green-800">Success</h4>
    <p class="mt-1 text-sm text-green-700">The operation completed successfully.</p>
  </div>
</div>

<!-- Warning -->
<div class="flex items-start gap-3 p-4 bg-yellow-50 border-l-4 border-yellow-500 rounded-r-lg">
  <svg class="w-5 h-5 text-yellow-500 shrink-0 mt-0.5">...</svg>
  <div>
    <h4 class="font-medium text-yellow-800">Warning</h4>
    <p class="mt-1 text-sm text-yellow-700">Caution is required.</p>
  </div>
</div>

<!-- Error -->
<div class="flex items-start gap-3 p-4 bg-red-50 border-l-4 border-red-500 rounded-r-lg">
  <svg class="w-5 h-5 text-red-500 shrink-0 mt-0.5">...</svg>
  <div>
    <h4 class="font-medium text-red-800">Error</h4>
    <p class="mt-1 text-sm text-red-700">A problem occurred.</p>
  </div>
</div>

Badges

<span class="px-2.5 py-0.5 text-xs font-semibold bg-blue-100 text-blue-800 rounded-full">
  New
</span>
<span class="px-2.5 py-0.5 text-xs font-semibold bg-green-100 text-green-800 rounded-full">
  Done
</span>
<span class="px-2.5 py-0.5 text-xs font-semibold bg-yellow-100 text-yellow-800 rounded-full">
  Pending
</span>
<span class="px-2.5 py-0.5 text-xs font-semibold bg-red-100 text-red-800 rounded-full">
  Urgent
</span>

<div class="relative group">
  <button class="px-4 py-2 bg-gray-800 text-white rounded-lg">
    Hover me
  </button>
  <div class="absolute bottom-full left-1/2 -translate-x-1/2 mb-2
              px-3 py-1 bg-gray-900 text-white text-sm rounded
              opacity-0 group-hover:opacity-100 transition-opacity
              pointer-events-none whitespace-nowrap">
    Tooltip text
    <div class="absolute top-full left-1/2 -translate-x-1/2
                border-4 border-transparent border-t-gray-900"></div>
  </div>
</div>

<!-- Overlay -->
<div class="fixed inset-0 z-50 flex items-center justify-center p-4
            bg-black/50 backdrop-blur-sm">
  <!-- Modal body -->
  <div class="bg-white rounded-xl shadow-2xl max-w-lg w-full max-h-[90vh] overflow-y-auto">
    <!-- Header -->
    <div class="flex items-center justify-between p-6 border-b border-gray-200">
      <h2 class="text-xl font-bold">Modal title</h2>
      <button class="p-1 text-gray-400 hover:text-gray-600 rounded">
        <svg class="w-6 h-6">...</svg>
      </button>
    </div>

    <!-- Body -->
    <div class="p-6">
      <p class="text-gray-600">The modal content goes here.</p>
    </div>

    <!-- Footer -->
    <div class="flex justify-end gap-3 p-6 border-t border-gray-200 bg-gray-50 rounded-b-xl">
      <button class="px-4 py-2 text-gray-700 hover:bg-gray-100 rounded-lg">
        Cancel
      </button>
      <button class="px-4 py-2 bg-blue-500 text-white hover:bg-blue-600 rounded-lg">
        Confirm
      </button>
    </div>
  </div>
</div>

CSS alone cannot toggle the modal's visibility. Below is an implementation example in vanilla JavaScript.

<button id="open-modal" class="px-4 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600">
  Open modal
</button>

<!-- Overlay (hidden initially) -->
<div id="modal-overlay" class="fixed inset-0 z-50 hidden flex items-center justify-center p-4
            bg-black/50 backdrop-blur-sm">
  <div class="bg-white rounded-xl shadow-2xl max-w-lg w-full">
    <!-- ...modal body (same structure as above)... -->
  </div>
</div>

<script>
  const openBtn = document.getElementById('open-modal');
  const overlay = document.getElementById('modal-overlay');
  const closeBtn = overlay.querySelector('button');

  openBtn.addEventListener('click', () => {
    overlay.classList.remove('hidden');
  });

  // Close on overlay click
  overlay.addEventListener('click', (e) => {
    if (e.target === overlay) {
      overlay.classList.add('hidden');
    }
  });

  // Close button
  closeBtn.addEventListener('click', () => {
    overlay.classList.add('hidden');
  });
</script>

Accessibility

When implementing components, add appropriate ARIA attributes.

<!-- Modal -->
<div role="dialog" aria-modal="true" aria-labelledby="modal-title">
  <h2 id="modal-title">Modal title</h2>
  ...
</div>

<!-- Alert -->
<div role="alert" class="bg-red-50 border border-red-200 text-red-800 p-4 rounded-lg">
  An error occurred
</div>

<!-- Icon button -->
<button aria-label="Close" class="p-1 text-gray-400 hover:text-gray-600 rounded">
  <svg class="w-6 h-6">...</svg>
</button>

Summary

Buttons: combine sizes, variants, and states
Cards: a composition of image, content, and actions
Forms: labels, inputs, and validation states
Navigation: headers, tabs, and pagination
Feedback: alerts, badges, and modals
Consistent spacing and color usage matter
Accessibility: add ARIA attributes appropriately

Buttons​

Basic buttons​

Size variations​

Button group​

Button with an icon​

Cards​

Basic card​

Horizontal card​

Interactive card​

Form elements​

Text input​

Error state​

Select​

Checkbox​

Radio buttons​

Toggle switch​

Navigation​

Header​

Tabs​

Breadcrumbs​

Pagination​

Feedback​

Alerts​

Badges​

Tooltip​

Modal​

Opening and closing the modal​

Accessibility​

Summary​

What to read next​