Tailwind CSS 展示案例

UI 元件展示庫

以下展示各種使用 Tailwind CSS 實作的 UI 元件。點擊分類標籤篩選想看的類型。

card 產品卡片

帶有圖片、標題、描述與按鈕的標準產品卡片元件。

<div class="max-w-sm rounded-2xl overflow-hidden shadow-lg bg-white">
  <img class="w-full h-48 object-cover" src="img.jpg" alt="">
  <div class="p-5">
    <span class="text-xs text-blue-500 font-semibold uppercase">設計</span>
    <h3 class="mt-1 text-lg font-bold text-gray-900">卡片標題</h3>
    <p class="mt-2 text-sm text-gray-600">描述文字...</p>
    <button class="mt-4 w-full py-2 bg-blue-500 text-white rounded-xl
                   hover:bg-blue-600 transition text-sm font-medium">
      立即查看
    </button>
  </div>
</div>

nav 響應式導覽列

桌面版水平排列，手機版漢堡選單的 Navbar。

<nav class="flex items-center justify-between px-6 py-4 bg-white shadow">
  <a class="text-xl font-bold text-blue-600" href="#">Logo</a>
  <div class="hidden md:flex gap-6 text-sm text-gray-600">
    <a href="#" class="hover:text-blue-500">首頁</a>
    <a href="#" class="hover:text-blue-500">產品</a>
    <a href="#" class="hover:text-blue-500">關於</a>
  </div>
  <button class="md:hidden p-2">☰</button>
</nav>

hero Hero 區塊

全版 Hero，包含標題、副標、CTA 按鈕與背景漸層。

<section class="min-h-screen bg-gradient-to-br from-blue-600 to-indigo-800
                flex flex-col items-center justify-center text-white px-4">
  <h1 class="text-5xl md:text-7xl font-extrabold text-center">
    打造精美介面
  </h1>
  <p class="mt-4 text-xl text-blue-100 text-center max-w-2xl">
    使用 Tailwind CSS，用更少的時間實現更好的設計。
  </p>
  <div class="mt-8 flex gap-4">
    <a class="px-6 py-3 bg-white text-blue-700 rounded-full font-bold
              hover:bg-blue-50 transition" href="#">開始使用</a>
    <a class="px-6 py-3 border border-white text-white rounded-full
              hover:bg-white/10 transition" href="#">了解更多</a>
  </div>
</section>

form 登入表單

具有 focus ring 與 hover 效果的現代登入表單。

<form class="w-full max-w-sm mx-auto p-8 bg-white rounded-2xl shadow-xl">
  <h2 class="text-2xl font-bold text-gray-800 mb-6">登入</h2>
  <div class="mb-4">
    <label class="block text-sm font-medium text-gray-700 mb-1">Email</label>
    <input type="email"
      class="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm
             focus:outline-none focus:ring-2 focus:ring-blue-500">
  </div>
  <button class="w-full py-2 bg-blue-500 text-white rounded-lg font-semibold
                 hover:bg-blue-600 transition">登入</button>
</form>

button 按鈕樣式組

Primary、Secondary、Outline、Ghost 四種按鈕變體。

<!-- Primary -->
<button class="px-4 py-2 bg-blue-500 text-white rounded-lg
               hover:bg-blue-600 font-semibold">Primary</button>

<!-- Secondary -->
<button class="px-4 py-2 bg-gray-100 text-gray-800 rounded-lg
               hover:bg-gray-200 font-semibold">Secondary</button>

<!-- Outline -->
<button class="px-4 py-2 border-2 border-blue-500 text-blue-500 rounded-lg
               hover:bg-blue-50 font-semibold">Outline</button>

<!-- Ghost -->
<button class="px-4 py-2 text-blue-500 rounded-lg
               hover:bg-blue-50 font-semibold">Ghost</button>

layout 側邊欄版面

固定側邊欄 + 可捲動主要內容區的管理後台版面。

<div class="flex h-screen bg-gray-100">
  <!-- 側邊欄 -->
  <aside class="w-64 bg-gray-900 text-white flex flex-col">
    <div class="p-4 text-lg font-bold">管理後台</div>
    <nav class="flex-1 px-2 space-y-1">
      <a href="#" class="flex items-center px-3 py-2 rounded-lg
                         bg-gray-700 text-white text-sm">儀表板</a>
      <a href="#" class="flex items-center px-3 py-2 rounded-lg
                         text-gray-400 hover:bg-gray-700 text-sm">設定</a>
    </nav>
  </aside>
  <main class="flex-1 overflow-auto p-8">
    <!-- 主要內容 -->
  </main>
</div>

card 通知 Toast

右下角出現的成功／警告／錯誤通知元件。

<!-- 成功通知 -->
<div class="fixed bottom-4 right-4 flex items-center gap-3
            bg-white border-l-4 border-green-500 shadow-lg
            rounded-lg px-4 py-3 max-w-xs">
  <span class="text-green-500 text-xl">✓</span>
  <div>
    <p class="font-semibold text-gray-800 text-sm">操作成功</p>
    <p class="text-gray-500 text-xs mt-0.5">資料已儲存。</p>
  </div>
  <button class="ml-auto text-gray-400 hover:text-gray-600">✕</button>
</div>

layout 統計卡片組

Dashboard 常見的統計數據展示卡片。

<div class="grid grid-cols-2 lg:grid-cols-4 gap-4">
  <div class="bg-white rounded-xl p-4 shadow-sm">
    <p class="text-sm text-gray-500">總訪問量</p>
    <p class="text-3xl font-bold text-gray-900 mt-1">24,521</p>
    <p class="text-xs text-green-500 mt-1">↑ 12% 較上月</p>
  </div>
  <div class="bg-blue-500 rounded-xl p-4 text-white shadow-sm">
    <p class="text-sm text-blue-100">活躍用戶</p>
    <p class="text-3xl font-bold mt-1">1,893</p>
    <p class="text-xs text-blue-200 mt-1">↑ 8% 較上月</p>
  </div>
</div>