Examples

<header
  class="flex items-center justify-between p-6 bg-white border-b border-gray-light"
>
  <h1 class="text-2xl font-700">Logo</h1>
  <nav class="flex gap-6">
    <a href="#" class="text-base text-gray">Home</a>
    <a href="#" class="text-base text-gray">About</a>
    <a href="#" class="text-base text-gray">Contact</a>
  </nav>
</header>

<header class="flex items-center justify-between p-6 bg-blue text-white">
  <h1 class="text-2xl font-700">Brand</h1>
  <div class="flex items-center gap-4">
    <a href="#" class="text-white">Login</a>
    <button class="btn bg-white text-blue">Sign Up</button>
  </div>
</header>

<div class="card p-6">
  <h3 class="text-xl font-600 mb-4">Card Title</h3>
  <p class="text-gray mb-4">Card content goes here.</p>
  <button class="btn btn-blue">Learn More</button>
</div>

<div class="card p-0 overflow-hidden">
  <img src="image.jpg" class="w-full h-48 object-cover" alt="Card image" />
  <div class="p-6">
    <h3 class="text-xl font-600 mb-2">Card Title</h3>
    <p class="text-gray mb-4">Card description</p>
    <button class="btn btn-blue">Read More</button>
  </div>
</div>

<button class="btn btn-blue">Primary</button>
<button class="btn btn-green">Success</button>
<button class="btn btn-red">Danger</button>
<button class="btn bg-gray text-white">Secondary</button>

<button class="btn btn-blue btn-sm">Small</button>
<button class="btn btn-blue">Normal</button>
<button class="btn btn-blue btn-lg">Large</button>

<div class="flex gap-6">
  <div class="w-1-2">
    <h2 class="text-2xl font-600 mb-4">Left Column</h2>
    <p class="text-gray">Left column content</p>
  </div>
  <div class="w-1-2">
    <h2 class="text-2xl font-600 mb-4">Right Column</h2>
    <p class="text-gray">Right column content</p>
  </div>
</div>

<div class="flex items-center justify-center min-h-screen">
  <div class="max-w-md p-8 text-center">
    <h1 class="text-4xl font-700 mb-4">Welcome</h1>
    <p class="text-lg text-gray mb-8">Your content here</p>
    <button class="btn btn-blue">Get Started</button>
  </div>
</div>

<form class="max-w-md">
  <div class="mb-4">
    <label class="text-sm font-500 mb-2">Name</label>
    <input type="text" class="w-full p-3 border border-gray rounded" />
  </div>
  <div class="mb-4">
    <label class="text-sm font-500 mb-2">Email</label>
    <input type="email" class="w-full p-3 border border-gray rounded" />
  </div>
  <div class="mb-6">
    <label class="text-sm font-500 mb-2">Message</label>
    <textarea class="w-full p-3 border border-gray rounded h-32"></textarea>
  </div>
  <button class="btn btn-blue w-full">Send Message</button>
</form>

<nav class="flex gap-6 p-4 bg-gray-light">
  <a href="#" class="text-gray hover:text-blue">Home</a>
  <a href="#" class="text-gray hover:text-blue">About</a>
  <a href="#" class="text-gray hover:text-blue">Services</a>
  <a href="#" class="text-gray hover:text-blue">Contact</a>
</nav>

<aside class="w-64 p-6 bg-gray-light">
  <h2 class="text-lg font-600 mb-4">Navigation</h2>
  <nav class="flex flex-col gap-2">
    <a href="#" class="text-gray py-2">Dashboard</a>
    <a href="#" class="text-gray py-2">Profile</a>
    <a href="#" class="text-gray py-2">Settings</a>
  </nav>
</aside>