検索コンポーネント

すべてのコンポーネント

利用可能なすべてのTailwind CSSコンポーネントを参照する

Swiss_International_Typography_SAAS_Layout

スイス/インターナショナルタイポグラフィのデザイン原則と秋の配色を使用した、複雑でレスポンシブなSaaSアプリケーションレイアウト。サイドバーナビゲーション、ヘッダー、メインコンテンツエリア、ウィジェットを備えており、すべてダークモードがサポートされています。

開けるプレビュー

                <div class="min-h-screen bg-orange-50 dark:bg-gray-900 text-gray-800 dark:text-gray-100 font-sans">

  <!-- Global container with grid layout for desktop -->
  <div class="lg:grid lg:grid-cols-[280px_1fr] lg:min-h-screen">

    <!-- Sidebar Navigation -->
    <aside class="hidden lg:block bg-orange-100 dark:bg-gray-800 p-6 shadow-md dark:shadow-lg overflow-y-auto border-r border-orange-200 dark:border-gray-700">
      <div class="flex items-center mb-10">
        <svg class="w-8 h-8 text-orange-600 dark:text-orange-400 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.75 17L9 20l-1 1h8l-1-1-1.25-3M15 10V5l-1-1H9l-1 1v5m-1 8h10a2 2 0 002-2V7a2 2 0 00-2-2H7a2 2 0 00-2 2v10a2 2 0 002 2z"></path></svg>
        <h1 class="text-2xl font-bold text-gray-900 dark:text-gray-50">SaaSApp.ai</h1>
      </div>

      <nav>
        <ul>
          <li class="mb-3">
            <a href="#" class="flex items-center p-3 rounded-lg text-gray-700 dark:text-gray-200 hover:bg-orange-200 dark:hover:bg-gray-700 transition-colors duration-200 font-medium">
              <svg class="w-5 h-5 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m0 0l7 7m-10-7v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001 1h3v-3m0 0h.01M5 15V4a1 1 0 011-1h12a1 1 0 011 1v11a1 1 0 01-1 1h-3m-6 0v3h6m-3 0v3h6"></path></svg>
              Dashboard
            </a>
          </li>
          <li class="mb-3">
            <a href="#" class="flex items-center p-3 rounded-lg text-gray-700 dark:text-gray-200 hover:bg-orange-200 dark:hover:bg-gray-700 transition-colors duration-200 font-medium">
              <svg class="w-5 h-5 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0h-2m2 0h2m-4 0v-6m-4-2H3a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0h-2m2 0h2m-4 0v-6m-4-2h-3v-6a2 2 0 00-2-2H7a2 2 0 00-2 2v6zm0 0h-2m2 0h2m-4 0v-6m-4-2h-3v-6a2 2 0 00-2-2H7a2 2 0 00-2 2v6z"></path></svg>
              Projects
            </a>
          </li>
          <li class="mb-3">
            <a href="#" class="flex items-center p-3 rounded-lg bg-orange-600 dark:bg-orange-700 text-white font-semibold shadow-md dark:shadow-xl">
              <svg class="w-5 h-5 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7v4a1 1 0 001 1h4a1 1 0 001-1V7m0 10v3m-4 0v-3m4 0V7m0 10h.01M8 10h.01M12 10h.01M16 10h.01M9 6h6a2 2 0 012 2v10a2 2 0 01-2 2H9a2 2 0 01-2-2V8a2 2 0 012-2z"></path></svg>
              Analytics
            </a>
          </li>
          <li class="mb-3">
            <a href="#" class="flex items-center p-3 rounded-lg text-gray-700 dark:text-gray-200 hover:bg-orange-200 dark:hover:bg-gray-700 transition-colors duration-200 font-medium">
              <svg class="w-5 h-5 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H2m2 0h3m-3 0a1 1 0 01-1-1V4a1 1 0 011-1h14a1 1 0 011 1v5M4 7h16m-4 0h4"></path></svg>
              Team
            </a>
          </li>
          <li class="mb-3">
            <a href="#" class="flex items-center p-3 rounded-lg text-gray-700 dark:text-gray-200 hover:bg-orange-200 dark:hover:bg-gray-700 transition-colors duration-200 font-medium">
              <svg class="w-5 h-5 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"></path><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path></svg>
              Settings
            </a>
          </li>
        </ul>
      </nav>

      <div class="mt-10 pt-6 border-t border-orange-300 dark:border-gray-700">
        <p class="text-sm text-gray-500 dark:text-gray-400 mb-2">Need help?</p>
        <a href="#" class="flex items-center p-3 rounded-lg text-gray-700 dark:text-gray-200 hover:bg-orange-200 dark:hover:bg-gray-700 transition-colors duration-200 font-medium">
          <svg class="w-5 h-5 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8.228 9.971a4.75 4.75 0 004.582-4.08M14.252 5.102a9 9 0 011.597 1.834m-.025 8.165a9 9 0 01-1.597 1.834M12 18.75V21m0-2.25V18S7.05 15 7.05 12a5.58 5.58 0 011.23-.273M16.95 12c0-3-4.145-5.918-4.95-6.75m4.95 6.75l.012-.008"></path></svg>
          Support
        </a>
      </div>
    </aside>

    <!-- Main Content Area -->
    <main class="flex-1 flex flex-col">
      <!-- Top Header -->
      <header class="bg-white dark:bg-gray-800 p-4 border-b border-orange-200 dark:border-gray-700 flex items-center justify-between shadow-sm dark:shadow-md">
        <div class="flex items-center">
          <button class="lg:hidden mr-4 p-2 rounded-md hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors duration-200">
            <svg class="w-6 h-6 text-gray-700 dark:text-gray-200" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path></svg>
          </button>
          <h2 class="text-2xl font-semibold text-gray-900 dark:text-gray-50">Analytics Overview</h2>
        </div>

        <div class="flex items-center space-x-4">
          <div class="relative">
            <input type="text" placeholder="Search..." class="py-2 pl-10 pr-4 rounded-full bg-orange-50 dark:bg-gray-700 border border-orange-200 dark:border-gray-600 focus:outline-none focus:ring-2 focus:ring-orange-500 dark:focus:ring-orange-400 text-gray-800 dark:text-gray-100 placeholder-gray-500 dark:placeholder-gray-400 transition-colors duration-200">
            <svg class="absolute left-3 top-1/2 -translate-y-1/2 w-5 h-5 text-gray-500 dark:text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path></svg>
          </div>

          <button class="p-2 rounded-full bg-orange-200 dark:bg-gray-700 hover:bg-orange-300 dark:hover:bg-gray-600 transition-colors duration-200">
             <svg class="w-6 h-6 text-orange-700 dark:text-orange-300" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9"></path></svg>
          </button>

          <div class="flex items-center space-x-2">
            <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar" class="w-10 h-10 rounded-full border-2 border-orange-400 dark:border-orange-500">
            <span class="font-medium text-gray-800 dark:text-gray-100 hidden md:block">John Doe</span>
          </div>
        </div>
      </header>

      <!-- Analytics Content -->
      <div class="flex-1 p-6 lg:p-8 overflow-y-auto">
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6 mb-8">
          <!-- Metric Card 1 -->
          <div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md border-t-4 border-orange-500 dark:border-orange-600 transition-all duration-300 ease-in-out hover:shadow-xl">
            <h3 class="text-lg font-medium text-gray-700 dark:text-gray-200 mb-2">Total Users</h3>
            <p class="text-4xl font-bold text-gray-900 dark:text-gray-50">15,483</p>
            <p class="text-sm text-green-600 dark:text-green-400 mt-2">+12% from last month</p>
          </div>

          <!-- Metric Card 2 -->
          <div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md border-t-4 border-brown-500 dark:border-brown-600 transition-all duration-300 ease-in-out hover:shadow-xl">
            <h3 class="text-lg font-medium text-gray-700 dark:text-gray-200 mb-2">Active Sessions</h3>
            <p class="text-4xl font-bold text-gray-900 dark:text-gray-50">2,109</p>
            <p class="text-sm text-red-600 dark:text-red-400 mt-2">-3% from last month</p>
          </div>

          <!-- Metric Card 3 -->
          <div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md border-t-4 border-burgundy-500 dark:border-burgundy-600 transition-all duration-300 ease-in-out hover:shadow-xl">
            <h3 class="text-lg font-medium text-gray-700 dark:text-gray-200 mb-2">Revenue Growth</h3>
            <p class="text-4xl font-bold text-gray-900 dark:text-gray-50">$45.5K</p>
            <p class="text-sm text-green-600 dark:text-green-400 mt-2">+18% from last month</p>
          </div>

          <!-- Metric Card 4 -->
          <div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md border-t-4 border-yellow-600 dark:border-yellow-700 transition-all duration-300 ease-in-out hover:shadow-xl">
            <h3 class="text-lg font-medium text-gray-700 dark:text-gray-200 mb-2">New Signups</h3>
            <p class="text-4xl font-bold text-gray-900 dark:text-gray-50">876</p>
            <p class="text-sm text-green-600 dark:text-green-400 mt-2">+5% from last week</p>
          </div>
        </div>

        <!-- Charts and Tables Section -->
        <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
          <!-- Chart Placeholder -->
          <div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md transition-all duration-300 ease-in-out hover:shadow-xl">
            <h3 class="text-lg font-medium text-gray-700 dark:text-gray-200 mb-4">Traffic Sources</h3>
            <img src="https://picsum.photos/600/350?random=1" alt="Placeholder chart for traffic sources" class="w-full h-auto rounded-md object-cover border border-orange-100 dark:border-gray-700" loading="lazy">
            <p class="text-sm text-gray-500 dark:text-gray-400 mt-4">Data visualization of user traffic by source (e.g., Organic, Referral, Direct).</p>
          </div>

          <!-- Table Placeholder -->
          <div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md transition-all duration-300 ease-in-out hover:shadow-xl">
            <h3 class="text-lg font-medium text-gray-700 dark:text-gray-200 mb-4">Recent Activities</h3>
            <div class="overflow-x-auto">
              <table class="min-w-full divide-y divide-orange-200 dark:divide-gray-700">
                <thead class="bg-orange-50 dark:bg-gray-700">
                  <tr>
                    <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Action</th>
                    <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">User</th>
                    <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Time</th>
                  </tr>
                </thead>
                <tbody class="bg-white dark:bg-gray-800 divide-y divide-orange-100 dark:divide-gray-700">
                  <tr>
                    <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900 dark:text-gray-100">Created Project 'Alpha'</td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-600 dark:text-gray-300">Jane Smith</td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-400">2 mins ago</td>
                  </tr>
                  <tr>
                    <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900 dark:text-gray-100">Updated Dashboard Settings</td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-600 dark:text-gray-300">Robert Johnson</td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-400">1 hour ago</td>
                  </tr>
                  <tr>
                    <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900 dark:text-gray-100">Completed 'Beta' task</td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-600 dark:text-gray-300">Emily White</td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-400">3 hours ago</td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>

          <!-- Another Chart -->
          <div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md transition-all duration-300 ease-in-out hover:shadow-xl">
            <h3 class="text-lg font-medium text-gray-700 dark:text-gray-200 mb-4">Conversion Rate Over Time</h3>
            <img src="https://picsum.photos/600/350?random=2" alt="Placeholder chart for conversion rates" class="w-full h-auto rounded-md object-cover border border-orange-100 dark:border-gray-700" loading="lazy">
            <p class="text-sm text-gray-500 dark:text-gray-400 mt-4">Illustrates the trend of conversion rates for the past few weeks.</p>
          </div>

          <!-- User List/Overview -->
          <div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md transition-all duration-300 ease-in-out hover:shadow-xl">
            <h3 class="text-lg font-medium text-gray-700 dark:text-gray-200 mb-4">Top Users</h3>
            <div class="space-y-4">
              <div class="flex items-center">
                <img src="https://randomuser.me/api/portraits/women/5.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-3 border border-orange-200 dark:border-gray-600">
                <div>
                  <p class="font-medium text-gray-900 dark:text-gray-100">Alice Wonderland</p>
                  <p class="text-sm text-gray-500 dark:text-gray-400">Active Project: "Project Chimera"</p>
                </div>
              </div>
              <div class="flex items-center">
                <img src="https://randomuser.me/api/portraits/men/12.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-3 border border-orange-200 dark:border-gray-600">
                <div>
                  <p class="font-medium text-gray-900 dark:text-gray-100">Bob The Builder</p>
                  <p class="text-sm text-gray-500 dark:text-gray-400">Account Status: Premium</p>
                </div>
              </div>
              <div class="flex items-center">
                <img src="https://randomuser.me/api/portraits/women/24.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-3 border border-orange-200 dark:border-gray-600">
                <div>
                  <p class="font-medium text-gray-900 dark:text-gray-100">Charlie Chaplin</p>
                  <p class="text-sm text-gray-500 dark:text-gray-400">Last Login: Yesterday</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </main>
  </div>

  <!-- Mobile Bottom Navigation (optional, for very small screens) -->
  <nav class="fixed bottom-0 left-0 right-0 lg:hidden bg-white dark:bg-gray-800 border-t border-orange-200 dark:border-gray-700 shadow-lg z-10">
    <ul class="flex justify-around items-center h-16">
      <li>
        <a href="#" class="flex flex-col items-center text-xs text-gray-700 dark:text-gray-200 hover:text-orange-600 dark:hover:text-orange-400">
          <svg class="w-6 h-6 mb-1" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m0 0l7 7m-10-7v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001 1h3v-3m0 0h.01M5 15V4a1 1 0 011-1h12a1 1 0 011 1v11a1 1 0 01-1 1h-3m-6 0v3h6m-3 0v3h6"></path></svg>
          <span>Dash</span>
        </a>
      </li>
      <li>
        <a href="#" class="flex flex-col items-center text-xs text-orange-600 dark:text-orange-400">
          <svg class="w-6 h-6 mb-1" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7v4a1 1 0 001 1h4a1 1 0 001-1V7m0 10v3m-4 0v-3m4 0V7m0 10h.01M8 10h.01M12 10h.01M16 10h.01M9 6h6a2 2 0 012 2v10a2 2 0 01-2 2H9a2 2 0 01-2-2V8a2 2 0 012-2z"></path></svg>
          <span>Analytics</span>
        </a>
      </li>
      <li>
        <a href="#" class="flex flex-col items-center text-xs text-gray-700 dark:text-gray-200 hover:text-orange-600 dark:hover:text-orange-400">
          <svg class="w-6 h-6 mb-1" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H2m2 0h3m-3 0a1 1 0 01-1-1V4a1 1 0 011-1h14a1 1 0 011 1v5M4 7h16m-4 0h4"></path></svg>
          <span>Team</span>
        </a>
      </li>
      <li>
        <a href="#" class="flex flex-col items-center text-xs text-gray-700 dark:text-gray-200 hover:text-orange-600 dark:hover:text-orange-400">
          <svg class="w-6 h-6 mb-1" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"></path><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path></svg>
          <span>Settings</span>
        </a>
      </li>
    </ul>
  </nav>

</div>

進行状況インジケータコンポーネント

紙/印刷にインスパイアされたマーケットプレイスの進行状況インジケーターで、キャンディー/甘い色が特徴です。複数のステップ、レスポンシブレイアウト、ダークモードのサポートを備えた複雑なデザイン。

開けるプレビュー

                <div class="p-4 sm:p-6 md:p-8 min-h-screen bg-rose-50 dark:bg-zinc-900 font-sans">
  <div class="max-w-6xl mx-auto bg-white dark:bg-zinc-800 rounded-lg shadow-xl overflow-hidden print-like-border transition-colors duration-300">
    <div class="p-6 sm:p-8 md:p-10 border-b border-rose-100 dark:border-rose-900">
      <h2 class="text-2xl sm:text-3xl font-extrabold text-pink-600 dark:text-pink-400 mb-2 font-serif tracking-tight">Order Progress</h2>
      <p class="text-sm sm:text-base text-gray-600 dark:text-gray-300">Track the journey of your current marketplace order.</p>
    </div>

    <div class="px-4 py-6 sm:p-8 md:p-10">
      <div class="flex flex-col lg:flex-row items-start lg:items-center justify-between gap-6">
        <!-- Progress Steps -->
        <div class="flex-1 w-full lg:w-auto">
          <ol class="relative text-gray-500 border-s-2 border-rose-200 dark:border-rose-700 space-y-8">
            <!-- Step 1: Order Placed -->
            <li class="mb-8 ms-6 flex items-start group">
              <span class="absolute -left-3.5 flex items-center justify-center w-7 h-7 rounded-full bg-pink-500 text-white shadow-md transition-all duration-300 group-hover:scale-110">
                <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10 2a8 8 0 100 16 8 8 0 000-16zM6 9a1 1 0 011-1h6a1 1 0 110 2H7a1 1 0 01-1-1z" clip-rule="evenodd"></path></svg>
              </span>
              <div class="ml-2 flex flex-col">
                <h3 class="font-semibold text-lg text-pink-600 dark:text-pink-400 leading-tight">Order Placed</h3>
                <time class="block text-sm text-gray-500 dark:text-gray-400 font-normal leading-none pt-0.5">Jan 15, 2024 at 10:30 AM</time>
                <p class="text-base font-normal text-gray-700 dark:text-gray-200 mt-2">Your order #ABC-123 has been successfully placed.</p>
              </div>
            </li>

            <!-- Step 2: Payment Confirmed -->
            <li class="mb-8 ms-6 flex items-start group">
              <span class="absolute -left-3.5 flex items-center justify-center w-7 h-7 rounded-full bg-pink-500 text-white shadow-md transition-all duration-300 group-hover:scale-110">
                <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M4 4a2 2 0 012-2h4.586A2 2 0 0113 3.414L16.586 7A2 2 0 0118 8.414V16a2 2 0 01-2 2H6a2 2 0 01-2-2V4zm2 2v6h5a1 1 0 011 1v3h2V8H8a2 2 0 01-2-2z" clip-rule="evenodd"></path></svg>
              </span>
              <div class="ml-2 flex flex-col">
                <h3 class="font-semibold text-lg text-pink-600 dark:text-pink-400 leading-tight">Payment Confirmed</h3>
                <time class="block text-sm text-gray-500 dark:text-gray-400 font-normal leading-none pt-0.5">Jan 15, 2024 at 10:35 AM</time>
                <p class="text-base font-normal text-gray-700 dark:text-gray-200 mt-2">Payment processed successfully. Awaiting vendor confirmation.</p>
              </div>
            </li>

            <!-- Step 3: Vendor Preparing Order -->
            <li class="mb-8 ms-6 flex items-start group">
              <span class="absolute -left-3.5 flex items-center justify-center w-7 h-7 rounded-full bg-pink-500 text-white shadow-md transition-all duration-300 group-hover:scale-110">
                <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M9 6a3 3 0 11-6 0 3 3 0 016 0zM17.885 9.117a.75.75 0 01-.164.839l-3.056 3.055a.75.75 0 01-1.06-.007 2.25 2.25 0 00-3.327-.374l-3.326-2.66c-.664-.53-.984-1.393-.823-2.185.166-.803.791-1.394 1.579-1.554.717-.183 1.488.083 2.052.542l.685.549a.75.75 0 01.077 1.18L9 11.25l-.234.187a.75.75 0 01-.762-.058L5.27 8.358a.75.75 0 01-.013-1.054.75.75 0 011.054-.013l3.41 2.728 2.302-2.302a.75.75 0 011.061 0l3.056 3.055a.75.75 0 010 1.06z" clip-rule="evenodd"></path></svg>
              </span>
              <div class="ml-2 flex flex-col">
                <h3 class="font-semibold text-lg text-pink-600 dark:text-pink-400 leading-tight">Vendor Preparing Order</h3>
                <time class="block text-sm text-gray-500 dark:text-gray-400 font-normal leading-none pt-0.5">Jan 15, 2024 at 11:00 AM</time>
                <p class="text-base font-normal text-gray-700 dark:text-gray-200 mt-2">Your items are being prepared by <span class="font-medium text-pink-700 dark:text-pink-300">Sweet Treats Bakery</span>.</p>
              </div>
            </li>

            <!-- Step 4: Out for Delivery (Current) -->
            <li class="mb-8 ms-6 flex items-start group">
              <span class="absolute -left-3.5 flex items-center justify-center w-7 h-7 rounded-full bg-lime-500 text-white shadow-md transition-all duration-300 group-hover:scale-110">
                <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M9.52 1.715a.75.75 0 01.46 0l6.5 2.25a.75.75 0 01.46 1.07V15.5a.75.75 0 01-.75.75h-3.72a.75.75 0 01-.689-.5l-1.442-3.605A.75.75 0 0010.5 11.25h-1.5a.75.75 0 00-.689.444L6.97 15.5H3.75a.75.75 0 01-.75-.75V5.035a.75.75 0 01.46-1.07l6.5-2.25zM12 1.5v3.25h2.5V1.5h-2.5z"/></svg>
              </span>
              <div class="ml-2 flex flex-col">
                <h3 class="font-bold text-lg text-lime-600 dark:text-lime-400 leading-tight">Out for Delivery</h3>
                <time class="block text-sm text-gray-500 dark:text-gray-400 font-normal leading-none pt-0.5">Jan 15, 2024 at 02:15 PM</time>
                <p class="text-base font-normal text-gray-700 dark:text-gray-200 mt-2">Your delicious treats are on their way! Estimated arrival: <span class="font-medium text-lime-700 dark:text-lime-300">3:00 PM - 4:00 PM</span>.</p>
                <div class="flex items-center gap-3 mt-3 p-3 bg-lime-50 dark:bg-lime-900 rounded-md shadow-inner border border-lime-200 dark:border-lime-700">
                  <img src="https://randomuser.me/api/portraits/men/7.jpg" alt="Delivery Driver" class="w-10 h-10 rounded-full border-2 border-lime-300 dark:border-lime-600">
                  <div>
                    <p class="font-medium text-lime-700 dark:text-lime-300">Driver: John Smith</p>
                    <a href="tel:+1234567890" class="text-sm text-lime-600 dark:text-lime-400 hover:underline flex items-center">
                      <svg class="w-4 h-4 mr-1" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M2 3a1 1 0 011-1h2.153a1 1 0 01.986.836l.74 4.435a1 1 0 01-.54 1.06l-1.548.774a11.037 11.037 0 006.103 6.103l.774-1.548a1 1 0 011.06-.54l4.435.74a1 1 0 01.836.986V17a1 1 0 01-1 1h-2C7.82 18 2 12.18 2 5V3z"></path></svg>
                      (123) 456-7890
                    </a>
                  </div>
                </div>
              </div>
            </li>

            <!-- Step 5: Delivered -->
            <li class="ms-6 flex items-start group">
              <span class="absolute -left-3.5 flex items-center justify-center w-7 h-7 rounded-full bg-rose-200 dark:bg-rose-700 text-gray-400 dark:text-gray-500 shadow-md transition-all duration-300 group-hover:scale-110">
                <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M9 2a1 1 0 00-.894.553L7.382 4H4a1 1 0 000 2v10a2 2 0 002 2h8a2 2 0 002-2V6a1 1 0 000-2h-3.382l-.724-1.447A1 1 0 0011 2H9zM7 8a1 1 0 012 0v6a1 1 0 11-2 0V8zm5-1a1 1 0 00-1 1v6a1 1 0 102 0V8a1 1 0 00-1-1z" clip-rule="evenodd"></path></svg>
              </span>
              <div class="ml-2 flex flex-col">
                <h3 class="font-semibold text-lg text-gray-500 dark:text-gray-400 leading-tight">Delivered</h3>
                <time class="block text-sm text-gray-400 dark:text-gray-600 font-normal leading-none pt-0.5">Awaiting</time>
                <p class="text-base font-normal text-gray-400 dark:text-gray-500 mt-2">Your order will be marked as delivered upon arrival.</p>
              </div>
            </li>
          </ol>
        </div>

        <!-- Order Summary / Details -->
        <div class="relative flex-shrink-0 w-full lg:w-96 p-6 lg:p-8 border border-rose-200 dark:border-rose-700 rounded-lg bg-rose-50 dark:bg-zinc-700 shadow-md transform -rotate-1 perspective-origin-top-left candy-stripes">
          <div class="absolute z-10 w-full h-full inset-0 bg-gradient-to-br from-rose-50/70 via-rose-100/70 to-rose-200/70 dark:from-zinc-700/70 dark:via-zinc-750/70 dark:to-zinc-800/70 mix-blend-overlay"></div>
          <div class="relative z-20">
            <h3 class="text-xl font-bold text-pink-700 dark:text-pink-300 mb-4 font-serif">Order Summary</h3>
            <div class="space-y-3 text-gray-700 dark:text-gray-200">
              <div class="flex justify-between items-center">
                <span class="font-medium">Order ID:</span>
                <span class="text-pink-600 dark:text-pink-400 font-semibold">#ABC-123</span>
              </div>
              <div class="flex justify-between items-center">
                <span class="font-medium">Total Items:</span>
                <span>3</span>
              </div>
              <div class="flex justify-between items-center">
                <span class="font-medium">Total Amount:</span>
                <span class="font-bold text-lg text-lime-600 dark:text-lime-400">$29.99</span>
              </div>
              <div class="flex justify-between items-center">
                <span class="font-medium">Delivery Address:</span>
                <span class="text-right">123 Candy Lane, Sweetville, CA 90210</span>
              </div>
            </div>
            <h4 class="text-lg font-bold text-pink-700 dark:text-pink-300 mt-6 mb-3 font-serif">Items in Order:</h4>
            <ul class="space-y-4">
              <li class="flex items-center gap-3 p-3 bg-white dark:bg-zinc-800 rounded-md shadow-sm border border-rose-100 dark:border-rose-700">
                <img src="https://picsum.photos/80/80?random=1" alt="Item" class="w-16 h-16 rounded-md object-cover border border-rose-200 dark:border-rose-600">
                <div class="flex-1">
                  <p class="font-semibold text-pink-600 dark:text-pink-400">Rainbow Cupcakes (x2)</p>
                  <p class="text-sm text-gray-600 dark:text-gray-300">Vendor: Sweet Treats Bakery</p>
                </div>
              </li>
              <li class="flex items-center gap-3 p-3 bg-white dark:bg-zinc-800 rounded-md shadow-sm border border-rose-100 dark:border-rose-700">
                <img src="https://picsum.photos/80/80?random=2" alt="Item" class="w-16 h-16 rounded-md object-cover border border-rose-200 dark:border-rose-600">
                <div class="flex-1">
                  <p class="font-semibold text-pink-600 dark:text-pink-400">Gummy Bear Mix (x1)</p>
                  <p class="text-sm text-gray-600 dark:text-gray-300">Vendor: Candy Kingdom</p>
                </div>
              </li>
            </ul>
            <button class="mt-8 w-full bg-gradient-to-r from-pink-500 to-rose-500 text-white font-bold py-3 px-6 rounded-lg hover:from-pink-600 hover:to-rose-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-pink-500 dark:focus:ring-pink-400 transition-all duration-300 shadow-lg">
              View Order Details
            </button>
          </div>
        </div>
      </div>
    </div>
  </div>

  <style>
    /* Basic Paper-like shadow and border on light mode */
    .print-like-border {
      border: 2px solid theme('colors.rose.100');
      box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    }

    /* Dark mode adjustments for border and shadow */
    .dark .print-like-border {
      border-color: theme('colors.zinc.700');
      box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.2), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    }

    /* Candy Stripes for the Order Summary */
    .candy-stripes {
      background-image: repeating-linear-gradient(
        45deg, 
        theme('colors.rose.100'), 
        theme('colors.rose.100') 10px, 
        theme('colors.pink.50') 10px, 
        theme('colors.pink.50') 20px
      );
      background-size: 40px 40px;
      box-shadow: 5px 5px 0px theme('colors.pink.200'); /* 'paper curl' shadow */
    }

    .dark .candy-stripes {
      background-image: repeating-linear-gradient(
        45deg, 
        theme('colors.zinc.800'), 
        theme('colors.zinc.800') 10px, 
        theme('colors.zinc.700') 10px, 
        theme('colors.zinc.700') 20px
      );
      box-shadow: 5px 5px 0px theme('colors.zinc.900');
    }
  </style>
</div>

イメージライトボックスコンポーネント

水彩画/芸術的なデザイン、落ち着いた色、ダークモードのサポートを備えたレスポンシブ画像ライトボックスコンポーネントで、教育プラットフォームに適しています。

開けるプレビュー

                <div class="font-sans bg-amber-50 dark:bg-gray-900 text-stone-800 dark:text-stone-200 p-4 sm:p-8 md:p-12 min-h-screen flex items-center justify-center">

  <!-- Grid of Images (simulating a gallery) -->
  <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6 max-w-7xl mx-auto" x-data="{ openLightbox: false, currentImage: '' }">

    <!-- Image 1 -->
    <div class="relative group cursor-pointer overflow-hidden rounded-lg shadow-md hover:shadow-lg transition-all duration-300 transform hover:scale-105" @click="openLightbox = true; currentImage = 'https://picsum.photos/id/1018/800/600'">
      <img src="https://picsum.photos/id/1018/400/300" alt="Artistic Image" class="w-full h-48 object-cover rounded-lg transform group-hover:scale-110 transition-transform duration-300" />
      <div class="absolute inset-0 bg-gradient-to-t from-stone-900/60 to-transparent rounded-lg flex items-end p-4 opacity-0 group-hover:opacity-100 transition-opacity duration-300">
        <p class="text-xs text-white">Concept Drawing: 'Ancient Knowledge'</p>
      </div>
      <span class="absolute top-2 right-2 text-white bg-black/50 px-2 py-1 rounded-full text-xs">View</span>
    </div>

    <!-- Image 2 -->
    <div class="relative group cursor-pointer overflow-hidden rounded-lg shadow-md hover:shadow-lg transition-all duration-300 transform hover:scale-105" @click="openLightbox = true; currentImage = 'https://picsum.photos/id/1041/800/600'">
      <img src="https://picsum.photos/id/1041/400/300" alt="Historical Document" class="w-full h-48 object-cover rounded-lg transform group-hover:scale-110 transition-transform duration-300" />
      <div class="absolute inset-0 bg-gradient-to-t from-stone-900/60 to-transparent rounded-lg flex items-end p-4 opacity-0 group-hover:opacity-100 transition-opacity duration-300">
        <p class="text-xs text-white">Scholarly Text: 'Illuminated Manuscripts'</p>
      </div>
      <span class="absolute top-2 right-2 text-white bg-black/50 px-2 py-1 rounded-full text-xs">View</span>
    </div>

    <!-- Image 3 -->
    <div class="relative group cursor-pointer overflow-hidden rounded-lg shadow-md hover:shadow-lg transition-all duration-300 transform hover:scale-105" @click="openLightbox = true; currentImage = 'https://picsum.photos/id/1069/800/600'">
      <img src="https://picsum.photos/id/1069/400/300" alt="Natural Science" class="w-full h-48 object-cover rounded-lg transform group-hover:scale-110 transition-transform duration-300" />
      <div class="absolute inset-0 bg-gradient-to-t from-stone-900/60 to-transparent rounded-lg flex items-end p-4 opacity-0 group-hover:opacity-100 transition-opacity duration-300">
        <p class="text-xs text-white">Botanical Study: 'Flora & Fauna'</p>
      </div>
      <span class="absolute top-2 right-2 text-white bg-black/50 px-2 py-1 rounded-full text-xs">View</span>
    </div>

    <!-- Image 4 -->
    <div class="relative group cursor-pointer overflow-hidden rounded-lg shadow-md hover:shadow-lg transition-all duration-300 transform hover:scale-105" @click="openLightbox = true; currentImage = 'https://picsum.photos/id/1070/800/600'">
      <img src="https://picsum.photos/id/1070/400/300" alt="Architectural Blueprint" class="w-full h-48 object-cover rounded-lg transform group-hover:scale-110 transition-transform duration-300" />
      <div class="absolute inset-0 bg-gradient-to-t from-stone-900/60 to-transparent rounded-lg flex items-end p-4 opacity-0 group-hover:opacity-100 transition-opacity duration-300">
        <p class="text-xs text-white">Historic Architecture: 'The Grand Library'</p>
      </div>
      <span class="absolute top-2 right-2 text-white bg-black/50 px-2 py-1 rounded-full text-xs">View</span>
    </div>

    <!-- Lightbox Overlay (requires Alpine.js for interactivity) -->
    <template x-if="openLightbox">
      <div class="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/70 backdrop-blur-sm" @click.self="openLightbox = false" @keydown.escape.window="openLightbox = false">
        <div class="relative max-w-4xl max-h-full bg-cover bg-center rounded-xl p-2 md:p-4 perspective transform rotate-x-0 dark:bg-stone-800 transition-all duration-500 ease-out"
             :class="{ 'scale-95 opacity-0': !openLightbox, 'scale-100 opacity-100': openLightbox }"
             x-transition:enter="transition ease-out duration-300"
             x-transition:enter-start="opacity-0 scale-90"
             x-transition:enter-end="opacity-100 scale-100"
             x-transition:leave="transition ease-in duration-200"
             x-transition:leave-start="opacity-100 scale-100"
             x-transition:leave-end="opacity-0 scale-90"
             style="background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNjAiIGhlaWdodD0iNjAiIHZpZXdCb3g9IjAgMCA2MCA2MCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZzBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPjxnIGZpbGw9IiM2QjZDQUEiIGZpbGwtb3BhY2l0eT0iMC4xIj48cGF0aCBkPSJNNiAwTDYgMiAyIDIgMiAwIDYgMFY2NUgyNVY2MEg2MFYwSDZ6TTMwIDMwTDMwIDMyIDMyIDMyIDMyIDMwIDMwIDMwek0wIDMwbDMwIDBMNTQgMGwyNCAwLDAtMjQsLTMwIDAtOTAgMCwtMTggMjQsMCwyNC0wIDQ4LTQ4IDAsOTYgOTYtOTYgOTYtNDggNDgtOTYgOTYtOTYgOTYtOTYtOTYgOTYtOTYtNDgtNDggOTYgOTYtOTYtOTYtOTYtOTYtOTYtOTYtNDggNDggOTYgOTYtOTYtOTYtOTYtOTYtOTYtOTYtNDggNDh6TTAgMDBMMjQgMCwyNCAyNCwwIDI0ek0wIDYwTDYwIDYwLDYwIDI0LDMwIDI0LDMwIDU0LDAgNTR6TTAgOTBMNDggOTYsNDggOTAsNTQgOTAsNjAgNjAsNjAgMjQsMjQgMjQsMjQgNDgsNDggNDgsNDggOTYsMjQgOTYsMjQgNjAsNjAgNjAsNjAgOTYsOTYgOTYsOTYgNjAsMjQgNjAsMjQgOTYsOTYgOTYsOTYgNjAsMjQgNjAsMjQsMjQgMjQsMjQgNjAsNjAgNjAsNjAgMjQlMjQsMjQgNjAsNjAgNjAsMjQlMjQsMjQgNjAsNjAgNjAgMjRQMjQgOTZMMCA5NnpNMDQ4TDMwIDQ4LDMwIDUwLDQ4IDUwLDQ4IDQ4ek0wIDI0TDMwIDI0LDMwIDI2LDQ4IDI2LDQ4IDI0ek0yNCAyNEw2IDI0LDYgMjYsMjQgMjZ6TTI0IDBMMjQgMiw2IDIsNiAwek0yNCA0OEw2IDQ4LDYgNTAsMjQgNTB6TTYgNjBsMiAwLDAtMmwtMiAwVjYwem0zMC0yNGwyIDAsMC0ybC0yIDBWMzZ6TTAgNjBsMiAwLDAtMmwtMiAwVjYwem00OC0yNGwyIDAsMC0ybC0yIDBWMzZ6TTYgNjBsMjQwLDAtMmwtMjQwIDBWMzZ6TTYgNjBsMjAwLDAsMC0ybC0yMDAgMFYwdi0yNHptMjg4IDAxMjAgMTIwLzE4IDBMMjQwIDI4OGwwLTEyMHptNzIgNzJsOTYgOTYtOTYgOTZtMDAtMTkybDc2LTM2TDI0IDM2ek00OCAwTDI0IDBMMjQgMTgsNDggMTh6TTI0IDQ4TDE4IDQ4LDE4IDU0LDI0IDU0eiIvPjwvZz48L2c+PC9zdmc+'")">
          <img :src="currentImage" alt="Lightbox Image" class="max-w-full max-h-[80vh] object-contain mx-auto my-auto rounded-lg shadow-xl border-4 border-stone-200 dark:border-stone-700 watercolor-border" />

          <!-- Close Button -->
          <button class="absolute top-2 right-2 p-2 rounded-full bg-stone-300 dark:bg-stone-700 text-stone-700 dark:text-stone-300 hover:bg-stone-400 dark:hover:bg-stone-600 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-stone-500 focus:ring-offset-2 dark:focus:ring-offset-stone-900" @click="openLightbox = false">
            <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
            </svg>
            <span class="sr-only">Close Lightbox</span>
          </button>
        </div>
      </div>
    </template>

  </div>

  <!-- Alpine.js script (for basic interactivity, not part of static HTML) -->
  <script>
    // This script is for demonstration purposes for the interactivity.
    // In a real project, Alpine.js would be loaded externally.
    document.addEventListener('alpine:init', () => {
      Alpine.data('lightbox', () => ({
        openLightbox: false,
        currentImage: ''
      }))
    })
  </script>
  <script src="https://unpkg.com/alpinejs" defer></script>

  <!-- Custom CSS for watercolor effect (conceptual, would likely be via `tailwind.config.js` or a separate file) -->
  <style>
    /* Basic watercolor border effect - conceptual, for a true effect, complex SVGs or multiple layered borders would be needed */
    .watercolor-border {
      border: 4px solid transparent;
      border-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><defs><linearGradient id="g" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="%23a8a29e"/><stop offset="25%" stop-color="%23d6d3d1"/><stop offset="50%" stop-color="%23a8a29e"/><stop offset="75%" stop-color="%23d6d3d1"/><stop offset="100%" stop-color="%23a8a29e"/></linearGradient></defs><rect x="0" y="0" width="100" height="100" fill="url(%23g)" opacity="0.5"/><circle cx="20" cy="20" r="15" fill="%23a8a29e" opacity="0.6"/><circle cx="80" cy="80" r="10" fill="%23d6d3d1" opacity="0.6"/><path d="M0,0 L100,0 L100,100 L0,100 Z" fill="none" stroke="%23b4b4b4" stroke-width="5" stroke-dasharray="5 3" opacity="0.3"/></svg>') 30 round;
      border-image-slice: 1;
    }
    .dark .watercolor-border {
      border-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><defs><linearGradient id="g" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="%2344403c"/><stop offset="25%" stop-color="%2357534e"/><stop offset="50%" stop-color="%2344403c"/><stop offset="75%" stop-color="%2357534e"/><stop offset="100%" stop-color="%2344403c"/></linearGradient></defs><rect x="0" y="0" width="100" height="100" fill="url(%23g)" opacity="0.5"/><circle cx="20" cy="20" r="15" fill="%2344403c" opacity="0.6"/><circle cx="80" cy="80" r="10" fill="%2357534e" opacity="0.6"/><path d="M0,0 L100,0 L100,100 L0,100 Z" fill="none" stroke="%236d6d6d" stroke-width="5" stroke-dasharray="5 3" opacity="0.3"/></svg>') 30 round;
    }
  </style>
</div>

Monospaceヘルスケアナビゲーション

ヘルスケア/医療アプリケーション向けの複雑で応答性の高いナビゲーションコンポーネントで、温かみのあるニュートラル、ダークモードのサポート、インタラクティブ要素を備えたモノスペース/開発者にインスパイアされたデザインが特徴です。

開けるプレビュー

                <nav class="bg-neutral-100 p-4 font-mono text-neutral-800 shadow-md dark:bg-neutral-900 dark:text-neutral-200">
  <div class="container mx-auto flex flex-wrap items-center justify-between">

    <!-- Brand/Logo (Left) -->
    <a href="#" class="flex items-center text-xl font-bold tracking-tight text-amber-700 dark:text-amber-500">
      <svg class="mr-2 h-6 w-6 stroke-current" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
        <path d="M12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2Z" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
        <path d="M10 16L14 8" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
        <path d="M8 12H16" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
      </svg>
      <span class="hidden md:inline">Med OS</span><span class="inline md:hidden">MOS</span>
    </a>

    <!-- Mobile Menu Button (Hamburger) -->
    <button class="peer block rounded p-2 text-neutral-600 focus:outline-none focus:ring-2 focus:ring-accent-500 dark:text-neutral-300 md:hidden" aria-label="Toggle navigation">
      <svg class="h-6 w-6 fill-current" viewBox="0 0 24 24">
        <path d="M4 6h16M4 12h16M4 18h16"></path>
      </svg>
    </button>

    <!-- Navigation Links Container -->
    <div class="w-full flex-grow pb-4 md:flex md:w-auto md:items-center md:pb-0 peer-focus:block hidden">
      <ul class="flex flex-col md:ml-auto md:flex-row">
        <li><a href="#dashboard" class="mt-2 block px-4 py-2 text-neutral-700 hover:bg-neutral-200 hover:text-amber-700 dark:text-neutral-300 dark:hover:bg-neutral-800 dark:hover:text-amber-500 md:mt-0 md:inline-block md:min-w-[8em] md:text-center">Dashboard</a></li>
        <li class="group relative">
          <a href="#patients" class="mt-2 block px-4 py-2 text-neutral-700 hover:bg-neutral-200 hover:text-amber-700 dark:text-neutral-300 dark:hover:bg-neutral-800 dark:hover:text-amber-500 md:mt-0 md:inline-block md:min-w-[8em] md:text-center" aria-haspopup="true" aria-expanded="false">Patients
            <span class="ml-1 inline-block transition-transform duration-200 group-hover:rotate-180 md:hidden sm:inline-block md:group-hover:rotate-180">
              <svg class="h-4 w-4 fill-current" viewBox="0 0 24 24"><path d="M7 10l5 5 5-5z"></path></svg>
            </span>
          </a>
          <!-- Dropdown Menu -->
          <ul class="hidden md:group-hover:block md:absolute md:top-full md:left-1/2 md:-translate-x-1/2 md:mt-0 md:bg-neutral-100 md:dark:bg-neutral-800 md:shadow-lg md:rounded-b-md md:z-10 group-focus-within:block">
            <li><a href="#add-patient" class="block whitespace-nowrap px-4 py-2 text-neutral-700 hover:bg-neutral-200 hover:text-amber-700 dark:text-neutral-300 dark:hover:bg-neutral-700 dark:hover:text-amber-500">+ Add New</a></li>
            <li><a href="#patient-list" class="block whitespace-nowrap px-4 py-2 text-neutral-700 hover:bg-neutral-200 hover:text-amber-700 dark:text-neutral-300 dark:hover:bg-neutral-700 dark:hover:text-amber-500">View All</a></li>
            <li><a href="#reports" class="block whitespace-nowrap px-4 py-2 text-neutral-700 hover:bg-neutral-200 hover:text-amber-700 dark:text-neutral-300 dark:hover:bg-neutral-700 dark:hover:text-amber-500">Reports</a></li>
          </ul>
        </li>
        <li><a href="#appointments" class="mt-2 block px-4 py-2 text-neutral-700 hover:bg-neutral-200 hover:text-amber-700 dark:text-neutral-300 dark:hover:bg-neutral-800 dark:hover:text-amber-500 md:mt-0 md:inline-block md:min-w-[8em] md:text-center">Appointments</a></li>
        <li><a href="#billing" class="mt-2 block px-4 py-2 text-neutral-700 hover:bg-neutral-200 hover:text-amber-700 dark:text-neutral-300 dark:hover:bg-neutral-800 dark:hover:text-amber-500 md:mt-0 md:inline-block md:min-w-[8em] md:text-center">Billing</a></li>
        <li><a href="#settings" class="mt-2 block px-4 py-2 text-neutral-700 hover:bg-neutral-200 hover:text-amber-700 dark:text-neutral-300 dark:hover:bg-neutral-800 dark:hover:text-amber-500 md:mt-0 md:inline-block md:min-w-[8em] md:text-center">Settings</a></li>
      </ul>
    </div>

    <!-- User Avatar & Actions (Right) -->
    <div class="flex items-center space-x-4 ml-auto -mr-2 md:mr-0">
      <!-- Search Icon (for desktop) -->
      <button class="hidden md:block p-2 text-neutral-600 hover:text-amber-700 dark:text-neutral-300 dark:hover:text-amber-500 focus:outline-none focus:ring-2 focus:ring-accent-500" aria-label="Search">
        <svg class="h-6 w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
        </svg>
      </button>

      <!-- Notifications Icon -->
      <button class="relative p-2 text-neutral-600 hover:text-amber-700 dark:text-neutral-300 dark:hover:text-amber-500 focus:outline-none focus:ring-2 focus:ring-accent-500" aria-label="Notifications">
        <svg class="h-6 w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9"></path>
        </svg>
        <span class="absolute right-1 top-1 flex h-2 w-2 items-center justify-center rounded-full bg-red-500 text-xs font-bold text-white"></span>
      </button>

      <!-- User Avatar with Dropdown -->
      <div class="group relative">
        <button class="flex items-center space-x-2 text-sm focus:outline-none focus:ring-2 focus:ring-accent-500" aria-haspopup="true" aria-expanded="false">
          <img class="h-8 w-8 rounded-full border-2 border-amber-700 dark:border-amber-500" src="https://randomuser.me/api/portraits/women/67.jpg" alt="User Avatar">
          <span class="hidden text-neutral-800 dark:text-neutral-200 md:inline">Dr. Anya S.</span>
          <svg class="h-4 w-4 fill-current text-neutral-600 dark:text-neutral-300 md:inline-block transition-transform duration-200 group-hover:rotate-180" viewBox="0 0 24 24"><path d="M7 10l5 5 5-5z"></path></svg>
        </button>
        <!-- User Dropdown Menu -->
        <ul class="hidden md:group-hover:block md:absolute md:top-full md:right-0 md:mt-2 md:bg-neutral-100 md:dark:bg-neutral-800 md:shadow-lg md:rounded-md md:z-20 md:min-w-[10rem] group-focus-within:block">
          <li><a href="#profile" class="block px-4 py-2 text-neutral-700 hover:bg-neutral-200 hover:text-amber-700 dark:text-neutral-300 dark:hover:bg-neutral-700 dark:hover:text-amber-500">Profile</a></li>
          <li><a href="#messages" class="block px-4 py-2 text-neutral-700 hover:bg-neutral-200 hover:text-amber-700 dark:text-neutral-300 dark:hover:bg-neutral-700 dark:hover:text-amber-500">Messages</a></li>
          <li><hr class="my-1 border-neutral-300 dark:border-neutral-700"></li>
          <li><a href="#logout" class="block px-4 py-2 text-red-600 hover:bg-red-100 dark:text-red-400 dark:hover:bg-red-900">Sign Out</a></li>
        </ul>
      </div>
    </div>

  </div>
</nav>

Eコマースコンポーネントコンポーネント

旅行/観光Webサイト向けの複雑なeコマースコンポーネントで、ネオン/グロー効果、秋の配色、ダークモードのサポートによる完全な応答性を備えています。

開けるプレビュー

                <div class="min-h-screen bg-gradient-to-br from-orange-50 to-amber-200 dark:from-gray-950 dark:to-stone-900 p-4 sm:p-6 lg:p-8 font-sans text-gray-900 dark:text-gray-100 relative overflow-hidden">

  <!-- Glow background effects -->
  <div class="absolute -top-32 -left-32 w-96 h-96 bg-orange-400 rounded-full mix-blend-multiply filter blur-3xl opacity-30 animate-blob dark:bg-amber-600"></div>
  <div class="absolute -bottom-24 -right-24 w-72 h-72 bg-red-600 rounded-full mix-blend-multiply filter blur-3xl opacity-30 animate-blob animation-delay-2000 dark:bg-red-800"></div>
  <div class="absolute top-1/4 left-1/2 w-64 h-64 bg-yellow-400 rounded-full mix-blend-multiply filter blur-3xl opacity-30 animate-blob animation-delay-4000 dark:bg-orange-600"></div>

  <div class="container mx-auto relative z-10">
    <!-- Header/Navigation Placeholder -->
    <header class="mb-8 flex flex-col sm:flex-row justify-between items-center bg-brown-900 bg-opacity-70 backdrop-blur-sm rounded-xl p-4 shadow-xl border border-orange-700 dark:bg-stone-900 dark:border-stone-700">
      <h1 class="text-2xl sm:text-3xl font-extrabold text-orange-200 uppercase tracking-widest text-shadow-glow dark:text-amber-400 mb-4 sm:mb-0">
        Wanderlust Expeditions
      </h1>
      <nav class="flex gap-4 sm:gap-6">
        <a href="#" class="text-orange-300 hover:text-amber-500 transition-colors duration-300 relative group">
          Destinations
          <span class="absolute inset-x-0 bottom-0 h-0.5 bg-orange-400 origin-left transform scale-x-0 group-hover:scale-x-100 transition-transform duration-300"></span>
        </a>
        <a href="#" class="text-orange-300 hover:text-amber-500 transition-colors duration-300 relative group">
          Tours
          <span class="absolute inset-x-0 bottom-0 h-0.5 bg-orange-400 origin-left transform scale-x-0 group-hover:scale-x-100 transition-transform duration-300"></span>
        </a>
        <a href="#" class="text-orange-300 hover:text-amber-500 transition-colors duration-300 relative group">
          About Us
          <span class="absolute inset-x-0 bottom-0 h-0.5 bg-orange-400 origin-left transform scale-x-0 group-hover:scale-x-100 transition-transform duration-300"></span>
        </a>
      </nav>
    </header>

    <!-- Main Content Grid -->
    <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">

      <!-- Left Sidebar - Filters -->
      <aside class="lg:col-span-1 p-6 bg-brown-900 bg-opacity-70 backdrop-blur-sm rounded-xl shadow-xl border border-orange-700 dark:bg-stone-900 dark:border-stone-700">
        <h2 class="text-xl font-bold mb-6 text-orange-200 text-shadow-glow dark:text-amber-400">Filter Your Adventure</h2>

        <div class="mb-6">
          <label for="destination" class="block text-orange-300 text-sm font-medium mb-2">Destination</label>
          <select id="destination" class="w-full p-3 rounded-lg bg-orange-900 text-orange-100 border border-orange-700 focus:ring-2 focus:ring-amber-500 focus:border-amber-500 transition-all duration-200 shadow-inner glow-inset-orange">
            <option>All Destinations</option>
            <option>Sahara Desert</option>
            <option>Himalayan Peaks</option>
            <option>Amazon Rainforest</option>
            <option>Nordic Fjords</option>
          </select>
        </div>

        <div class="mb-6">
          <label for="price-range" class="block text-orange-300 text-sm font-medium mb-2">Price Range</label>
          <input type="range" id="price-range" min="100" max="5000" value="2500" class="w-full h-2 bg-orange-700 accent-amber-500 rounded-lg appearance-none cursor-pointer glow-inset-orange">
          <div class="flex justify-between text-xs text-orange-200 mt-2">
            <span>$100</span>
            <span>$5000</span>
          </div>
        </div>

        <div class="mb-6">
          <label class="block text-orange-300 text-sm font-medium mb-2">Activities</label>
          <div class="space-y-2">
            <label class="flex items-center text-orange-200">
              <input type="checkbox" class="form-checkbox h-5 w-5 text-amber-500 rounded border-orange-700 bg-orange-900 focus:ring-amber-500 glow-orange-checkbox">
              <span class="ml-2 text-glow">Hiking & Trekking</span>
            </label>
            <label class="flex items-center text-orange-200">
              <input type="checkbox" class="form-checkbox h-5 w-5 text-amber-500 rounded border-orange-700 bg-orange-900 focus:ring-amber-500 glow-orange-checkbox">
              <span class="ml-2 text-glow">Cultural Immersion</span>
            </label>
            <label class="flex items-center text-orange-200">
              <input type="checkbox" class="form-checkbox h-5 w-5 text-amber-500 rounded border-orange-700 bg-orange-900 focus:ring-amber-500 glow-orange-checkbox">
              <span class="ml-2 text-glow">Wildlife Safaris</span>
            </label>
          </div>
        </div>

        <button class="w-full py-3 bg-gradient-to-r from-orange-600 to-red-700 text-white font-bold rounded-lg shadow-lg hover:from-orange-700 hover:to-red-800 transition-all duration-300 transform hover:scale-105 active:scale-95 button-glow">
          Apply Filters
        </button>
      </aside>

      <!-- Main Product Grid -->
      <section class="lg:col-span-2 grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-6">

        <!-- Product Card 1 -->
        <div class="relative bg-brown-900 bg-opacity-70 backdrop-blur-sm rounded-xl overflow-hidden shadow-xl border border-orange-700 dark:bg-stone-900 dark:border-stone-700 group perspective-card">
          <div class="card-inner">
            <div class="card-front p-4">
              <div class="relative h-48 mb-4 rounded-lg overflow-hidden border border-orange-600 card-image-glow">
                <img src="https://picsum.photos/id/1015/400/300" alt="Desert Safari" class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-105">
                <div class="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent flex items-end p-3">
                  <span class="text-xs font-semibold text-orange-200 bg-red-700 px-2 py-1 rounded-full opacity-0 translate-y-2 group-hover:opacity-100 group-hover:translate-y-0 transition-all duration-300 glow-tag">Popular</span>
                </div>
              </div>
              <h3 class="text-xl font-bold mb-2 text-orange-200 text-shadow-glow dark:text-amber-400">Sahara Desert Trek</h3>
              <p class="text-sm text-orange-300 mb-4 line-clamp-2">Experience the majestic dunes and endless skies of the Sahara on this unforgettable journey.</p>
              <div class="flex justify-between items-center mb-4">
                <span class="text-2xl font-extrabold text-amber-500 price-glow">$1200</span>
                <div class="flex items-center text-orange-400">
                  <svg class="w-5 h-5 fill-current mr-1" viewBox="0 0 24 24"><path d="M12 .587l3.642 7.362 8.118 1.18c.552.08.775.736.377 1.118l-5.87 5.725 1.388 8.082c.096.56-.49.986-1 .728L12 20.07l-7.237 3.805c-.51.268-1.096-.168-1-.728l1.389-8.082-5.87-5.725c-.398-.382-.175-1.038.377-1.118l8.118-1.18L12 .587z"/></svg>
                  4.8 <span class="text-xs ml-1">(240 reviews)</span>
                </div>
              </div>
              <button class="w-full py-2 bg-gradient-to-r from-orange-600 to-red-700 text-white font-bold rounded-lg shadow-md hover:from-orange-700 hover:to-red-800 transition-all duration-300 transform hover:scale-105 active:scale-95 button-glow">
                View Details
              </button>
            </div>
            <div class="card-back p-4 text-center flex flex-col justify-center items-center bg-brown-800 rounded-xl">
                <h4 class="text-xl font-bold text-orange-200 mb-4 text-shadow-glow">Quick Facts</h4>
                <ul class="text-orange-300 text-sm space-y-2 mb-6">
                    <li>&#x2022; Duration: 7 Days</li>
                    <li>&#x2022; Difficulty: Moderate</li>
                    <li>&#x2022; Group Size: Max 12</li>
                    <li>&#x2022; Best Season: October - March</li>
                </ul>
                <button class="w-1/2 py-2 bg-amber-500 text-brown-900 font-bold rounded-lg shadow-md hover:bg-amber-600 transition-all duration-300 transform hover:scale-105 active:scale-95 button-glow-sm">
                    Book Now
                </button>
            </div>
          </div>
        </div>

        <!-- Product Card 2 -->
        <div class="relative bg-brown-900 bg-opacity-70 backdrop-blur-sm rounded-xl overflow-hidden shadow-xl border border-orange-700 dark:bg-stone-900 dark:border-stone-700 group perspective-card">
          <div class="card-inner">
            <div class="card-front p-4">
              <div class="relative h-48 mb-4 rounded-lg overflow-hidden border border-orange-600 card-image-glow">
                <img src="https://picsum.photos/id/292/400/300" alt="Himalayan Peaks" class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-105">
                <div class="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent flex items-end p-3">
                  <span class="text-xs font-semibold text-orange-200 bg-red-700 px-2 py-1 rounded-full opacity-0 translate-y-2 group-hover:opacity-100 group-hover:translate-y-0 transition-all duration-300 glow-tag">New!</span>
                </div>
              </div>
              <h3 class="text-xl font-bold mb-2 text-orange-200 text-shadow-glow dark:text-amber-400">Himalayan Basecamp</h3>
              <p class="text-sm text-orange-300 mb-4 line-clamp-2">Conquer breathtaking peaks and witness stunning panoramic views in the Himalayas.</p>
              <div class="flex justify-between items-center mb-4">
                <span class="text-2xl font-extrabold text-amber-500 price-glow">$2500</span>
                <div class="flex items-center text-orange-400">
                  <svg class="w-5 h-5 fill-current mr-1" viewBox="0 0 24 24"><path d="M12 .587l3.642 7.362 8.118 1.18c.552.08.775.736.377 1.118l-5.87 5.725 1.388 8.082c.096.56-.49.986-1 .728L12 20.07l-7.237 3.805c-.51.268-1.096-.168-1-.728l1.389-8.082-5.87-5.725c-.398-.382-.175-1.038.377-1.118l8.118-1.18L12 .587z"/></svg>
                  4.9 <span class="text-xs ml-1">(180 reviews)</span>
                </div>
              </div>
              <button class="w-full py-2 bg-gradient-to-r from-orange-600 to-red-700 text-white font-bold rounded-lg shadow-md hover:from-orange-700 hover:to-red-800 transition-all duration-300 transform hover:scale-105 active:scale-95 button-glow">
                View Details
              </button>
            </div>
            <div class="card-back p-4 text-center flex flex-col justify-center items-center bg-brown-800 rounded-xl">
                <h4 class="text-xl font-bold text-orange-200 mb-4 text-shadow-glow">Quick Facts</h4>
                <ul class="text-orange-300 text-sm space-y-2 mb-6">
                    <li>&#x2022; Duration: 14 Days</li>
                    <li>&#x2022; Difficulty: Advanced</li>
                    <li>&#x2022; Group Size: Max 8</li>
                    <li>&#x2022; Best Season: April - June</li>
                </ul>
                <button class="w-1/2 py-2 bg-amber-500 text-brown-900 font-bold rounded-lg shadow-md hover:bg-amber-600 transition-all duration-300 transform hover:scale-105 active:scale-95 button-glow-sm">
                    Book Now
                </button>
            </div>
          </div>
        </div>

        <!-- Product Card 3 -->
        <div class="relative bg-brown-900 bg-opacity-70 backdrop-blur-sm rounded-xl overflow-hidden shadow-xl border border-orange-700 dark:bg-stone-900 dark:border-stone-700 group perspective-card">
          <div class="card-inner">
            <div class="card-front p-4">
              <div class="relative h-48 mb-4 rounded-lg overflow-hidden border border-orange-600 card-image-glow">
                <img src="https://picsum.photos/id/1077/400/300" alt="Amazon River" class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-105">
                <div class="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent flex items-end p-3">
                  <span class="text-xs font-semibold text-orange-200 bg-orange-700 px-2 py-1 rounded-full opacity-0 translate-y-2 group-hover:opacity-100 group-hover:translate-y-0 transition-all duration-300 glow-tag">Low Spots Remaining</span>
                </div>
              </div>
              <h3 class="text-xl font-bold mb-2 text-orange-200 text-shadow-glow dark:text-amber-400">Amazon Wildlife Tour</h3>
              <p class="text-sm text-orange-300 mb-4 line-clamp-2">Navigate the mighty Amazon river and encounter unique wildlife in their natural habitat.</p>
              <div class="flex justify-between items-center mb-4">
                <span class="text-2xl font-extrabold text-amber-500 price-glow">$1800</span>
                <div class="flex items-center text-orange-400">
                  <svg class="w-5 h-5 fill-current mr-1" viewBox="0 0 24 24"><path d="M12 .587l3.642 7.362 8.118 1.18c.552.08.775.736.377 1.118l-5.87 5.725 1.388 8.082c.096.56-.49.986-1 .728L12 20.07l-7.237 3.805c-.51.268-1.096-.168-1-.728l1.389-8.082-5.87-5.725c-.398-.382-.175-1.038.377-1.118l8.118-1.18L12 .587z"/></svg>
                  4.7 <span class="text-xs ml-1">(310 reviews)</span>
                </div>
              </div>
              <button class="w-full py-2 bg-gradient-to-r from-orange-600 to-red-700 text-white font-bold rounded-lg shadow-md hover:from-orange-700 hover:to-red-800 transition-all duration-300 transform hover:scale-105 active:scale-95 button-glow">
                View Details
              </button>
            </div>
            <div class="card-back p-4 text-center flex flex-col justify-center items-center bg-brown-800 rounded-xl">
                <h4 class="text-xl font-bold text-orange-200 mb-4 text-shadow-glow">Quick Facts</h4>
                <ul class="text-orange-300 text-sm space-y-2 mb-6">
                    <li>&#x2022; Duration: 10 Days</li>
                    <li>&#x2022; Difficulty: Easy</li>
                    <li>&#x2022; Group Size: Max 15</li>
                    <li>&#x2022; Best Season: May - September</li>
                </ul>
                <button class="w-1/2 py-2 bg-amber-500 text-brown-900 font-bold rounded-lg shadow-md hover:bg-amber-600 transition-all duration-300 transform hover:scale-105 active:scale-95 button-glow-sm">
                    Book Now
                </button>
            </div>
          </div>
        </div>

        <!-- Add more product cards here following the same structure -->
        <!-- Product Card 4 -->
        <div class="relative bg-brown-900 bg-opacity-70 backdrop-blur-sm rounded-xl overflow-hidden shadow-xl border border-orange-700 dark:bg-stone-900 dark:border-stone-700 group perspective-card">
          <div class="card-inner">
            <div class="card-front p-4">
              <div class="relative h-48 mb-4 rounded-lg overflow-hidden border border-orange-600 card-image-glow">
                <img src="https://picsum.photos/id/1029/400/300" alt="Nordic Fjords" class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-105">
                <div class="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent flex items-end p-3">
                  <span class="text-xs font-semibold text-orange-200 bg-red-700 px-2 py-1 rounded-full opacity-0 translate-y-2 group-hover:opacity-100 group-hover:translate-y-0 transition-all duration-300 glow-tag">Featured</span>
                </div>
              </div>
              <h3 class="text-xl font-bold mb-2 text-orange-200 text-shadow-glow dark:text-amber-400">Nordic Fjords Cruise</h3>
              <p class="text-sm text-orange-300 mb-4 line-clamp-2">Cruise through breathtaking fjords and explore charming Nordic villages.</p>
              <div class="flex justify-between items-center mb-4">
                <span class="text-2xl font-extrabold text-amber-500 price-glow">$2800</span>
                <div class="flex items-center text-orange-400">
                  <svg class="w-5 h-5 fill-current mr-1" viewBox="0 0 24 24"><path d="M12 .587l3.642 7.362 8.118 1.18c.552.08.775.736.377 1.118l-5.87 5.725 1.388 8.082c.096.56-.49.986-1 .728L12 20.07l-7.237 3.805c-.51.268-1.096-.168-1-.728l1.389-8.082-5.87-5.725c-.398-.382-.175-1.038.377-1.118l8.118-1.18L12 .587z"/></svg>
                  4.9 <span class="text-xs ml-1">(200 reviews)</span>
                </div>
              </div>
              <button class="w-full py-2 bg-gradient-to-r from-orange-600 to-red-700 text-white font-bold rounded-lg shadow-md hover:from-orange-700 hover:to-red-800 transition-all duration-300 transform hover:scale-105 active:scale-95 button-glow">
                View Details
              </button>
            </div>
            <div class="card-back p-4 text-center flex flex-col justify-center items-center bg-brown-800 rounded-xl">
                <h4 class="text-xl font-bold text-orange-200 mb-4 text-shadow-glow">Quick Facts</h4>
                <ul class="text-orange-300 text-sm space-y-2 mb-6">
                    <li>&#x2022; Duration: 8 Days</li>
                    <li>&#x2022; Difficulty: Easy</li>
                    <li>&#x2022; Group Size: Max 20</li>
                    <li>&#x2022; Best Season: June - August</li>
                </ul>
                <button class="w-1/2 py-2 bg-amber-500 text-brown-900 font-bold rounded-lg shadow-md hover:bg-amber-600 transition-all duration-300 transform hover:scale-105 active:scale-95 button-glow-sm">
                    Book Now
                </button>
            </div>
          </div>
        </div>

        <!-- Product Card 5 -->
        <div class="relative bg-brown-900 bg-opacity-70 backdrop-blur-sm rounded-xl overflow-hidden shadow-xl border border-orange-700 dark:bg-stone-900 dark:border-stone-700 group perspective-card">
          <div class="card-inner">
            <div class="card-front p-4">
              <div class="relative h-48 mb-4 rounded-lg overflow-hidden border border-orange-600 card-image-glow">
                <img src="https://picsum.photos/id/1083/400/300" alt="Bali Beaches" class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-105">
                <div class="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent flex items-end p-3">
                  <span class="text-xs font-semibold text-orange-200 bg-red-700 px-2 py-1 rounded-full opacity-0 translate-y-2 group-hover:opacity-100 group-hover:translate-y-0 transition-all duration-300 glow-tag">Relaxation</span>
                </div>
              </div>
              <h3 class="text-xl font-bold mb-2 text-orange-200 text-shadow-glow dark:text-amber-400">Bali Beach Retreat</h3>
              <p class="text-sm text-orange-300 mb-4 line-clamp-2">Unwind on pristine beaches and immerse yourself in the serene culture of Bali.</p>
              <div class="flex justify-between items-center mb-4">
                <span class="text-2xl font-extrabold text-amber-500 price-glow">$950</span>
                <div class="flex items-center text-orange-400">
                  <svg class="w-5 h-5 fill-current mr-1" viewBox="0 0 24 24"><path d="M12 .587l3.642 7.362 8.118 1.18c.552.08.775.736.377 1.118l-5.87 5.725 1.388 8.082c.096.56-.49.986-1 .728L12 20.07l-7.237 3.805c-.51.268-1.096-.168-1-.728l1.389-8.082-5.87-5.725c-.398-.382-.175-1.038.377-1.118l8.118-1.18L12 .587z"/></svg>
                  4.6 <span class="text-xs ml-1">(450 reviews)</span>
                </div>
              </div>
              <button class="w-full py-2 bg-gradient-to-r from-orange-600 to-red-700 text-white font-bold rounded-lg shadow-md hover:from-orange-700 hover:to-red-800 transition-all duration-300 transform hover:scale-105 active:scale-95 button-glow">
                View Details
              </button>
            </div>
            <div class="card-back p-4 text-center flex flex-col justify-center items-center bg-brown-800 rounded-xl">
                <h4 class="text-xl font-bold text-orange-200 mb-4 text-shadow-glow">Quick Facts</h4>
                <ul class="text-orange-300 text-sm space-y-2 mb-6">
                    <li>&#x2022; Duration: 5 Days</li>
                    <li>&#x2022; Difficulty: Easy</li>
                    <li>&#x2022; Group Size: Any</li>
                    <li>&#x2022; Best Season: All Year</li>
                </ul>
                <button class="w-1/2 py-2 bg-amber-500 text-brown-900 font-bold rounded-lg shadow-md hover:bg-amber-600 transition-all duration-300 transform hover:scale-105 active:scale-95 button-glow-sm">
                    Book Now
                </button>
            </div>
          </div>
        </div>

        <!-- Product Card 6 -->
        <div class="relative bg-brown-900 bg-opacity-70 backdrop-blur-sm rounded-xl overflow-hidden shadow-xl border border-orange-700 dark:bg-stone-900 dark:border-stone-700 group perspective-card">
          <div class="card-inner">
            <div class="card-front p-4">
              <div class="relative h-48 mb-4 rounded-lg overflow-hidden border border-orange-600 card-image-glow">
                <img src="https://picsum.photos/id/1043/400/300" alt="Kyoto Temples" class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-105">
                <div class="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent flex items-end p-3">
                  <span class="text-xs font-semibold text-orange-200 bg-red-700 px-2 py-1 rounded-full opacity-0 translate-y-2 group-hover:opacity-100 group-hover:translate-y-0 transition-all duration-300 glow-tag">Cultural</span>
                </div>
              </div>
              <h3 class="text-xl font-bold mb-2 text-orange-200 text-shadow-glow dark:text-amber-400">Kyoto Cultural Journey</h3>
              <p class="text-sm text-orange-300 mb-4 line-clamp-2">Explore ancient temples, traditional gardens, and vibrant history in Japan's cultural heart.</p>
              <div class="flex justify-between items-center mb-4">
                <span class="text-2xl font-extrabold text-amber-500 price-glow">$2100</span>
                <div class="flex items-center text-orange-400">
                  <svg class="w-5 h-5 fill-current mr-1" viewBox="0 0 24 24"><path d="M12 .587l3.642 7.362 8.118 1.18c.552.08.775.736.377 1.118l-5.87 5.725 1.388 8.082c.096.56-.49.986-1 .728L12 20.07l-7.237 3.805c-.51.268-1.096-.168-1-.728l1.389-8.082-5.87-5.725c-.398-.382-.175-1.038.377-1.118l8.118-1.18L12 .587z"/></svg>
                  4.8 <span class="text-xs ml-1">(290 reviews)</span>
                </div>
              </div>
              <button class="w-full py-2 bg-gradient-to-r from-orange-600 to-red-700 text-white font-bold rounded-lg shadow-md hover:from-orange-700 hover:to-red-800 transition-all duration-300 transform hover:scale-105 active:scale-95 button-glow">
                View Details
              </button>
            </div>
            <div class="card-back p-4 text-center flex flex-col justify-center items-center bg-brown-800 rounded-xl">
                <h4 class="text-xl font-bold text-orange-200 mb-4 text-shadow-glow">Quick Facts</h4>
                <ul class="text-orange-300 text-sm space-y-2 mb-6">
                    <li>&#x2022; Duration: 9 Days</li>
                    <li>&#x2022; Difficulty: Easy</li>
                    <li>&#x2022; Group Size: Max 10</li>
                    <li>&#x2022; Best Season: March - May</li>
                </ul>
                <button class="w-1/2 py-2 bg-amber-500 text-brown-900 font-bold rounded-lg shadow-md hover:bg-amber-600 transition-all duration-300 transform hover:scale-105 active:scale-95 button-glow-sm">
                    Book Now
                </button>
            </div>
          </div>
        </div>

      </section>
    </div>

    <!-- Testimonial/Call to Action Section -->
    <section class="mt-12 p-8 bg-brown-900 bg-opacity-70 backdrop-blur-sm rounded-xl shadow-xl border border-orange-700 text-center dark:bg-stone-900 dark:border-stone-700">
      <h2 class="text-3xl font-extrabold mb-4 text-orange-200 text-shadow-glow dark:text-amber-400">Ready for Your Next Adventure?</h2>
      <p class="text-lg text-orange-300 mb-8">Join thousands of happy explorers who've crafted unforgettable memories with us.</p>
      <div class="flex flex-wrap justify-center items-center gap-6 mb-8">
        <div class="flex flex-col items-center">
          <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Customer Avatar" class="w-16 h-16 rounded-full border-2 border-amber-500 shadow-lg glow-avatar">
          <p class="text-amber-400 text-sm mt-2 font-semibold">Jane D.</p>
        </div>
        <div class="text-orange-200 italic max-w-md">"My trip to the Himalayas was beyond words. The organization was flawless, and the guides were exceptional. Highly recommend!"</div>
      </div>
      <a href="#contact" class="inline-block py-4 px-8 bg-gradient-to-r from-amber-500 to-orange-600 text-brown-900 font-bold text-xl rounded-full shadow-2xl hover:from-amber-600 hover:to-orange-700 transition-all duration-300 transform hover:scale-105 active:scale-95 button-glow-lg">
        Contact Our Travel Experts
      </a>
    </section>

  </div>

  <!-- Custom Styles for Neon/Glow Effects and Card Flip -->
  <style>
    @keyframes blob {
      0% {
        transform: translate(0px, 0px) scale(1);
      }
      33% {
        transform: translate(30px, -50px) scale(1.1);
      }
      66% {
        transform: translate(-20px, 20px) scale(0.9);
      }
      100% {
        transform: translate(0px, 0px) scale(1);
      }
    }

    .animate-blob {
      animation: blob 7s infinite cubic-bezier(0.6, -0.28, 0.735, 0.045);
    }

    .animation-delay-2000 {
      animation-delay: 2s;
    }

    .animation-delay-4000 {
      animation-delay: 4s;
    }

    .text-shadow-glow {
      text-shadow: 0 0 5px rgba(255, 165, 0, 0.8), 0 0 10px rgba(255, 140, 0, 0.6), 0 0 15px rgba(255, 69, 0, 0.4);
    }

    .glow-inset-orange:focus {
      box-shadow: inset 0 0 8px rgba(255, 165, 0, 0.6), 0 0 10px rgba(255, 140, 0, 0.4);
    }

    .glow-orange-checkbox:checked {
      box-shadow: 0 0 5px rgba(255, 165, 0, 0.8);
    }

    /* General Button Glow */
    .button-glow {
      box-shadow: 0 0 10px rgba(255, 165, 0, 0.6);
    }

    .button-glow:hover {
      box-shadow: 0 0 15px rgba(255, 165, 0, 0.8), 0 0 20px rgba(255, 140, 0, 0.7);
    }

    .button-glow-sm {
        box-shadow: 0 0 8px rgba(255, 215, 0, 0.7);
    }

    .button-glow-sm:hover {
        box-shadow: 0 0 12px rgba(255, 215, 0, 0.9), 0 0 16px rgba(255, 190, 0, 0.8);
    }

    .button-glow-lg {
      box-shadow: 0 0 15px rgba(255, 215, 0, 0.8), 0 0 25px rgba(255, 165, 0, 0.7);
    }
    
    .button-glow-lg:hover {
      box-shadow: 0 0 20px rgba(255, 215, 0, 1), 0 0 30px rgba(255, 165, 0, 0.9);
    }

    .card-image-glow {
        box-shadow: 0 0 8px rgba(255, 165, 0, 0.7);
    }

    .group:hover .card-image-glow {
        box-shadow: 0 0 15px rgba(255, 165, 0, 0.9);
    }

    .glow-tag {
        box-shadow: 0 0 5px rgba(255, 69, 0, 0.7);
    }

    .price-glow {
        text-shadow: 0 0 8px rgba(255, 215, 0, 0.8);
    }

    .glow-avatar {
        box-shadow: 0 0 8px rgba(255, 215, 0, 0.8);
    }


    /* 3D Card Flip Effect */
    .perspective-card {
      perspective: 1000px;
    }
    .card-inner {
      position: relative;
      width: 100%;
      height: 100%;
      text-align: center;
      transition: transform 0.8s;
      transform-style: preserve-3d;
    }
    .group:hover .card-inner {
      transform: rotateY(180deg);
    }
    .card-front, .card-back {
      position: absolute;
      width: 100%;
      height: 100%;
      -webkit-backface-visibility: hidden; /* Safari */
      backface-visibility: hidden;
      display: flex;
      flex-direction: column;
    }
    .card-front {
      background-color: transparent;
      z-index: 2;
    }
    .card-back {
      background-color: #5a2e00; /* Darker brown for back */
      transform: rotateY(180deg);
      justify-content: center;
      align-items: center;
      padding: 1.5rem;
    }

    /* Dark Mode Overrides */
    .dark .text-shadow-glow {
      text-shadow: 0 0 5px rgba(255, 215, 0, 0.9), 0 0 10px rgba(255, 190, 0, 0.7), 0 0 15px rgba(255, 160, 0, 0.5);
    }

    .dark .glow-inset-orange:focus {
      box-shadow: inset 0 0 8px rgba(255, 215, 0, 0.7), 0 0 10px rgba(255, 190, 0, 0.5);
    }

    .dark .glow-orange-checkbox:checked {
      box-shadow: 0 0 5px rgba(255, 215, 0, 0.9);
    }

    .dark .button-glow {
      box-shadow: 0 0 10px rgba(255, 215, 0, 0.7);
    }

    .dark .button-glow:hover {
      box-shadow: 0 0 15px rgba(255, 215, 0, 0.9), 0 0 20px rgba(255, 190, 0, 0.8);
    }

    .dark .price-glow {
        text-shadow: 0 0 8px rgba(255, 255, 0, 0.9);
    }
    .dark .card-image-glow {
        box-shadow: 0 0 8px rgba(255, 215, 0, 0.8);
    }

    .dark .group:hover .card-image-glow {
        box-shadow: 0 0 15px rgba(255, 215, 0, 1);
    }
    .dark .glow-tag {
        box-shadow: 0 0 5px rgba(200, 0, 0, 0.9);
    }
    .dark .glow-avatar {
        box-shadow: 0 0 8px rgba(255, 215, 0, 0.9);
    }

  </style>
</div>

ソーシャルコンポーネントコンポーネント

予約および予約システム用の複雑なインダストリアルスタイルのソーシャルコンポーネントで、クールなニュートラル、露出した要素、ダークモードのサポートが特徴です。予約および予約システム用に設計されています。

開けるプレビュー

                <div class="min-h-screen bg-gray-100 dark:bg-gray-900 text-gray-800 dark:text-gray-200 p-4 sm:p-6 lg:p-8 font-sans">
  <div class="max-w-7xl mx-auto grid grid-cols-1 md:grid-cols-3 gap-6 lg:gap-8">

    <!-- Left Column: Profile Card & Activity Feed -->
    <div class="md:col-span-1 space-y-6">

      <!-- Profile Card -->
      <div class="bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg shadow-lg overflow-hidden transition-all duration-300 transform hover:shadow-xl hover:-translate-y-1">
        <div class="relative h-32 bg-gray-700 dark:bg-gray-950 flex items-center justify-center">
          <img class="w-full h-full object-cover opacity-30" src="https://picsum.photos/600/300?random=1" alt="Cover Image">
          <h2 class="absolute text-xl font-semibold text-gray-100 uppercase tracking-wider">Service Provider</h2>
        </div>
        <div class="p-6 pt-0 text-center -mt-16">
          <img class="w-24 h-24 rounded-full border-4 border-white dark:border-gray-800 inline-block object-cover shadow-md" src="https://randomuser.me/api/portraits/men/32.jpg" alt="Profile Picture">
          <h3 class="text-2xl font-bold mt-4 text-gray-900 dark:text-gray-100">John Doe</h3>
          <p class="text-gray-600 dark:text-gray-400 text-sm">Industrial Design Expert</p>
          <div class="flex justify-center gap-4 mt-4">
            <button class="px-4 py-2 bg-blue-600 hover:bg-blue-700 dark:bg-blue-700 dark:hover:bg-blue-600 text-white rounded-md text-sm font-medium transition duration-300 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50">
              <svg class="h-4 w-4 inline-block mr-1 -mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"></path></svg>
              Message
            </button>
            <button class="px-4 py-2 bg-gray-200 hover:bg-gray-300 dark:bg-gray-700 dark:hover:bg-gray-600 text-gray-800 dark:text-gray-100 rounded-md text-sm font-medium transition duration-300 focus:outline-none focus:ring-2 focus:ring-gray-500 focus:ring-opacity-50">
              <svg class="h-4 w-4 inline-block mr-1 -mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-3-3H8a3 3 0 00-3 3v2H1m16-5h-3M19 8a2 2 0 11-4 0 2 2 0 014 0zM7 12V6a2 2 0 012-2h4a2 2 0 012 2v6m-6 4h6m-6-4H9a2 2 0 00-2 2v4a2 2 0 002 2h4a2 2 0 002-2v-4a2 2 0 00-2-2z"></path></svg>
              Follow
            </button>
          </div>
          <div class="mt-6 grid grid-cols-3 divide-x divide-gray-200 dark:divide-gray-700 text-sm">
            <div>
              <p class="font-semibold text-gray-900 dark:text-gray-100">1.2K</p>
              <p class="text-gray-500 dark:text-gray-400">Followers</p>
            </div>
            <div>
              <p class="font-semibold text-gray-900 dark:text-gray-100">350</p>
              <p class="text-gray-500 dark:text-gray-400">Projects</p>
            </div>
            <div>
              <p class="font-semibold text-gray-900 dark:text-gray-100">4.9/5</p>
              <p class="text-gray-500 dark:text-gray-400">Rating</p>
            </div>
          </div>
        </div>
      </div>

      <!-- Recent Activity Feed -->
      <div class="bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg shadow-lg p-6">
        <h3 class="text-lg font-semibold mb-4 text-gray-900 dark:text-gray-100">Recent Activity</h3>
        <div class="space-y-4">
          <div class="flex items-start">
            <img class="w-8 h-8 rounded-full object-cover mr-3" src="https://randomuser.me/api/portraits/women/44.jpg" alt="User Avatar">
            <div>
              <p class="text-sm text-gray-900 dark:text-gray-100"><span class="font-medium">Sarah M.</span> booked an appointment on <span class="font-medium">Nov 15, 2023</span>.</p>
              <p class="text-xs text-gray-500 dark:text-gray-400">2 hours ago</p>
            </div>
          </div>
          <div class="flex items-start">
            <img class="w-8 h-8 rounded-full object-cover mr-3" src="https://randomuser.me/api/portraits/men/51.jpg" alt="User Avatar">
            <div>
              <p class="text-sm text-gray-900 dark:text-gray-100"><span class="font-medium">Michael T.</span> left a 5-star review.</p>
              <p class="text-xs text-gray-500 dark:text-gray-400">Yesterday</p>
            </div>
          </div>
          <div class="flex items-start">
            <img class="w-8 h-8 rounded-full object-cover mr-3" src="https://randomuser.me/api/portraits/women/2.jpg" alt="User Avatar">
            <div>
              <p class="text-sm text-gray-900 dark:text-gray-100"><span class="font-medium">Emily R.</span> confirmed her booking for <span class="font-medium">Dec 1, 2023</span>.</p>
              <p class="text-xs text-gray-500 dark:text-gray-400">3 days ago</p>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- Middle Column: Booking Interface -->
    <div class="md:col-span-2 space-y-6">
      <div class="bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg shadow-lg p-6">
        <h3 class="text-2xl font-bold mb-6 text-gray-900 dark:text-gray-100 flex items-center">
          <svg class="w-6 h-6 mr-2 text-blue-600 dark:text-blue-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h.01M10 12h.01M12 16h.01m-6 4h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"></path></svg>
          Book Your Appointment
        </h3>

        <!-- Service Selection -->
        <div class="mb-6">
          <label for="service" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Select Service</label>
          <div class="relative">
            <select id="service" name="service" class="block w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm bg-gray-50 dark:bg-gray-900 text-gray-900 dark:text-gray-100 focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm appearance-none pr-8">
              <option value="">Choose a service...</option>
              <option value="consultation">Initial Consultation (60 min)</option>
              <option value="design">Concept Design Review (90 min)</option>
              <option value="prototype">Prototype Feedback Session (45 min)</option>
              <option value="maintenance">Post-Project Maintenance (30 min)</option>
            </select>
            <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-gray-700 dark:text-gray-300">
              <svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                <path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd" />
              </svg>
            </div>
          </div>
        </div>

        <!-- Date Picker (Simplified) -->
        <div class="mb-6">
          <label for="date" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Select Date</label>
          <input type="date" id="date" name="date" class="block w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm bg-gray-50 dark:bg-gray-900 text-gray-900 dark:text-gray-100 focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm" min="2023-11-20">
        </div>

        <!-- Time Slots -->
        <div class="mb-6">
          <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Available Time Slots</label>
          <div class="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 gap-3">
            <button class="px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-md text-sm font-medium bg-gray-50 dark:bg-gray-900 text-gray-800 dark:text-gray-200 hover:bg-blue-100 dark:hover:bg-gray-700 transition duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50">09:00 AM</button>
            <button class="px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-md text-sm font-medium bg-gray-50 dark:bg-gray-900 text-gray-800 dark:text-gray-200 hover:bg-blue-100 dark:hover:bg-gray-700 transition duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50">10:30 AM</button>
            <button class="px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-md text-sm font-medium bg-blue-600 dark:bg-blue-700 text-white shadow-xl focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 dark:focus:ring-offset-gray-800">11:00 AM</button>
            <button class="px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-md text-sm font-medium bg-gray-50 dark:bg-gray-900 text-gray-800 dark:text-gray-200 hover:bg-blue-100 dark:hover:bg-gray-700 transition duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50">01:00 PM</button>
            <button class="px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-md text-sm font-medium bg-gray-50 dark:bg-gray-900 text-gray-800 dark:text-gray-200 cursor-not-allowed opacity-50">02:30 PM</button>
            <button class="px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-md text-sm font-medium bg-gray-50 dark:bg-gray-900 text-gray-800 dark:text-gray-200 hover:bg-blue-100 dark:hover:bg-gray-700 transition duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50">04:00 PM</button>
          </div>
        </div>

        <!-- Additional Notes -->
        <div class="mb-6">
          <label for="notes" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Additional Notes (optional)</label>
          <textarea id="notes" name="notes" rows="3" class="block w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm bg-gray-50 dark:bg-gray-900 text-gray-900 dark:text-gray-100 focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm" placeholder="Any specific requirements or questions?"></textarea>
        </div>

        <!-- Submit Button -->
        <div class="flex justify-end">
          <button type="submit" class="inline-flex items-center px-6 py-3 border border-transparent text-base font-medium rounded-md shadow-sm text-white bg-blue-600 hover:bg-blue-700 dark:bg-blue-700 dark:hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:focus:ring-offset-gray-800 transition duration-300">
            <svg class="-ml-1 mr-2 h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h.01M10 12h.01M12 16h.01m-6 4h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"></path></svg>
            Confirm Booking
          </button>
        </div>
      </div>

      <!-- Other Interactive Elements (e.g., Reviews/Testimonials) -->
      <div class="bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg shadow-lg p-6">
        <h3 class="text-lg font-semibold mb-4 text-gray-900 dark:text-gray-100">Client Testimonials</h3>
        <div class="space-y-4">
          <div class="border-b border-gray-200 dark:border-gray-700 pb-4 last:border-b-0">
            <div class="flex items-center mb-2">
              <img class="w-10 h-10 rounded-full object-cover mr-3" src="https://randomuser.me/api/portraits/women/67.jpg" alt="Client Avatar">
              <div>
                <p class="font-medium text-gray-900 dark:text-gray-100">Jane D.</p>
                <div class="flex text-yellow-400">
                  <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.683-1.538 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.783.565-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.92 8.72a1 1 0 01.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
                  <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.683-1.538 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.783.565-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.92 8.72a1 1 0 01.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
                  <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.683-1.538 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.783.565-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.92 8.72a1 1 0 01.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
                  <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.683-1.538 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.783.565-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.92 8.72a1 1 0 01.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
                  <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.683-1.538 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.783.565-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.92 8.72a1 1 0 01.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
                </div>
              </div>
            </div>
            <p class="text-sm text-gray-700 dark:text-gray-300">"John's expertise is unmatched! He helped us streamline our production process. Highly recommend!"</p>
            <p class="text-xs text-gray-500 dark:text-gray-400 mt-2">Reviewed on Nov 10, 2023</p>
          </div>
          <div class="border-b border-gray-200 dark:border-gray-700 pb-4 last:border-b-0">
            <div class="flex items-center mb-2">
              <img class="w-10 h-10 rounded-full object-cover mr-3" src="https://randomuser.me/api/portraits/men/82.jpg" alt="Client Avatar">
              <div>
                <p class="font-medium text-gray-900 dark:text-gray-100">Robert L.</p>
                <div class="flex text-yellow-400">
                  <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.683-1.538 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.783.565-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.92 8.72a1 1 0 01.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
                  <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.683-1.538 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.783.565-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.92 8.72a1 1 0 01.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
                  <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.683-1.538 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.783.565-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.92 8.72a1 1 0 01.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
                  <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.683-1.538 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.783.565-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.92 8.72a1 1 0 01.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
                  <svg class="w-4 h-4 text-gray-300 dark:text-gray-600" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.683-1.538 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.783.565-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.92 8.72a1 1 0 01.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
                </div>
              </div>
            </div>
            <p class="text-sm text-gray-700 dark:text-gray-300">"Great communication and delivered exactly what was promised. A true professional."</p>
            <p class="text-xs text-gray-500 dark:text-gray-400 mt-2">Reviewed on Oct 25, 2023</p>
          </div>
        </div>
      </div>
    </div>

  </div>
</div>

Product Reviews コンポーネント

サイバーパンクにインスパイアされたファッション/ビューティー製品の製品レビューコンポーネントで、暗い背景にアースカラーのアクセントが特徴です。レスポンシブで、ダークモードのサポートが含まれています。

開けるプレビュー

                <section class="bg-zinc-900 dark:bg-black py-16 px-4 sm:px-6 lg:px-8 font-sans">
  <div class="max-w-6xl mx-auto">
    <h2 class="text-4xl sm:text-5xl font-extrabold tracking-tight text-white dark:text-gray-100 text-center mb-12 relative">
      Customer Insights
      <span class="block w-24 h-1 bg-yellow-600 dark:bg-yellow-500 mx-auto mt-4 rounded-full"></span>
    </h2>

    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
      <!-- Review Card 1 -->
      <div class="bg-zinc-800 dark:bg-zinc-900 rounded-lg p-6 shadow-lg border border-yellow-700 dark:border-yellow-600 relative overflow-hidden transform transition-all duration-300 hover:scale-105 hover:shadow-yellow-500/20">
        <div class="absolute -top-4 -right-4 w-24 h-24 bg-yellow-500 dark:bg-yellow-600 opacity-20 transform rotate-45 skew-x-12"></div>
        <div class="flex items-center mb-4">
          <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Reviewer Avatar" class="w-16 h-16 rounded-full border-2 border-yellow-500 dark:border-yellow-600 object-cover mr-4">
          <div>
            <p class="text-lg font-semibold text-white dark:text-gray-50">Alice J.</p>
            <div class="flex mt-1">
              <svg class="w-5 h-5 text-yellow-400 dark:text-yellow-300" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.683-1.538 1.118l-2.8-2.034a1 1 0 00-1.176 0l-2.8 2.034c-.783.565-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.92 8.72c-.783-.57-.38-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
              <svg class="w-5 h-5 text-yellow-400 dark:text-yellow-300" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.683-1.538 1.118l-2.8-2.034a1 1 0 00-1.176 0l-2.8 2.034c-.783.565-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.92 8.72c-.783-.57-.38-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
              <svg class="w-5 h-5 text-yellow-400 dark:text-yellow-300" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.683-1.538 1.118l-2.8-2.034a1 1 0 00-1.176 0l-2.8 2.034c-.783.565-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.92 8.72c-.783-.57-.38-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
              <svg class="w-5 h-5 text-yellow-400 dark:text-yellow-300" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.683-1.538 1.118l-2.8-2.034a1 1 0 00-1.176 0l-2.8 2.034c-.783.565-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.92 8.72c-.783-.57-.38-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
              <svg class="w-5 h-5 text-gray-500 dark:text-gray-600" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.683-1.538 1.118l-2.8-2.034a1 1 0 00-1.176 0l-2.8 2.034c-.783.565-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.92 8.72c-.783-.57-.38-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
            </div>
          </div>
        </div>
        <p class="text-zinc-300 dark:text-zinc-400 leading-relaxed text-sm mb-4">
          "Absolutely love this product! The quality is outstanding, and it exceeded my expectations. It's a game-changer for my daily routine. Highly recommend for anyone looking for reliability and style."
        </p>
        <p class="text-xs text-zinc-400 dark:text-zinc-500 mt-2">Reviewed on <time datetime="2023-10-26">October 26, 2023</time></p>
      </div>

      <!-- Review Card 2 -->
      <div class="bg-zinc-800 dark:bg-zinc-900 rounded-lg p-6 shadow-lg border border-yellow-700 dark:border-yellow-600 relative overflow-hidden transform transition-all duration-300 hover:scale-105 hover:shadow-yellow-500/20">
        <div class="absolute -top-4 -right-4 w-24 h-24 bg-yellow-500 dark:bg-yellow-600 opacity-20 transform rotate-45 skew-x-12"></div>
        <div class="flex items-center mb-4">
          <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Reviewer Avatar" class="w-16 h-16 rounded-full border-2 border-yellow-500 dark:border-yellow-600 object-cover mr-4">
          <div>
            <p class="text-lg font-semibold text-white dark:text-gray-50">Mark T.</p>
            <div class="flex mt-1">
              <svg class="w-5 h-5 text-yellow-400 dark:text-yellow-300" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.683-1.538 1.118l-2.8-2.034a1 1 0 00-1.176 0l-2.8 2.034c-.783.565-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.92 8.72c-.783-.57-.38-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
              <svg class="w-5 h-5 text-yellow-400 dark:text-yellow-300" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.683-1.538 1.118l-2.8-2.034a1 1 0 00-1.176 0l-2.8 2.034c-.783.565-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.92 8.72c-.783-.57-.38-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
              <svg class="w-5 h-5 text-yellow-400 dark:text-yellow-300" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.683-1.538 1.118l-2.8-2.034a1 1 0 00-1.176 0l-2.8 2.034c-.783.565-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.92 8.72c-.783-.57-.38-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
              <svg class="w-5 h-5 text-yellow-400 dark:text-yellow-300" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.683-1.538 1.118l-2.8-2.034a1 1 0 00-1.176 0l-2.8 2.034c-.783.565-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.92 8.72c-.783-.57-.38-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
              <svg class="w-5 h-5 text-yellow-400 dark:text-yellow-300" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.683-1.538 1.118l-2.8-2.034a1 1 0 00-1.176 0l-2.8 2.034c-.783.565-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.92 8.72c-.783-.57-.38-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
            </div>
          </div>
        </div>
        <p class="text-zinc-300 dark:text-zinc-400 leading-relaxed text-sm mb-4">
          "An absolute must-have! The craftsmanship is superb, and it feels incredibly durable. It has greatly improved my experience, and I've received many compliments. Worth every penny!"
        </p>
        <p class="text-xs text-zinc-400 dark:text-zinc-500 mt-2">Reviewed on <time datetime="2023-10-20">October 20, 2023</time></p>
      </div>

      <!-- Review Card 3 -->
      <div class="bg-zinc-800 dark:bg-zinc-900 rounded-lg p-6 shadow-lg border border-yellow-700 dark:border-yellow-600 relative overflow-hidden transform transition-all duration-300 hover:scale-105 hover:shadow-yellow-500/20">
        <div class="absolute -top-4 -right-4 w-24 h-24 bg-yellow-500 dark:bg-yellow-600 opacity-20 transform rotate-45 skew-x-12"></div>
        <div class="flex items-center mb-4">
          <img src="https://randomuser.me/api/portraits/women/68.jpg" alt="Reviewer Avatar" class="w-16 h-16 rounded-full border-2 border-yellow-500 dark:border-yellow-600 object-cover mr-4">
          <div>
            <p class="text-lg font-semibold text-white dark:text-gray-50">Sophia L.</p>
            <div class="flex mt-1">
              <svg class="w-5 h-5 text-yellow-400 dark:text-yellow-300" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.683-1.538 1.118l-2.8-2.034a1 1 0 00-1.176 0l-2.8 2.034c-.783.565-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.92 8.72c-.783-.57-.38-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
              <svg class="w-5 h-5 text-yellow-400 dark:text-yellow-300" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.683-1.538 1.118l-2.8-2.034a1 1 0 00-1.176 0l-2.8 2.034c-.783.565-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.92 8.72c-.783-.57-.38-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
              <svg class="w-5 h-5 text-yellow-400 dark:text-yellow-300" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.683-1.538 1.118l-2.8-2.034a1 1 0 00-1.176 0l-2.8 2.034c-.783.565-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.92 8.72c-.783-.57-.38-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
              <svg class="w-5 h-5 text-yellow-400 dark:text-yellow-300" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.683-1.538 1.118l-2.8-2.034a1 1 0 00-1.176 0l-2.8 2.034c-.783.565-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.92 8.72c-.783-.57-.38-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
              <svg class="w-5 h-5 text-gray-500 dark:text-gray-600" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.683-1.538 1.118l-2.8-2.034a1 1 0 00-1.176 0l-2.8 2.034c-.783.565-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.92 8.72c-.783-.57-.38-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
            </div>
          </div>
        </div>
        <p class="text-zinc-300 dark:text-zinc-400 leading-relaxed text-sm mb-4">
          "Impressed with the efficiency and sleek design. It fits perfectly into my lifestyle. The results are noticeable, and I'm very happy with my purchase. Don't hesitate if you're considering it!"
        </p>
        <p class="text-xs text-zinc-400 dark:text-zinc-500 mt-2">Reviewed on <time datetime="2023-10-15">October 15, 2023</time></p>
      </div>
    </div>

    <div class="text-center mt-16">
      <button class="px-8 py-3 rounded-full bg-yellow-600 dark:bg-yellow-500 text-white dark:text-gray-900 font-bold text-lg uppercase tracking-wide shadow-lg transform transition-transform duration-300 hover:scale-105 hover:bg-yellow-700 dark:hover:bg-yellow-400 focus:outline-none focus:ring-4 focus:ring-yellow-500 dark:focus:ring-yellow-400 focus:ring-opacity-75">
        View More Reviews
      </button>
    </div>
  </div>
</section>

チェックアウトフォームコンポーネント - Neumorphic Corporate Blues

複雑で応答性の高いチェックアウトフォームコンポーネントで、企業の青の色調を使用したニューモルフィックデザインスタイルです。ダークモードをサポートし、ビジネス/企業のWebサイトに適しています。

開けるプレビュー

                <div class="min-h-screen flex items-center justify-center p-4 bg-blue-50 dark:bg-gray-800 font-sans">

  <div class="w-full max-w-4xl bg-blue-100 dark:bg-gray-700 rounded-xl shadow-xl p-8 transition-all duration-300 transform
              dark:shadow-[inset_2px_2px_5px_rgba(0,0,0,0.5),inset_-2px_-2px_5px_rgba(255,255,255,0.1)]
              shadow-[inset_5px_5px_10px_rgba(174,174,192,0.6),inset_-5px_-5px_10px_rgba(255,255,255,0.8)]">

    <h2 class="text-3xl font-bold text-blue-800 dark:text-blue-300 mb-8 text-center">
      Secure Checkout
    </h2>

    <div class="grid grid-cols-1 lg:grid-cols-2 gap-8">

      <!-- Payment Information Section -->
      <div class="p-6 rounded-xl bg-blue-50 dark:bg-gray-800
                  shadow-[5px_5px_10px_rgba(174,174,192,0.6),-5px_-5px_10px_rgba(255,255,255,0.8)]
                  dark:shadow-[5px_5px_10px_rgba(0,0,0,0.5),-5px_-5px_10px_rgba(255,255,255,0.1)]">
        <h3 class="text-xl font-semibold text-blue-700 dark:text-blue-400 mb-6">Payment Details</h3>

        <div class="space-y-4">

          <!-- Card Number -->
          <div>
            <label for="card-number" class="block text-sm font-medium text-blue-600 dark:text-blue-200 mb-2">Card Number</label>
            <input type="text" id="card-number" placeholder="•••• •••• •••• ••••" maxlength="19" class="w-full p-3 rounded-lg
                          bg-blue-100 dark:bg-gray-700 text-blue-800 dark:text-white
                          border border-transparent outline-none
                          focus:ring-2 focus:ring-blue-400 dark:focus:ring-blue-600
                          shadow-[inset_2px_2px_5px_rgba(174,174,192,0.6),inset_-2px_-2px_5px_rgba(255,255,255,0.8)]
                          dark:shadow-[inset_2px_2px_5px_rgba(0,0,0,0.5),inset_-2px_-2px_5px_rgba(255,255,255,0.1)]
                          placeholder:text-blue-400 dark:placeholder:text-gray-400">
          </div>

          <!-- Card Name -->
          <div>
            <label for="card-name" class="block text-sm font-medium text-blue-600 dark:text-blue-200 mb-2">Card Holder Name</label>
            <input type="text" id="card-name" placeholder="John Doe" class="w-full p-3 rounded-lg
                          bg-blue-100 dark:bg-gray-700 text-blue-800 dark:text-white
                          border border-transparent outline-none
                          focus:ring-2 focus:ring-blue-400 dark:focus:ring-blue-600
                          shadow-[inset_2px_2px_5px_rgba(174,174,192,0.6),inset_-2px_-2px_5px_rgba(255,255,255,0.8)]
                          dark:shadow-[inset_2px_2px_5px_rgba(0,0,0,0.5),inset_-2px_-2px_5px_rgba(255,255,255,0.1)]
                          placeholder:text-blue-400 dark:placeholder:text-gray-400">
          </div>

          <div class="grid grid-cols-2 gap-4">
            <!-- Expiration Date -->
            <div>
              <label for="exp-date" class="block text-sm font-medium text-blue-600 dark:text-blue-200 mb-2">Expiry Date</label>
              <input type="text" id="exp-date" placeholder="MM/YY" maxlength="5" class="w-full p-3 rounded-lg
                            bg-blue-100 dark:bg-gray-700 text-blue-800 dark:text-white
                            border border-transparent outline-none
                            focus:ring-2 focus:ring-blue-400 dark:focus:ring-blue-600
                            shadow-[inset_2px_2px_5px_rgba(174,174,192,0.6),inset_-2px_-2px_5px_rgba(255,255,255,0.8)]
                            dark:shadow-[inset_2px_2px_5px_rgba(0,0,0,0.5),inset_-2px_-2px_5px_rgba(255,255,255,0.1)]
                            placeholder:text-blue-400 dark:placeholder:text-gray-400">
            </div>
            <!-- CVV -->
            <div>
              <label for="cvv" class="block text-sm font-medium text-blue-600 dark:text-blue-200 mb-2">CVV</label>
              <input type="text" id="cvv" placeholder="•••" maxlength="3" class="w-full p-3 rounded-lg
                            bg-blue-100 dark:bg-gray-700 text-blue-800 dark:text-white
                            border border-transparent outline-none
                            focus:ring-2 focus:ring-blue-400 dark:focus:ring-blue-600
                            shadow-[inset_2px_2px_5px_rgba(174,174,192,0.6),inset_-2px_-2px_5px_rgba(255,255,255,0.8)]
                            dark:shadow-[inset_2px_2px_5px_rgba(0,0,0,0.5),inset_-2px_-2px_5px_rgba(255,255,255,0.1)]
                            placeholder:text-blue-400 dark:placeholder:text-gray-400">
            </div>
          </div>

          <!-- Payment Options -->
          <div class="mt-6">
            <h4 class="text-md font-semibold text-blue-700 dark:text-blue-400 mb-3">Choose Payment Method</h4>
            <div class="flex flex-wrap gap-4">
              <button class="flex items-center justify-center gap-2 p-3 rounded-lg text-blue-700 dark:text-blue-200
                              bg-blue-200 dark:bg-gray-900
                              shadow-[5px_5px_10px_rgba(174,174,192,0.6),-5px_-5px_10px_rgba(255,255,255,0.8)]
                              dark:shadow-[5px_5px_10px_rgba(0,0,0,0.5),-5px_-5px_10px_rgba(255,255,255,0.1)]
                              hover:shadow-[inset_2px_2px_5px_rgba(174,174,192,0.6),inset_-2px_-2px_5px_rgba(255,255,255,0.8)]
                              dark:hover:shadow-[inset_2px_2px_5px_rgba(0,0,0,0.5),inset_-2px_-2px_5px_rgba(255,255,255,0.1)]
                              transition-all duration-200 text-sm">
                <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24"><path d="M20 4H4c-1.11 0-1.99.89-1.99 2L2 18c0 1.11.89 2 2 2h16c1.11 0 2-.89 2-2V6c0-1.11-.89-2-2-2zm0 14H4V8h16v10zm-12-6L4 8h16l-8 4-8-4z"/></svg>
                Credit Card
              </button>
              <button class="flex items-center justify-center gap-2 p-3 rounded-lg text-blue-700 dark:text-blue-200
                              bg-blue-200 dark:bg-gray-900
                              shadow-[5px_5px_10px_rgba(174,174,192,0.6),-5px_-5px_10px_rgba(255,255,255,0.8)]
                              dark:shadow-[5px_5px_10px_rgba(0,0,0,0.5),-5px_-5px_10px_rgba(255,255,255,0.1)]
                              hover:shadow-[inset_2px_2px_5px_rgba(174,174,192,0.6),inset_-2px_-2px_5px_rgba(255,255,255,0.8)]
                              dark:hover:shadow-[inset_2px_2px_5px_rgba(0,0,0,0.5),inset_-2px_-2px_5px_rgba(255,255,255,0.1)]
                              transition-all duration-200 text-sm">
                <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-1 17.93c-3.95-.49-7-3.47-7-7.39h5L10 9l3 3.01L14.99 12H19c0 4.87-3.93 8.8-8 8.93V19z"/></svg>
                PayPal
              </button>
            </div>
          </div>

        </div>
      </div>

      <!-- Order Summary / Billing Address Section -->
      <div class="p-6 rounded-xl bg-blue-50 dark:bg-gray-800
                  shadow-[5px_5px_10px_rgba(174,174,192,0.6),-5px_-5px_10px_rgba(255,255,255,0.8)]
                  dark:shadow-[5px_5px_10px_rgba(0,0,0,0.5),-5px_-5px_10px_rgba(255,255,255,0.1)]">
        <h3 class="text-xl font-semibold text-blue-700 dark:text-blue-400 mb-6">Billing Address</h3>

        <div class="space-y-4">
          <div>
            <label for="full-name" class="block text-sm font-medium text-blue-600 dark:text-blue-200 mb-2">Full Name</label>
            <input type="text" id="full-name" placeholder="Jane Doe" class="w-full p-3 rounded-lg
                          bg-blue-100 dark:bg-gray-700 text-blue-800 dark:text-white
                          border border-transparent outline-none
                          focus:ring-2 focus:ring-blue-400 dark:focus:ring-blue-600
                          shadow-[inset_2px_2px_5px_rgba(174,174,192,0.6),inset_-2px_-2px_5px_rgba(255,255,255,0.8)]
                          dark:shadow-[inset_2px_2px_5px_rgba(0,0,0,0.5),inset_-2px_-2px_5px_rgba(255,255,255,0.1)]
                          placeholder:text-blue-400 dark:placeholder:text-gray-400">
          </div>
          <div>
            <label for="address" class="block text-sm font-medium text-blue-600 dark:text-blue-200 mb-2">Address</label>
            <input type="text" id="address" placeholder="123 Main St" class="w-full p-3 rounded-lg
                          bg-blue-100 dark:bg-gray-700 text-blue-800 dark:text-white
                          border border-transparent outline-none
                          focus:ring-2 focus:ring-blue-400 dark:focus:ring-blue-600
                          shadow-[inset_2px_2px_5px_rgba(174,174,192,0.6),inset_-2px_-2px_5px_rgba(255,255,255,0.8)]
                          dark:shadow-[inset_2px_2px_5px_rgba(0,0,0,0.5),inset_-2px_-2px_5px_rgba(255,255,255,0.1)]
                          placeholder:text-blue-400 dark:placeholder:text-gray-400">
          </div>
          <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
            <div>
              <label for="city" class="block text-sm font-medium text-blue-600 dark:text-blue-200 mb-2">City</label>
              <input type="text" id="city" placeholder="Anytown" class="w-full p-3 rounded-lg
                            bg-blue-100 dark:bg-gray-700 text-blue-800 dark:text-white
                            border border-transparent outline-none
                            focus:ring-2 focus:ring-blue-400 dark:focus:ring-blue-600
                            shadow-[inset_2px_2px_5px_rgba(174,174,192,0.6),inset_-2px_-2px_5px_rgba(255,255,255,0.8)]
                            dark:shadow-[inset_2px_2px_5px_rgba(0,0,0,0.5),inset_-2px_-2px_5px_rgba(255,255,255,0.1)]
                            placeholder:text-blue-400 dark:placeholder:text-gray-400">
            </div>
            <div>
              <label for="zip" class="block text-sm font-medium text-blue-600 dark:text-blue-200 mb-2">Zip Code</label>
              <input type="text" id="zip" placeholder="12345" class="w-full p-3 rounded-lg
                            bg-blue-100 dark:bg-gray-700 text-blue-800 dark:text-white
                            border border-transparent outline-none
                            focus:ring-2 focus:ring-blue-400 dark:focus:ring-blue-600
                            shadow-[inset_2px_2px_5px_rgba(174,174,192,0.6),inset_-2px_-2px_5px_rgba(255,255,255,0.8)]
                            dark:shadow-[inset_2px_2px_5px_rgba(0,0,0,0.5),inset_-2px_-2px_5px_rgba(255,255,255,0.1)]
                            placeholder:text-blue-400 dark:placeholder:text-gray-400">
            </div>
          </div>
          <div>
            <label for="country" class="block text-sm font-medium text-blue-600 dark:text-blue-200 mb-2">Country</label>
            <select id="country" class="w-full p-3 rounded-lg
                          bg-blue-100 dark:bg-gray-700 text-blue-800 dark:text-white
                          border border-transparent outline-none
                          focus:ring-2 focus:ring-blue-400 dark:focus:ring-blue-600
                          shadow-[inset_2px_2px_5px_rgba(174,174,192,0.6),inset_-2px_-2px_5px_rgba(255,255,255,0.8)]
                          dark:shadow-[inset_2px_2px_5px_rgba(0,0,0,0.5),inset_-2px_-2px_5px_rgba(255,255,255,0.1)]">
              <option value="">Select Country</option>
              <option value="US">United States</option>
              <option value="CA">Canada</option>
              <option value="GB">United Kingdom</option>
              <option value="AU">Australia</option>
              <option value="DE">Germany</option>
              <!-- Add more countries as needed -->
            </select>
          </div>
        </div>
      </div>

    </div>

    <!-- Order Summary Footer -->
    <div class="mt-8 p-6 rounded-xl bg-blue-50 dark:bg-gray-800
                shadow-[5px_5px_10px_rgba(174,174,192,0.6),-5px_-5px_10px_rgba(255,255,255,0.8)]
                dark:shadow-[5px_5px_10px_rgba(0,0,0,0.5),-5px_-5px_10px_rgba(255,255,255,0.1)]">
      <h3 class="text-xl font-semibold text-blue-700 dark:text-blue-400 mb-4">Order Summary</h3>
      <div class="flex justify-between items-center text-blue-600 dark:text-blue-200 mb-2">
        <span>Subtotal</span>
        <span>$200.00</span>
      </div>
      <div class="flex justify-between items-center text-blue-600 dark:text-blue-200 mb-2">
        <span>Shipping</span>
        <span>$15.00</span>
      </div>
      <div class="flex justify-between items-center text-blue-700 dark:text-blue-100 font-bold text-xl mt-4 pt-4 border-t border-blue-200 dark:border-gray-600">
        <span>Total</span>
        <span>$215.00</span>
      </div>

      <button type="submit" class="w-full mt-8 p-4 rounded-xl
                      bg-blue-600 hover:bg-blue-700 dark:bg-blue-600 dark:hover:bg-blue-700
                      text-white font-bold text-lg
                      shadow-[5px_5px_10px_rgba(0,0,0,0.2),-5px_-5px_10px_rgba(255,255,255,0.7)]
                      dark:shadow-[5px_5px_10px_rgba(0,0,0,0.8),-5px_-5px_10px_rgba(255,255,255,0.1)]
                      hover:shadow-[inset_2px_2px_5px_rgba(0,0,0,0.3),inset_-2px_-2px_5px_rgba(255,255,255,0.6)]
                      dark:hover:shadow-[inset_2px_2px_5px_rgba(0,0,0,0.9),inset_-2px_-2px_5px_rgba(255,255,255,0.05)]
                      transition-all duration-300 transform active:scale-98">
        Place Order
      </button>
    </div>

  </div>
</div>

Skeuomorphic_Crypto_Cards

暗号通貨またはブロックチェーンアプリケーション用に設計されたレスポンシブでスキューモーフィックなカードのセット。パステルカラー、微妙なシャドウとハイライト、ダークモードのサポートが特徴です。

開けるプレビュー

                <div class="p-4 sm:p-8 bg-gradient-to-br from-purple-100 via-pink-100 to-yellow-100 min-h-screen dark:from-gray-900 dark:via-gray-800 dark:to-gray-700 flex flex-col items-center justify-center font-sans">

  <h1 class="text-4xl sm:text-5xl lg:text-6xl font-extrabold text-gray-800 mb-10 text-center tracking-tight drop-shadow-lg dark:text-gray-100">
    <span class="block">Crypto Portfolio</span>
    <span class="block text-2xl sm:text-3xl text-gray-600 dark:text-gray-300 font-medium mt-2">Your Digital Assets</span>
  </h1>

  <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 w-full max-w-6xl">

    <!-- Card 1: Bitcoin -->
    <div class="relative flex flex-col justify-between p-6 rounded-3xl backdrop-filter backdrop-blur-sm bg-gradient-to-br from-white/80 to-gray-50/80 shadow-[inset_0_1px_0px_rgba(255,255,255,0.7),_0_4px_16px_rgba(0,0,0,0.1),_0_12px_48px_rgba(0,0,0,0.05)] dark:from-gray-700/80 dark:to-gray-800/80 dark:shadow-[inset_0_1px_0px_rgba(255,255,255,0.05),_0_4px_16px_rgba(0,0,0,0.4),_0_12px_48px_rgba(0,0,0,0.2)] transform transition-all duration-300 hover:scale-[1.02] active:scale-[0.98]">
      <div class="absolute inset-0 rounded-3xl border-2 border-white/50 dark:border-gray-600/50 pointer-events-none"></div>
      <div class="flex items-center mb-4">
        <img src="https://www.picsum.photos/id/60/60" alt="Bitcoin Icon" class="w-16 h-16 rounded-full shadow-lg border-2 border-white dark:border-gray-600 drop-shadow-md">
        <h2 class="ml-4 text-3xl font-bold text-gray-800 dark:text-gray-100 drop-shadow-sm">Bitcoin</h2>
      </div>
      <p class="text-gray-600 dark:text-gray-300 mb-4 text-lg">The first and most well-known cryptocurrency.</p>
      <div class="grid grid-cols-2 gap-2 text-sm mb-4">
        <div class="bg-white/70 dark:bg-gray-700/70 p-3 rounded-xl shadow-inner-lg shadow-gray-200/50 dark:shadow-gray-900/50 border border-white dark:border-gray-600 text-gray-700 dark:text-gray-200">
          <span class="block font-medium">Price:</span>
          <span class="block text-pink-600 dark:text-pink-400 font-bold text-lg">$65,432.10</span>
        </div>
        <div class="bg-white/70 dark:bg-gray-700/70 p-3 rounded-xl shadow-inner-lg shadow-gray-200/50 dark:shadow-gray-900/50 border border-white dark:border-gray-600 text-gray-700 dark:text-gray-200">
          <span class="block font-medium">Change (24h):</span>
          <span class="block text-green-600 dark:text-green-400 font-bold text-lg">+3.15%</span>
        </div>
        <div class="bg-white/70 dark:bg-gray-700/70 p-3 rounded-xl shadow-inner-lg shadow-gray-200/50 dark:shadow-gray-900/50 border border-white dark:border-gray-600 text-gray-700 dark:text-gray-200">
          <span class="block font-medium">Holdings:</span>
          <span class="block text-purple-600 dark:text-purple-400 font-bold text-lg">0.5 BTC</span>
        </div>
        <div class="bg-white/70 dark:bg-gray-700/70 p-3 rounded-xl shadow-inner-lg shadow-gray-200/50 dark:shadow-gray-900/50 border border-white dark:border-gray-600 text-gray-700 dark:text-gray-200">
          <span class="block font-medium">Value:</span>
          <span class="block text-yellow-600 dark:text-yellow-400 font-bold text-lg">$32,716.05</span>
        </div>
      </div>
      <button class="w-full flex items-center justify-center px-6 py-3 rounded-full text-lg font-semibold text-white bg-gradient-to-br from-pink-400 to-purple-500 shadow-lg shadow-purple-300/50 dark:shadow-purple-800/50 active:shadow-inner-sm border border-white/50 active:border-white/80 active:from-pink-500 active:to-purple-600 transition-all duration-150 transform active:scale-98 relative overflow-hidden group">
        <span class="relative z-10 group-hover:scale-105 transition-transform duration-200">Trade Bitcoin</span>
        <span class="absolute inset-0 bg-white/20 opacity-0 group-hover:opacity-100 group-active:opacity-0 transition-opacity duration-200"></span>
      </button>
    </div>

    <!-- Card 2: Ethereum -->
    <div class="relative flex flex-col justify-between p-6 rounded-3xl backdrop-filter backdrop-blur-sm bg-gradient-to-br from-white/80 to-gray-50/80 shadow-[inset_0_1px_0px_rgba(255,255,255,0.7),_0_4px_16px_rgba(0,0,0,0.1),_0_12px_48px_rgba(0,0,0,0.05)] dark:from-gray-700/80 dark:to-gray-800/80 dark:shadow-[inset_0_1px_0px_rgba(255,255,255,0.05),_0_4px_16px_rgba(0,0,0,0.4),_0_12px_48px_rgba(0,0,0,0.2)] transform transition-all duration-300 hover:scale-[1.02] active:scale-[0.98]">
      <div class="absolute inset-0 rounded-3xl border-2 border-white/50 dark:border-gray-600/50 pointer-events-none"></div>
      <div class="flex items-center mb-4">
        <img src="https://www.picsum.photos/id/65/60" alt="Ethereum Icon" class="w-16 h-16 rounded-full shadow-lg border-2 border-white dark:border-gray-600 drop-shadow-md">
        <h2 class="ml-4 text-3xl font-bold text-gray-800 dark:text-gray-100 drop-shadow-sm">Ethereum</h2>
      </div>
      <p class="text-gray-600 dark:text-gray-300 mb-4 text-lg">The decentralized platform for smart contracts.</p>
      <div class="grid grid-cols-2 gap-2 text-sm mb-4">
        <div class="bg-white/70 dark:bg-gray-700/70 p-3 rounded-xl shadow-inner-lg shadow-gray-200/50 dark:shadow-gray-900/50 border border-white dark:border-gray-600 text-gray-700 dark:text-gray-200">
          <span class="block font-medium">Price:</span>
          <span class="block text-teal-600 dark:text-teal-400 font-bold text-lg">$3,456.78</span>
        </div>
        <div class="bg-white/70 dark:bg-gray-700/70 p-3 rounded-xl shadow-inner-lg shadow-gray-200/50 dark:shadow-gray-900/50 border border-white dark:border-gray-600 text-gray-700 dark:text-gray-200">
          <span class="block font-medium">Change (24h):</span>
          <span class="block text-red-600 dark:text-red-400 font-bold text-lg">-1.50%</span>
        </div>
        <div class="bg-white/70 dark:bg-gray-700/70 p-3 rounded-xl shadow-inner-lg shadow-gray-200/50 dark:shadow-gray-900/50 border border-white dark:border-gray-600 text-gray-700 dark:text-gray-200">
          <span class="block font-medium">Holdings:</span>
          <span class="block text-purple-600 dark:text-purple-400 font-bold text-lg">3.0 ETH</span>
        </div>
        <div class="bg-white/70 dark:bg-gray-700/70 p-3 rounded-xl shadow-inner-lg shadow-gray-200/50 dark:shadow-900/50 border border-white dark:border-gray-600 text-gray-700 dark:text-gray-200">
          <span class="block font-medium">Value:</span>
          <span class="block text-yellow-600 dark:text-yellow-400 font-bold text-lg">$10,370.34</span>
        </div>
      </div>
      <button class="w-full flex items-center justify-center px-6 py-3 rounded-full text-lg font-semibold text-white bg-gradient-to-br from-green-400 to-teal-500 shadow-lg shadow-teal-300/50 dark:shadow-teal-800/50 active:shadow-inner-sm border border-white/50 active:border-white/80 active:from-green-500 active:to-teal-600 transition-all duration-150 transform active:scale-98 relative overflow-hidden group">
        <span class="relative z-10 group-hover:scale-105 transition-transform duration-200">Trade Ethereum</span>
        <span class="absolute inset-0 bg-white/20 opacity-0 group-hover:opacity-100 group-active:opacity-0 transition-opacity duration-200"></span>
      </button>
    </div>

    <!-- Card 3: BNB -->
    <div class="relative flex flex-col justify-between p-6 rounded-3xl backdrop-filter backdrop-blur-sm bg-gradient-to-br from-white/80 to-gray-50/80 shadow-[inset_0_1px_0px_rgba(255,255,255,0.7),_0_4px_16px_rgba(0,0,0,0.1),_0_12px_48px_rgba(0,0,0,0.05)] dark:from-gray-700/80 dark:to-gray-800/80 dark:shadow-[inset_0_1px_0px_rgba(255,255,255,0.05),_0_4px_16px_rgba(0,0,0,0.4),_0_12px_48px_rgba(0,0,0,0.2)] transform transition-all duration-300 hover:scale-[1.02] active:scale-[0.98]">
      <div class="absolute inset-0 rounded-3xl border-2 border-white/50 dark:border-gray-600/50 pointer-events-none"></div>
      <div class="flex items-center mb-4">
        <img src="https://www.picsum.photos/id/70/60" alt="BNB Icon" class="w-16 h-16 rounded-full shadow-lg border-2 border-white dark:border-gray-600 drop-shadow-md">
        <h2 class="ml-4 text-3xl font-bold text-gray-800 dark:text-gray-100 drop-shadow-sm">BNB</h2>
      </div>
      <p class="text-gray-600 dark:text-gray-300 mb-4 text-lg">The native cryptocurrency of the Binance Smart Chain.</p>
      <div class="grid grid-cols-2 gap-2 text-sm mb-4">
        <div class="bg-white/70 dark:bg-gray-700/70 p-3 rounded-xl shadow-inner-lg shadow-gray-200/50 dark:shadow-gray-900/50 border border-white dark:border-gray-600 text-gray-700 dark:text-gray-200">
          <span class="block font-medium">Price:</span>
          <span class="block text-red-600 dark:text-red-400 font-bold text-lg">$589.99</span>
        </div>
        <div class="bg-white/70 dark:bg-gray-700/70 p-3 rounded-xl shadow-inner-lg shadow-gray-200/50 dark:shadow-gray-900/50 border border-white dark:border-gray-600 text-gray-700 dark:text-gray-200">
          <span class="block font-medium">Change (24h):</span>
          <span class="block text-green-600 dark:text-green-400 font-bold text-lg">+0.80%</span>
        </div>
        <div class="bg-white/70 dark:bg-gray-700/70 p-3 rounded-xl shadow-inner-lg shadow-gray-200/50 dark:shadow-gray-900/50 border border-white dark:border-gray-600 text-gray-700 dark:text-gray-200">
          <span class="block font-medium">Holdings:</span>
          <span class="block text-purple-600 dark:text-purple-400 font-bold text-lg">10.0 BNB</span>
        </div>
        <div class="bg-white/70 dark:bg-gray-700/70 p-3 rounded-xl shadow-inner-lg shadow-gray-200/50 dark:shadow-gray-900/50 border border-white dark:border-gray-600 text-gray-700 dark:text-gray-200">
          <span class="block font-medium">Value:</span>
          <span class="block text-yellow-600 dark:text-yellow-400 font-bold text-lg">$5,899.90</span>
        </div>
      </div>
      <button class="w-full flex items-center justify-center px-6 py-3 rounded-full text-lg font-semibold text-white bg-gradient-to-br from-blue-400 to-indigo-500 shadow-lg shadow-indigo-300/50 dark:shadow-indigo-800/50 active:shadow-inner-sm border border-white/50 active:border-white/80 active:from-blue-500 active:to-indigo-600 transition-all duration-150 transform active:scale-98 relative overflow-hidden group">
        <span class="relative z-10 group-hover:scale-105 transition-transform duration-200">Trade BNB</span>
        <span class="absolute inset-0 bg-white/20 opacity-0 group-hover:opacity-100 group-active:opacity-0 transition-opacity duration-200"></span>
      </button>
    </div>

  </div>

  <footer class="mt-12 text-center text-gray-600 dark:text-gray-400 text-sm">
    <p>&copy; 2023 Crypto Portfolio. All rights reserved.</p>
  </footer>

</div>

Dashboard_Agriculture_ForestGreen_Luxury

農業および農業 Web サイト向けに設計された、豪華をテーマにした複雑で、エレガントなフォレスト/グリーンのカラーパレットと、ダークモードをサポートする完全な応答性を特長としています。

開けるプレビュー

                <div class="min-h-screen bg-gray-100 dark:bg-gray-900 font-sans antialiased text-gray-800 dark:text-gray-200">
  <div class="flex flex-col lg:flex-row">
    <!-- Sidebar -->
    <aside class="w-full lg:w-64 bg-white dark:bg-gray-800 shadow-lg p-4 lg:p-6 flex flex-col items-center lg:items-start border-b lg:border-b-0 lg:border-r border-gray-200 dark:border-gray-700">
      <div class="flex items-center mb-6">
        <svg class="h-10 w-10 text-emerald-600 dark:text-emerald-400 mr-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.75 17L9.25 10H14.75L14.25 17H9.75Z" />
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 10L6.5 7H17.5L17 10M12 21V10" />
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5.5 15C5.5 15.5 5 16 4.5 16C4 16 3.5 15.5 3.5 15C3.5 14.5 4 14 4.5 14C5 14 5.5 14.5 5.5 15Z" />
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M18.5 15C18.5 15.5 19 16 19.5 16C20 16 20.5 15.5 20.5 15C20.5 14.5 20 14 19.5 14C19 14 18.5 14.5 18.5 15Z" />
        </svg>
        <h1 class="text-2xl font-semibold text-gray-900 dark:text-gray-100 hidden lg:block">FarmFlow</h1>
      </div>
      <nav class="w-full">
        <a href="#" class="flex items-center py-3 px-4 rounded-lg text-emerald-700 dark:text-emerald-300 bg-emerald-50 dark:bg-emerald-900/40 font-medium transition duration-200 hover:bg-emerald-100 dark:hover:bg-emerald-900 mb-2">
          <svg class="h-5 w-5 mr-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m0 0l7 7m-1.5-1.5L21 12m-9 9v-7.5" />
          </svg>
          Dashboard
        </a>
        <a href="#" class="flex items-center py-3 px-4 rounded-lg text-gray-600 dark:text-gray-400 transition duration-200 hover:bg-gray-50 dark:hover:bg-gray-700 mb-2">
          <svg class="h-5 w-5 mr-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 10l-2 1m0 0l-2-1m2 1v2.5M20 7l-2 1m2-1l-2-1m2 1v2.5M2 7l2 1m-2-1l2-1m-2 1v2.5M10 21h4c.54 0 1.05-.18 1.45-.5L19.5 17c.6-.45 1.5-.02 1.5.76V21c0 .55-.45 1-1 1H4c-.55 0-1-.45-1-1v-3.24c0-.78.9-1.21 1.5-.76L8.55 20.5c.4.32.91.5 1.45.5zm4.07-16.74C14.07 3.5 13.9 3 13.5 3c-.4 0-.57.5-.17 1.26l2.97 3.14a4 4 0 01-1.32.17H9.27A4 4 0 017.95 7.4L10.92 4.26c.4-.76.23-1.26-.17-1.26-.4 0-.57.5-.17 1.26l2.97 3.14a4 4 0 01-1.32.17H9.27A4 4 0 017.95 7.4L10.92 4.26z" />
          </svg>
          Crops
        </a>
        <a href="#" class="flex items-center py-3 px-4 rounded-lg text-gray-600 dark:text-gray-400 transition duration-200 hover:bg-gray-50 dark:hover:bg-gray-700 mb-2">
          <svg class="h-5 w-5 mr-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 14v3m4-3v3m4-3v3M3 21h18M3 10h18M3 7l9-4 9 4M4 10h16v11H4V10z" />
          </svg>
          Livestock
        </a>
        <a href="#" class="flex items-center py-3 px-4 rounded-lg text-gray-600 dark:text-gray-400 transition duration-200 hover:bg-gray-50 dark:hover:bg-gray-700 mb-2">
          <svg class="h-5 w-5 mr-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 17L13 21 21 13M9 3v13a4 4 0 004 4h4a2 2 0 002-2V9.586a1 1 0 00-.293-.707l-2.586-2.586A1 1 0 0015.414 6H13a2 2 0 00-2 2z" />
          </svg>
          Inventory
        </a>
        <a href="#" class="flex items-center py-3 px-4 rounded-lg text-gray-600 dark:text-gray-400 transition duration-200 hover:bg-gray-50 dark:hover:bg-gray-700 mb-2">
          <svg class="h-5 w-5 mr-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 9V7a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2m2 4v2m0 0h.01M17 17H7a2 2 0 01-2-2v-3a2 2 0 012-2h10a2 2 0 012 2v3a2 2 0 01-2 2zm0 0h.01" />
          </svg>
          Finance
        </a>
        <a href="#" class="flex items-center py-3 px-4 rounded-lg text-gray-600 dark:text-gray-400 transition duration-200 hover:bg-gray-50 dark:hover:bg-gray-700 mb-2">
          <svg class="h-5 w-5 mr-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37a1.724 1.724 0 002.572-1.065z" />
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
          </svg>
          Settings
        </a>
      </nav>

      <div class="mt-auto w-full pt-4 border-t border-gray-200 dark:border-gray-700 text-center lg:text-left">
        <div class="flex items-center justify-center lg:justify-start">
          <img class="h-10 w-10 rounded-full object-cover" src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar">
          <div class="ml-3 hidden lg:block">
            <p class="text-sm font-semibold">John Davis</p>
            <p class="text-xs text-gray-500 dark:text-gray-400">Farm Manager</p>
          </div>
        </div>
      </div>
    </aside>

    <!-- Main Content -->
    <main class="flex-1 p-4 lg:p-8 overflow-y-auto">
      <header class="flex flex-col sm:flex-row justify-between items-start sm:items-center mb-6">
        <h2 class="text-3xl font-extrabold text-gray-900 dark:text-gray-100 mb-2 sm:mb-0">Agricultural Overview</h2>
        <div class="flex items-center space-x-4">
          <button class="px-4 py-2 bg-emerald-600 dark:bg-emerald-700 text-white rounded-lg shadow-md hover:bg-emerald-700 dark:hover:bg-emerald-800 transition duration-200 focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:ring-opacity-50">
            <svg class="h-5 w-5 inline-block mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6" />
            </svg>
            Add New
          </button>
          <button class="text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100 p-2 rounded-full hover:bg-gray-200 dark:hover:bg-gray-700 transition duration-200">
            <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9" />
            </svg>
          </button>
        </div>
      </header>

      <!-- Analytics Cards -->
      <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
        <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-6 border border-gray-200 dark:border-gray-700">
          <div class="flex items-center justify-between mb-4">
            <p class="text-sm font-semibold text-gray-500 dark:text-gray-400">Total Yield (tons)</p>
            <svg class="h-6 w-6 text-emerald-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z" />
            </svg>
          </div>
          <p class="text-4xl font-bold text-gray-900 dark:text-gray-100">3,105</p>
          <div class="flex items-center mt-2">
            <span class="text-sm text-green-600 dark:text-green-400 font-semibold">+4.2%</span>
            <span class="text-xs text-gray-500 dark:text-gray-400 ml-2">vs. last month</span>
          </div>
        </div>

        <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-6 border border-gray-200 dark:border-gray-700">
          <div class="flex items-center justify-between mb-4">
            <p class="text-sm font-semibold text-gray-500 dark:text-gray-400">Active Fields</p>
            <svg class="h-6 w-6 text-yellow-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.828 0L6.343 16.657A8 8 0 1117.657 16.657z" />
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z" />
            </svg>
          </div>
          <p class="text-4xl font-bold text-gray-900 dark:text-gray-100">18</p>
          <div class="flex items-center mt-2">
            <span class="text-sm text-red-600 dark:text-red-400 font-semibold">-1.5%</span>
            <span class="text-xs text-gray-500 dark:text-gray-400 ml-2">since new season</span>
          </div>
        </div>

        <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-6 border border-gray-200 dark:border-gray-700">
          <div class="flex items-center justify-between mb-4">
            <p class="text-sm font-semibold text-gray-500 dark:text-gray-400">Healthy Livestock</p>
            <svg class="h-6 w-6 text-indigo-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.001 12.001 0 002.928 12c.045 4.383 3.633 7.792 8.52 8.167S22.03 16.03 21.072 12A12.001 12.001 0 0019.618 7.984z" />
            </svg>
          </div>
          <p class="text-4xl font-bold text-gray-900 dark:text-gray-100">452</p>
          <div class="flex items-center mt-2">
            <span class="text-sm text-green-600 dark:text-green-400 font-semibold">+0.8%</span>
            <span class="text-xs text-gray-500 dark:text-gray-400 ml-2">health rate</span>
          </div>
        </div>

        <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-6 border border-gray-200 dark:border-gray-700">
          <div class="flex items-center justify-between mb-4">
            <p class="text-sm font-semibold text-gray-500 dark:text-gray-400">Resources Used</p>
            <svg class="h-6 w-6 text-purple-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 11V7l4-6 4 6v4m0 8a2 2 0 11-4 0 2 2 0 014 0zm-4-8c0 .828.672 1.5 1.5 1.5S15 11.828 15 11V6a1 1 0 00-1-1h-4a1 1 0 00-1 1v5c0 .828.672 1.5 1.5 1.5zm1.5-1.5z" />
            </svg>
          </div>
          <p class="text-4xl font-bold text-gray-900 dark:text-gray-100">$8,750</p>
          <div class="flex items-center mt-2">
            <span class="text-sm text-red-600 dark:text-red-400 font-semibold">+7.1%</span>
            <span class="text-xs text-gray-500 dark:text-gray-400 ml-2">vs. average</span>
          </div>
        </div>
      </div>

      <!-- Main Charts and Tables -->
      <div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-8">
        <!-- Crop Health Chart -->
        <div class="lg:col-span-2 bg-white dark:bg-gray-800 rounded-lg shadow-lg p-6 border border-gray-200 dark:border-gray-700">
          <h3 class="text-xl font-semibold mb-4 text-gray-900 dark:text-gray-100">Crop Health & Growth</h3>
          <div class="relative h-64 w-full flex items-center justify-center">
            <img src="https://picsum.photos/600/300?random=1" alt="Placeholder chart for crop health" class="w-full h-full object-cover rounded-md opacity-70" />
            <div class="absolute text-lg text-gray-500 dark:text-gray-400">[Placeholder Chart Area]</div>
          </div>
          <p class="text-sm text-gray-500 dark:text-gray-400 mt-4">Visual representation of crop health indicators and growth trends over time.</p>
        </div>

        <!-- Recent Activities -->
        <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-6 border border-gray-200 dark:border-gray-700">
          <h3 class="text-xl font-semibold mb-4 text-gray-900 dark:text-gray-100">Recent Activities</h3>
          <ul class="divide-y divide-gray-200 dark:divide-gray-700">
            <li class="py-3 flex items-center">
              <span class="text-emerald-500 mr-3">•</span>
              <div>
                <p class="text-sm font-medium">Harvested Wheat Field A</p>
                <p class="text-xs text-gray-500 dark:text-gray-400">2 hours ago - 1.5 tons</p>
              </div>
            </li>
            <li class="py-3 flex items-center">
              <span class="text-blue-500 mr-3">•</span>
              <div>
                <p class="text-sm font-medium">Watering System Check</p>
                <p class="text-xs text-gray-500 dark:text-gray-400">Yesterday - Field B</p>
              </div>
            </li>
            <li class="py-3 flex items-center">
              <span class="text-yellow-500 mr-3">•</span>
              <div>
                <p class="text-sm font-medium">Purchased new fertilizer batch</p>
                <p class="text-xs text-gray-500 dark:text-gray-400">2 days ago - $500</p>
              </div>
            </li>
            <li class="py-3 flex items-center">
              <span class="text-purple-500 mr-3">•</span>
              <div>
                <p class="text-sm font-medium">Vaccinated 10 cattle</p>
                <p class="text-xs text-gray-500 dark:text-gray-400">3 days ago - Barn 2</p>
              </div>
            </li>
          </ul>
        </div>
      </div>

      <!-- Upcoming Tasks & Weather -->
      <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
        <!-- Upcoming Tasks -->
        <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-6 border border-gray-200 dark:border-gray-700">
          <h3 class="text-xl font-semibold mb-4 text-gray-900 dark:text-gray-100">Upcoming Tasks</h3>
          <ul class="divide-y divide-gray-200 dark:divide-gray-700">
            <li class="py-3 flex items-start">
              <input type="checkbox" class="mt-1 mr-3 h-4 w-4 text-emerald-600 dark:text-emerald-400 form-checkbox focus:ring-emerald-500 rounded" />
              <div>
                <p class="font-medium">Soil Analysis - Field C</p>
                <p class="text-sm text-gray-500 dark:text-gray-400">Due: 24th Oct, 2023</p>
              </div>
            </li>
            <li class="py-3 flex items-start">
              <input type="checkbox" class="mt-1 mr-3 h-4 w-4 text-emerald-600 dark:text-emerald-400 form-checkbox focus:ring-emerald-500 rounded" />
              <div>
                <p class="font-medium">Plant Soybeans - Field D</p>
                <p class="text-sm text-gray-500 dark:text-gray-400">Due: 26th Oct, 2023</p>
              </div>
            </li>
            <li class="py-3 flex items-start">
              <input type="checkbox" class="mt-1 mr-3 h-4 w-4 text-emerald-600 dark:text-emerald-400 form-checkbox focus:ring-emerald-500 rounded" />
              <div>
                <p class="font-medium">Fertilize Orchard</p>
                <p class="text-sm text-gray-500 dark:text-gray-400">Due: 30th Oct, 2023</p>
              </div>
            </li>
          </ul>
        </div>

        <!-- Weather Forecast -->
        <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-6 border border-gray-200 dark:border-gray-700">
          <h3 class="text-xl font-semibold mb-4 text-gray-900 dark:text-gray-100">Weather Forecast</h3>
          <div class="flex items-center justify-between mb-4">
            <div class="flex items-center">
              <svg class="h-12 w-12 text-yellow-500 mr-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 7l-8-4-8 4m16 0l-8 4m-8-4v10l8 4 8-4V7m-8 4V4" />
              </svg>
              <div>
                <p class="text-4xl font-bold">18°C</p>
                <p class="text-gray-600 dark:text-gray-400">Partly Cloudy</p>
              </div>
            </div>
            <p class="text-lg font-semibold text-gray-800 dark:text-gray-200">Today</p>
          </div>
          <div class="grid grid-cols-3 gap-4 text-center text-gray-600 dark:text-gray-400">
            <div>
              <p class="text-sm">Tomorrow</p>
              <svg class="h-8 w-8 text-blue-500 mx-auto mt-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 15C3 15.5 3 16 3.5 16.5C4 17 4.5 17 5 17H19C19.5 17 20 16.5 20 16V10M17 14L12 9 7 14M12 9V3" />
              </svg>
              <p class="text-sm">16°C</p>
            </div>
            <div>
              <p class="text-sm">Fri</p>
              <svg class="h-8 w-8 text-gray-500 mx-auto mt-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 11.5c0 1.93-1.57 3.5-3.5 3.5S10 13.43 10 11.5V10M15 10c0 1.1-.9 2-2 2s-2-.9-2-2m-1 7l4 4 4-4m-4 4V13" />
              </svg>
              <p class="text-sm">15°C</p>
            </div>
            <div>
              <p class="text-sm">Sat</p>
              <svg class="h-8 w-8 text-green-500 mx-auto mt-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 3v18M18 13.06L12 18 6 13.06M6 10L12 5 18 10" />
              </svg>
              <p class="text-sm">20°C</p>
            </div>
          </div>
        </div>
      </div>
    </main>
  </div>
</div>

1 ... 16 17 18 19 20 ... 335

検索コンポーネント

カテゴリ

すべてのコンポーネント