These are the components I copy into every project. No npm install, no dependencies. Just Tailwind classes.

1. Button variants

<!-- Primary -->
<button class="rounded-lg bg-blue-600 px-4 py-2 text-sm font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 transition-colors">
  Save changes
</button>

<!-- Secondary -->
<button class="rounded-lg border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 transition-colors">
  Cancel
</button>

<!-- Danger -->
<button class="rounded-lg bg-red-600 px-4 py-2 text-sm font-medium text-white hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-offset-2 transition-colors">
  Delete
</button>

2. Card

<div class="rounded-xl border border-gray-200 bg-white p-6 shadow-sm hover:shadow-md transition-shadow">
  <h3 class="text-lg font-semibold text-gray-900">Card title</h3>
  <p class="mt-2 text-sm text-gray-600">Card description goes here with some helpful text.</p>
  <div class="mt-4">
    <a href="#" class="text-sm font-medium text-blue-600 hover:text-blue-500">Learn more →</a>
  </div>
</div>

3. Navbar

<nav class="border-b border-gray-200 bg-white">
  <div class="mx-auto flex h-16 max-w-7xl items-center justify-between px-4">
    <a href="/" class="text-xl font-bold text-gray-900">Logo</a>
    <div class="hidden space-x-8 md:flex">
      <a href="#" class="text-sm font-medium text-gray-500 hover:text-gray-900">Features</a>
      <a href="#" class="text-sm font-medium text-gray-500 hover:text-gray-900">Pricing</a>
      <a href="#" class="text-sm font-medium text-gray-500 hover:text-gray-900">Docs</a>
    </div>
    <button class="rounded-lg bg-gray-900 px-4 py-2 text-sm font-medium text-white hover:bg-gray-800">
      Sign up
    </button>
  </div>
</nav>

4. Input with label

<div>
  <label for="email" class="block text-sm font-medium text-gray-700">Email</label>
  <input type="email" id="email" placeholder="you@example.com"
    class="mt-1 block w-full rounded-lg border border-gray-300 px-3 py-2 text-sm shadow-sm placeholder:text-gray-400 focus:border-blue-500 focus:outline-none focus:ring-1 focus:ring-blue-500" />
</div>

5. Badge / Tag

<span class="inline-flex items-center rounded-full bg-green-100 px-2.5 py-0.5 text-xs font-medium text-green-800">Active</span>
<span class="inline-flex items-center rounded-full bg-yellow-100 px-2.5 py-0.5 text-xs font-medium text-yellow-800">Pending</span>
<span class="inline-flex items-center rounded-full bg-red-100 px-2.5 py-0.5 text-xs font-medium text-red-800">Inactive</span>

6. Alert / Banner

<!-- Success -->
<div class="rounded-lg border border-green-200 bg-green-50 p-4">
  <p class="text-sm text-green-800">✅ Changes saved successfully.</p>
</div>

<!-- Error -->
<div class="rounded-lg border border-red-200 bg-red-50 p-4">
  <p class="text-sm text-red-800">❌ Something went wrong. Please try again.</p>
</div>

<!-- Info -->
<div class="rounded-lg border border-blue-200 bg-blue-50 p-4">
  <p class="text-sm text-blue-800">ℹ️ Your trial expires in 3 days.</p>
</div>

7. Avatar with status

<div class="relative inline-block">
  <img src="/avatar.jpg" alt="User" class="h-10 w-10 rounded-full object-cover" />
  <span class="absolute bottom-0 right-0 h-3 w-3 rounded-full border-2 border-white bg-green-500"></span>
</div>

8. Modal overlay

<div class="fixed inset-0 z-50 flex items-center justify-center bg-black/50">
  <div class="w-full max-w-md rounded-xl bg-white p-6 shadow-xl">
    <h2 class="text-lg font-semibold text-gray-900">Confirm action</h2>
    <p class="mt-2 text-sm text-gray-600">Are you sure? This can't be undone.</p>
    <div class="mt-6 flex justify-end space-x-3">
      <button class="rounded-lg border border-gray-300 px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50">Cancel</button>
      <button class="rounded-lg bg-red-600 px-4 py-2 text-sm font-medium text-white hover:bg-red-700">Delete</button>
    </div>
  </div>
</div>

9. Loading spinner

<div class="flex items-center justify-center">
  <div class="h-8 w-8 animate-spin rounded-full border-4 border-gray-200 border-t-blue-600"></div>
</div>

10. Empty state

<div class="flex flex-col items-center justify-center py-12 text-center">
  <div class="text-4xl">📭</div>
  <h3 class="mt-4 text-lg font-semibold text-gray-900">No results found</h3>
  <p class="mt-2 text-sm text-gray-500">Try adjusting your search or filters.</p>
  <button class="mt-6 rounded-lg bg-blue-600 px-4 py-2 text-sm font-medium text-white hover:bg-blue-700">
    Clear filters
  </button>
</div>

Every one of these is accessible, responsive, and uses only Tailwind utility classes. No JavaScript required (except toggling the modal visibility). Copy what you need.

Related resources

• Tailwind CSS cheat sheet
• CSS complete guide
• CSS Flexbox & Grid cheat sheet

Related: What is Tailwind CSS? A Simple Explanation for Developers