Common UI Components

<!-- Primary button -->
<button class="rounded-lg bg-blue-600 px-4 py-2 text-white hover:bg-blue-700 transition-colors">
  Primary
</button>

<!-- Secondary button -->
<button class="rounded-lg border border-blue-600 px-4 py-2 text-blue-600 hover:bg-blue-50 transition-colors">
  Secondary
</button>

<!-- Ghost button -->
<button class="rounded-lg px-4 py-2 text-blue-600 hover:bg-blue-50 transition-colors">
  Ghost
</button>

<div class="rounded-xl bg-white p-6 shadow-md">
  <h3 class="text-lg font-semibold">Card Title</h3>
  <p class="mt-2 text-gray-600">Card content goes here.</p>
  <button class="mt-4 rounded-lg bg-blue-600 px-4 py-2 text-white hover:bg-blue-700">
    Read More
  </button>
</div>

<div>
  <label class="mb-2 block text-sm font-medium text-gray-700">ইমেইল</label>
  <input
    type="email"
    class="w-full rounded-lg border border-gray-300 px-3 py-2 focus:border-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-500"
    placeholder="you@example.com"
  />
</div>

<nav class="flex items-center justify-between bg-white px-6 py-3 shadow-sm">
  <a href="#" class="text-xl font-bold text-blue-600">Logo</a>
  <div class="flex gap-4">
    <a href="#" class="text-gray-600 hover:text-blue-600">Home</a>
    <a href="#" class="text-gray-600 hover:text-blue-600">About</a>
    <a href="#" class="text-gray-600 hover:text-blue-600">Contact</a>
  </div>
</nav>