tailwind-by-example-1

gistfile1.txt

<!-- buttons -->
<button class="h-10 rounded-md border border-black bg-black px-6 font-semibold text-white transition duration-300 hover:bg-white hover:text-black">Button</button>

<button class="flex h-10 items-center gap-2 rounded-md border border-black bg-black px-6 font-semibold text-white transition duration-300 hover:bg-white hover:text-black">
  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="22 12 18 12 15 21 9 3 6 12 2 12"></polyline></svg>
  Button
</button>

<!-- search bar -->
<div class="relative">
  <svg class="absolute left-3 top-2 w-4 text-slate-400" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
    <circle cx="11" cy="11" r="8"></circle>
    <line x1="21" y1="21" x2="16.65" y2="16.65"></line>
  </svg>
  <input class="rounded-md py-2 pl-10 text-sm leading-6 text-slate-900 placeholder-slate-400 shadow-sm ring-1 ring-slate-200 focus:ring-2 focus:ring-blue-500" type="text" aria-label="Search" placeholder="Search..." />
</div>

<!-- alert -->
<div class="flex gap-2 rounded-xl bg-slate-200 p-4">
  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
    <circle cx="12" cy="12" r="10"></circle>
    <line x1="12" y1="8" x2="12" y2="12"></line>
    <line x1="12" y1="16" x2="12.01" y2="16"></line>
  </svg>
  <span>New update available.</span>
</div>

<!-- badge -->
<span class="rounded-full border border-purple-400 px-2 text-xs text-purple-400">Category</span>

<!-- avatar -->
<div class="relative w-12">
  <div class="z-2 absolute top-0 right-0 h-1/5 w-1/5 rounded-full border border-white bg-green-400"></div>
  <img class="rounded-full" src="https://placeimg.com/150/150/people" alt="" />
</div>

<!-- card -->
<div class="w-64 overflow-auto rounded-lg bg-slate-200 shadow-xl">
  <figure>
    <img class="h-48 w-full object-cover" src="https://placeimg.com/150/150/people" alt="" />
  </figure>
  <div class="flex flex-col gap-2 p-4">
    <h2 class="text-xl font-semibold">Card Title</h2>
    Card Content
    <div class="flex flex-wrap items-start justify-end gap-2"><button>Action</button></div>
  </div>
</div>