Search Components

All Components

Browse all available Tailwind CSS components

Swiss_International_Typography_SAAS_Layout

A complex, responsive SaaS application layout using Swiss/International Typography design principles with an Autumn color scheme. Features a sidebar navigation, header, main content area, and widgets, all with dark mode support.

Open Preview

                <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>

Progress Indicators Component

Paper/Print-inspired progress indicators for a marketplace, featuring candy/sweet colors. Complex design with multiple steps, responsive layout, and dark mode support.

Open Preview

                <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>

Image Lightbox Component

A responsive image lightbox component with a watercolor/artistic design, muted colors, and dark mode support, suitable for educational platforms.

Open Preview

                <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 Healthcare Navigation

A complex, responsive navigation component for healthcare/medical applications, featuring a monospace/developer-inspired design with warm neutrals, dark mode support, and interactive elements.

Open Preview

                <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-commerce Components Component

A complex e-commerce component for travel/tourism websites, featuring neon/glow effects, an autumn color scheme, and full responsiveness with dark mode support.

Open Preview

                <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>

Social Components Component

A complex, industrial-style social component for booking and reservation systems, featuring cool neutrals, exposed elements, and dark mode support. Designed for appointment and reservation systems.

Open Preview

                <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 Component

A cyberpunk-inspired product review component for fashion/beauty products, featuring earth-tone accents on a dark background. It's responsive and includes dark mode support.

Open Preview

                <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>

Checkout Form Component - Neumorphic Corporate Blues

A complex, responsive checkout form component with a neumorphic design style, using corporate blue tones. It supports dark mode and is suitable for business/corporate websites.

Open Preview

                <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

A set of responsive, skeuomorphic cards designed for cryptocurrency or blockchain applications. Features pastel colors, subtle shadows and highlights, and dark mode support.

Open Preview

                <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

A complex, luxury-themed dashboard component designed for agriculture and farming websites, featuring an elegant forest/green color palette and full responsiveness with dark mode support.

Open Preview

                <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

Search Components

Categories

All Components