iwantcoding.com
🔥 Daily 👥 Rooms 🏆 Top Log in Sign up

Examples

By · Reviewed & last updated · Part of Tailwind CSS Tutorial

Useful Tailwind patterns you reach for over and over - card, nav, modal, form, table.

Tailwind by example

EXAMPLE
<!-- 1. Card -->
<article class='rounded-xl border border-gray-200 bg-white p-6 shadow-sm hover:shadow-md transition'>
  <h3 class='text-lg font-semibold text-gray-900'>Title</h3>
  <p class='mt-2 text-sm text-gray-600'>Body text.</p>
  <button class='mt-4 text-sm font-medium text-blue-600 hover:text-blue-700'>
    Read more &rarr;
  </button>
</article>


<!-- 2. Sticky top nav -->
<header class='sticky top-0 z-10 bg-white/80 backdrop-blur border-b border-gray-200'>
  <nav class='mx-auto flex max-w-6xl items-center justify-between p-4'>
    <a href='/' class='font-bold'>Brand</a>
    <ul class='hidden md:flex gap-6 text-sm text-gray-700'>
      <li><a href='/pricing' class='hover:text-gray-900'>Pricing</a></li>
      <li><a href='/docs' class='hover:text-gray-900'>Docs</a></li>
    </ul>
  </nav>
</header>


<!-- 3. Modal (with dialog element) -->
<dialog id='m' class='rounded-xl p-0 backdrop:bg-black/40'>
  <div class='w-[28rem] p-6'>
    <h2 class='text-lg font-semibold'>Confirm</h2>
    <p class='mt-2 text-sm text-gray-600'>Are you sure?</p>
    <div class='mt-6 flex justify-end gap-2'>
      <button class='px-3 py-1.5 text-sm' onclick='m.close()'>Cancel</button>
      <button class='px-3 py-1.5 text-sm rounded bg-red-600 text-white'>Delete</button>
    </div>
  </div>
</dialog>


<!-- 4. Form field with label + error -->
<div>
  <label for='email' class='block text-sm font-medium text-gray-700'>Email</label>
  <input
    id='email' type='email' required
    class='mt-1 block w-full rounded border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 invalid:border-red-500'
  />
  <p class='mt-1 text-sm text-red-600 hidden peer-invalid:block'>Enter a valid email.</p>
</div>


<!-- 5. Table -->
<table class='min-w-full divide-y divide-gray-200'>
  <thead class='bg-gray-50'>
    <tr>
      <th class='px-4 py-2 text-left text-xs font-medium uppercase text-gray-500'>Name</th>
      <th class='px-4 py-2 text-left text-xs font-medium uppercase text-gray-500'>Email</th>
    </tr>
  </thead>
  <tbody class='divide-y divide-gray-100 bg-white'>
    <tr>
      <td class='px-4 py-2 text-sm text-gray-900'>Ada Lovelace</td>
      <td class='px-4 py-2 text-sm text-gray-600'>ada@example.com</td>
    </tr>
  </tbody>
</table>

Why it matters

Card, nav, modal, form, table - that is 90 percent of every SaaS UI. Once you have a clean version of each, the rest is composition. Copy these as a starter, customise to your design system, extract to components when you reuse them.

Tip: Tweak the snippet with Try it Yourself », then sit the quiz at the bottom of the page.

Example

Example
<!-- See the lesson body for ready-made components. -->
Try it Yourself »

Discussion

Loading…