Search Components

All Components

Browse all available Tailwind CSS components

Wishlist Component

A simple, responsive wishlist component with a monospace/developer aesthetic tailored for sports/fitness applications. Features black and white with an accent color, dark mode support, and uses semantic HTML.

Open Preview

                <div class="font-['JetBrains_Mono',_monospace] bg-gray-100 text-gray-900 dark:bg-gray-900 dark:text-gray-100 p-4 sm:p-6 lg:p-8 min-h-screen">
  <link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;700&display=swap" rel="stylesheet">

  <div class="max-w-4xl mx-auto bg-white dark:bg-gray-800 shadow-lg rounded-lg overflow-hidden border border-gray-200 dark:border-gray-700">
    <header class="bg-gray-900 dark:bg-gray-950 text-emerald-400 p-4 border-b-2 border-emerald-400">
      <h1 class="text-xl sm:text-2xl font-bold uppercase tracking-wide text-center">{'//'} TEAM GEAR WISHLIST</h1>
    </header>

    <div class="p-4 sm:p-6">
      <p class="text-sm mb-4 text-gray-700 dark:text-gray-300">{'#'}items.count=3; {'#'}total_value=$235.97</p>

      <ul class="divide-y divide-gray-200 dark:divide-gray-700">
        <!-- Wishlist Item 1 -->
        <li class="py-4 flex flex-col sm:flex-row items-start sm:items-center">
          <img class="w-24 h-24 object-cover object-center rounded-md mr-4 mb-2 sm:mb-0 border border-gray-300 dark:border-gray-600" src="https://picsum.photos/id/1018/150/150" alt="Basketball">
          <div class="flex-1">
            <h2 class="font-semibold text-lg text-emerald-500 dark:text-emerald-400">Basketball // OFFICIAL_SIZE</h2>
            <p class="text-gray-600 dark:text-gray-400 text-sm">{'>>'} For practice &amp; games. Durable composite leather.</p>
            <p class="text-base font-bold mt-1">$59.99</p>
          </div>
          <button class="mt-4 sm:mt-0 ml-0 sm:ml-4 px-4 py-2 bg-red-600 text-white rounded-md hover:bg-red-700 transition-colors duration-200 text-sm focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-offset-2 focus:rin-offset-gray-100 dark:focus:ring-offset-gray-900">
            REMOVE
          </button>
        </li>

        <!-- Wishlist Item 2 -->
        <li class="py-4 flex flex-col sm:flex-row items-start sm:items-center">
          <img class="w-24 h-24 object-cover object-center rounded-md mr-4 mb-2 sm:mb-0 border border-gray-300 dark:border-gray-600" src="https://picsum.photos/id/237/150/150" alt="Running Shoes">
          <div class="flex-1">
            <h2 class="font-semibold text-lg text-emerald-500 dark:text-emerald-400">Running Shoes // ATHLETE_MODEL</h2>
            <p class="text-gray-600 dark:text-gray-400 text-sm">{'>>'} Lightweight, high-performance trainers.</p>
            <p class="text-base font-bold mt-1">$129.99</p>
          </div>
          <button class="mt-4 sm:mt-0 ml-0 sm:ml-4 px-4 py-2 bg-red-600 text-white rounded-md hover:bg-red-700 transition-colors duration-200 text-sm focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-offset-2 focus:rin-offset-gray-100 dark:focus:ring-offset-gray-900">
            REMOVE
          </button>
        </li>

        <!-- Wishlist Item 3 -->
        <li class="py-4 flex flex-col sm:flex-row items-start sm:items-center">
          <img class="w-24 h-24 object-cover object-center rounded-md mr-4 mb-2 sm:mb-0 border border-gray-300 dark:border-gray-600" src="https://picsum.photos/id/1004/150/150" alt="Water Bottle">
          <div class="flex-1">
            <h2 class="font-semibold text-lg text-emerald-500 dark:text-emerald-400">Water Bottle // INSULATED_XL</h2>
            <p class="text-gray-600 dark:text-gray-400 text-sm">{'>>'} Keeps drinks cold for hours. BPA-free.</p>
            <p class="text-base font-bold mt-1">$29.99</p>
          </div>
          <button class="mt-4 sm:mt-0 ml-0 sm:ml-4 px-4 py-2 bg-red-600 text-white rounded-md hover:bg-red-700 transition-colors duration-200 text-sm focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-offset-2 focus:rin-offset-gray-100 dark:focus:ring-offset-gray-900">
            REMOVE
          </button>
        </li>
      </ul>

      <div class="mt-6 pt-4 border-t border-gray-200 dark:border-gray-700 flex flex-col sm:flex-row justify-between items-center">
        <p class="text-lg font-bold uppercase text-gray-800 dark:text-gray-200 mb-2 sm:mb-0">{'TOTAL: '} <span class="text-emerald-500 dark:text-emerald-400">$235.97</span></p>
        <button class="px-6 py-3 bg-emerald-500 text-white font-bold rounded-md uppercase hover:bg-emerald-600 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:ring-offset-2 focus:rin-offset-gray-100 dark:focus:ring-offset-gray-900">
          ADD MORE ITEMS //
        </button>
      </div>
    </div>
  </div>
</div>

Hamburger Menu Component

A minimalist and responsive hamburger menu component with a gradient rainbow color scheme, designed for dating/social platforms, featuring dark mode support.

Open Preview

                <div class="relative bg-white dark:bg-gray-900 md:flex md:items-center md:justify-between p-4 shadow-md">
  <div class="flex items-center justify-between">
    <a href="#" class="text-2xl font-bold bg-gradient-to-r from-red-500 via-yellow-500 to-indigo-500 text-transparent bg-clip-text">
      Connectify
    </a>
    <!-- Mobile menu button -->
    <button id="menu-button" class="md:hidden focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 dark:focus:ring-offset-gray-900 dark:focus:ring-indigo-400" aria-label="Toggle menu">
      <svg class="w-6 h-6 text-gray-800 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>
  </div>

  <!-- Mobile menu content -->
  <nav id="mobile-menu" class="hidden md:flex md:items-center md:space-x-8 mt-4 md:mt-0">
    <a href="#matches" class="block px-4 py-2 mt-2 text-sm font-semibold text-gray-800 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-800 rounded-lg md:inline md:mt-0">Matches</a>
    <a href="#chat" class="block px-4 py-2 mt-2 text-sm font-semibold text-gray-800 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-800 rounded-lg md:inline md:mt-0">Chat</a>
    <a href="#discover" class="block px-4 py-2 mt-2 text-sm font-semibold text-gray-800 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-800 focus:outline-none focus:shadow-outline rounded-lg md:inline md:mt-0">Discover</a>
    <a href="#profile" class="block px-4 py-2 mt-2 text-sm font-semibold text-gray-800 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-800 rounded-lg md:inline md:mt-0">Profile</a>
    <a href="#settings" class="block px-4 py-2 mt-2 text-sm font-semibold text-gray-800 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-800 rounded-lg md:inline md:mt-0">Settings</a>
  </nav>
</div>

<script>
  document.addEventListener('DOMContentLoaded', function() {
    const menuButton = document.getElementById('menu-button');
    const mobileMenu = document.getElementById('mobile-menu');

    menuButton.addEventListener('click', function() {
      mobileMenu.classList.toggle('hidden');
    });
  });
</script>

Glassmorphism Rainbow Back to Top Button for Agriculture

A complex, responsive 'Back to Top' button component with a glassmorphism design and a rainbow gradient, tailored for agriculture/farming websites. Features blur effects and dark mode support.

Open Preview

                <div class="fixed bottom-6 right-6 z-50">
  <!-- Button to scroll to top (actual JS functionality would be added for this) -->
  <button aria-label="Scroll to top" class="group relative overflow-hidden rounded-full p-0.5 focus:outline-none focus:ring-2 focus:ring-offset-2 dark:focus:ring-offset-gray-900 focus:ring-blue-500 transition-all duration-300 transform hover:scale-105 active:scale-95">
    <div class="absolute inset-0 bg-gradient-to-r from-red-500 via-yellow-500 to-green-500 opacity-75 group-hover:opacity-100 transition-opacity duration-300"></div>
    <div class="relative bg-white dark:bg-gray-800 backdrop-blur-md bg-opacity-20 dark:bg-opacity-20 rounded-full px-4 py-2 flex items-center justify-center space-x-2 border border-white border-opacity-30 dark:border-gray-700 dark:border-opacity-30 shadow-lg">
      <svg class="h-6 w-6 text-gray-800 dark:text-gray-100 group-hover:text-white transition-colors duration-300" fill="none" viewBox="0 0 24 24" stroke="currentColor">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 10l7-7m0 0l7 7m-7-7v18" />
      </svg>
      <span class="hidden sm:inline text-sm font-semibold text-gray-800 dark:text-gray-100 group-hover:text-white transition-colors duration-300">
        To the Fields!
      </span>
    </div>
  </button>
</div>

Luxury/Premium Data Table for Non-Profit/Charity

An elegant, responsive data table component designed with a luxury/premium feel using corporate blue tones, suitable for non-profit and charitable organizations. Includes dark mode support and a complex interface for displaying data with actions.

Open Preview

                <div class="font-sans bg-gray-100 text-gray-900 dark:bg-gray-900 dark:text-gray-100 p-4 sm:p-8 rounded-xl shadow-lg transition-colors duration-300">
  <div class="max-w-7xl mx-auto">
    <div class="flex flex-col sm:flex-row items-center justify-between mb-6">
      <h2 class="text-3xl font-extrabold text-blue-800 dark:text-blue-300 mb-4 sm:mb-0">Donation Impact Dashboard</h2>
      <div class="flex space-x-3">
        <button class="px-4 py-2 bg-blue-700 text-white rounded-lg hover:bg-blue-800 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50 dark:bg-blue-600 dark:hover:bg-blue-700 transition-colors duration-300">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 inline-block mr-2" viewBox="0 0 20 20" fill="currentColor">
            <path fill-rule="evenodd" d="M3 17a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zm3.293-7.707a1 1 0 011.414 0L9 10.586V3a1 1 0 112 0v7.586l1.293-1.293a1 1 0 111.414 1.414l-3 3a1 1 0 01-1.414 0l-3-3a1 1 0 010-1.414z" clip-rule="evenodd" />
          </svg>
          Export Data
        </button>
        <button class="px-4 py-2 border border-blue-700 text-blue-700 rounded-lg hover:bg-blue-50 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50 dark:border-blue-400 dark:text-blue-400 dark:hover:bg-gray-700 transition-colors duration-300">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 inline-block mr-2" viewBox="0 0 20 20" fill="currentColor">
            <path d="M10 4a2 2 0 00-2 2v2H6a2 2 0 00-2 2v8a2 2 0 002 2h8a2 2 0 002-2v-8a2 2 0 00-2-2h-2V6a2 2 0 00-2-2zM6 10h8v8H6v-8zm4-4h2v2h-2V6z" />
          </svg>
          Add New Impact
        </button>
      </div>
    </div>

    <div class="mb-6 flex flex-col sm:flex-row items-center justify-between space-y-4 sm:space-y-0 sm:space-x-4">
      <div class="relative w-full sm:w-1/3">
        <input type="text" placeholder="Search donations..." class="w-full px-4 py-2 pl-10 rounded-lg border border-gray-300 dark:border-gray-700 bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 shadow-sm focus:ring-blue-500 focus:border-blue-500 transition-colors duration-300">
        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 absolute left-3 top-1/2 -translate-y-1/2 text-gray-400" viewBox="0 0 20 20" fill="currentColor">
          <path fill-rule="evenodd" d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z" clip-rule="evenodd" />
        </svg>
      </div>
      <div class="flex flex-col sm:flex-row w-full sm:w-auto space-y-4 sm:space-y-0 sm:space-x-4">
        <select class="w-full sm:w-auto px-4 py-2 border border-gray-300 dark:border-gray-700 rounded-lg bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 shadow-sm focus:ring-blue-500 focus:border-blue-500 transition-colors duration-300">
          <option>Filter by Program</option>
          <option>Education</option>
          <option>Healthcare</option>
          <option>Community Dev</option>
        </select>
        <select class="w-full sm:w-auto px-4 py-2 border border-gray-300 dark:border-gray-700 rounded-lg bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 shadow-sm focus:ring-blue-500 focus:border-blue-500 transition-colors duration-300">
          <option>Sort by Date</option>
          <option>Latest</option>
          <option>Oldest</option>
          <option>Amount (High)</option>
          <option>Amount (Low)</option>
        </select>
      </div>
    </div>

    <div class="overflow-x-auto rounded-lg shadow-xl border border-gray-200 dark:border-gray-800">
      <table class="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
        <thead class="bg-blue-600 dark:bg-blue-900 text-white">
          <tr>
            <th scope="col" class="px-6 py-3 text-left text-xs font-semibold uppercase tracking-wider">
              Donor
            </th>
            <th scope="col" class="px-6 py-3 text-left text-xs font-semibold uppercase tracking-wider">
              Amount
            </th>
            <th scope="col" class="px-6 py-3 text-left text-xs font-semibold uppercase tracking-wider">
              Date
            </th>
            <th scope="col" class="px-6 py-3 text-left text-xs font-semibold uppercase tracking-wider">
              Program
            </th>
            <th scope="col" class="px-6 py-3 text-left text-xs font-semibold uppercase tracking-wider">
              Status
            </th>
            <th scope="col" class="relative px-6 py-3">
              <span class="sr-only">Actions</span>
            </th>
          </tr>
        </thead>
        <tbody class="bg-white divide-y divide-gray-200 dark:bg-gray-800 dark:divide-gray-700">

          <!-- Row 1 -->
          <tr>
            <td class="px-6 py-4 whitespace-nowrap">
              <div class="flex items-center">
                <div class="flex-shrink-0 h-10 w-10">
                  <img class="h-10 w-10 rounded-full object-cover" src="https://randomuser.me/api/portraits/women/68.jpg" alt="">
                </div>
                <div class="ml-4">
                  <div class="text-sm font-medium text-gray-900 dark:text-gray-100">Alice Johnson</div>
                  <div class="text-sm text-gray-500 dark:text-gray-400">[email protected]</div>
                </div>
              </div>
            </td>
            <td class="px-6 py-4 whitespace-nowrap">
              <div class="text-sm text-gray-900 dark:text-gray-100 font-semibold">$5,000</div>
            </td>
            <td class="px-6 py-4 whitespace-nowrap">
              <div class="text-sm text-gray-500 dark:text-gray-400">2023-11-15</div>
            </td>
            <td class="px-6 py-4 whitespace-nowrap">
              <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800 dark:bg-green-800 dark:text-green-100">
                Education
              </span>
            </td>
            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-400">
              Completed
            </td>
            <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
              <a href="#" class="text-blue-600 hover:text-blue-900 dark:text-blue-400 dark:hover:text-blue-300 mr-3">View</a>
              <a href="#" class="text-red-600 hover:text-red-900 dark:text-red-400 dark:hover:text-red-300">Delete</a>
            </td>
          </tr>

          <!-- Row 2 -->
          <tr>
            <td class="px-6 py-4 whitespace-nowrap">
              <div class="flex items-center">
                <div class="flex-shrink-0 h-10 w-10">
                  <img class="h-10 w-10 rounded-full object-cover" src="https://randomuser.me/api/portraits/men/32.jpg" alt="">
                </div>
                <div class="ml-4">
                  <div class="text-sm font-medium text-gray-900 dark:text-gray-100">Brendan Smith</div>
                  <div class="text-sm text-gray-500 dark:text-gray-400">[email protected]</div>
                </div>
              </div>
            </td>
            <td class="px-6 py-4 whitespace-nowrap">
              <div class="text-sm text-gray-900 dark:text-gray-100 font-semibold">$10,000</div>
            </td>
            <td class="px-6 py-4 whitespace-nowrap">
              <div class="text-sm text-gray-500 dark:text-gray-400">2023-11-10</div>
            </td>
            <td class="px-6 py-4 whitespace-nowrap">
              <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-blue-100 text-blue-800 dark:bg-blue-800 dark:text-blue-100">
                Healthcare
              </span>
            </td>
            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-400">
              Completed
            </td>
            <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
              <a href="#" class="text-blue-600 hover:text-blue-900 dark:text-blue-400 dark:hover:text-blue-300 mr-3">View</a>
              <a href="#" class="text-red-600 hover:text-red-900 dark:text-red-400 dark:hover:text-red-300">Delete</a>
            </td>
          </tr>

          <!-- Row 3 -->
          <tr>
            <td class="px-6 py-4 whitespace-nowrap">
              <div class="flex items-center">
                <div class="flex-shrink-0 h-10 w-10">
                  <img class="h-10 w-10 rounded-full object-cover" src="https://randomuser.me/api/portraits/women/12.jpg" alt="">
                </div>
                <div class="ml-4">
                  <div class="text-sm font-medium text-gray-900 dark:text-gray-100">Catherine Davis</div>
                  <div class="text-sm text-gray-500 dark:text-gray-400">[email protected]</div>
                </div>
              </div>
            </td>
            <td class="px-6 py-4 whitespace-nowrap">
              <div class="text-sm text-gray-900 dark:text-gray-100 font-semibold">$750</div>
            </td>
            <td class="px-6 py-4 whitespace-nowrap">
              <div class="text-sm text-gray-500 dark:text-gray-400">2023-11-08</div>
            </td>
            <td class="px-6 py-4 whitespace-nowrap">
              <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-orange-100 text-orange-800 dark:bg-orange-800 dark:text-orange-100">
                Community Dev
              </span>
            </td>
            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-400">
              Pending
            </td>
            <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
              <a href="#" class="text-blue-600 hover:text-blue-900 dark:text-blue-400 dark:hover:text-blue-300 mr-3">View</a>
              <a href="#" class="text-red-600 hover:text-red-900 dark:text-red-400 dark:hover:text-red-300">Delete</a>
            </td>
          </tr>

          <!-- Row 4 -->
          <tr>
            <td class="px-6 py-4 whitespace-nowrap">
              <div class="flex items-center">
                <div class="flex-shrink-0 h-10 w-10">
                  <img class="h-10 w-10 rounded-full object-cover" src="https://randomuser.me/api/portraits/men/45.jpg" alt="">
                </div>
                <div class="ml-4">
                  <div class="text-sm font-medium text-gray-900 dark:text-gray-100">David Lee</div>
                  <div class="text-sm text-gray-500 dark:text-gray-400">[email protected]</div>
                </div>
              </div>
            </td>
            <td class="px-6 py-4 whitespace-nowrap">
              <div class="text-sm text-gray-900 dark:text-gray-100 font-semibold">$2,500</div>
            </td>
            <td class="px-6 py-4 whitespace-nowrap">
              <div class="text-sm text-gray-500 dark:text-gray-400">2023-11-01</div>
            </td>
            <td class="px-6 py-4 whitespace-nowrap">
              <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800 dark:bg-green-800 dark:text-green-100">
                Education
              </span>
            </td>
            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-400">
              Completed
            </td>
            <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
              <a href="#" class="text-blue-600 hover:text-blue-900 dark:text-blue-400 dark:hover:text-blue-300 mr-3">View</a>
              <a href="#" class="text-red-600 hover:text-red-900 dark:text-red-400 dark:hover:text-red-300">Delete</a>
            </td>
          </tr>

          <!-- Row 5 -->
          <tr>
            <td class="px-6 py-4 whitespace-nowrap">
              <div class="flex items-center">
                <div class="flex-shrink-0 h-10 w-10">
                  <img class="h-10 w-10 rounded-full object-cover" src="https://randomuser.me/api/portraits/women/90.jpg" alt="">
                </div>
                <div class="ml-4">
                  <div class="text-sm font-medium text-gray-900 dark:text-gray-100">Ella Fitzgerald</div>
                  <div class="text-sm text-gray-500 dark:text-gray-400">[email protected]</div>
                </div>
              </div>
            </td>
            <td class="px-6 py-4 whitespace-nowrap">
              <div class="text-sm text-gray-900 dark:text-gray-100 font-semibold">$1,200</div>
            </td>
            <td class="px-6 py-4 whitespace-nowrap">
              <div class="text-sm text-gray-500 dark:text-gray-400">2023-10-25</div>
            </td>
            <td class="px-6 py-4 whitespace-nowrap">
              <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-blue-100 text-blue-800 dark:bg-blue-800 dark:text-blue-100">
                Healthcare
              </span>
            </td>
            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-400">
              Completed
            </td>
            <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
              <a href="#" class="text-blue-600 hover:text-blue-900 dark:text-blue-400 dark:hover:text-blue-300 mr-3">View</a>
              <a href="#" class="text-red-600 hover:text-red-900 dark:text-red-400 dark:hover:text-red-300">Delete</a>
            </td>
          </tr>

        </tbody>
      </table>
    </div>

    <nav class="mt-6 flex items-center justify-between" aria-label="Pagination">
      <div class="flex flex-1 justify-between sm:hidden">
        <a href="#" class="relative inline-flex items-center px-4 py-2 border border-gray-300 dark:border-gray-700 text-sm font-medium rounded-md text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-800 hover:bg-gray-100 dark:hover:bg-gray-700">
          Previous
        </a>
        <a href="#" class="ml-3 relative inline-flex items-center px-4 py-2 border border-gray-300 dark:border-gray-700 text-sm font-medium rounded-md text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-800 hover:bg-gray-100 dark:hover:bg-gray-700">
          Next
        </a>
      </div>
      <div class="hidden sm:flex sm:flex-1 sm:items-center sm:justify-between">
        <div>
          <p class="text-sm text-gray-700 dark:text-gray-300">
            Showing
            <span class="font-medium">1</span>
            to
            <span class="font-medium">5</span>
            of
            <span class="font-medium">100</span>
            results
          </p>
        </div>
        <div>
          <nav class="relative z-0 inline-flex -space-x-px rounded-md shadow-sm" aria-label="Pagination">
            <a href="#" class="relative inline-flex items-center px-2 py-2 rounded-l-md border border-gray-300 dark:border-gray-700 bg-white dark:bg-gray-800 text-sm font-medium text-gray-500 dark:text-gray-400 hover:bg-gray-50 dark:hover:bg-gray-700">
              <span class="sr-only">Previous</span>
              <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="M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z" clip-rule="evenodd" />
              </svg>
            </a>
            <a href="#" aria-current="page" class="z-10 bg-blue-50 border-blue-500 text-blue-600 dark:bg-blue-700 dark:border-blue-600 dark:text-white relative inline-flex items-center px-4 py-2 border text-sm font-medium">
              1
            </a>
            <a href="#" class="bg-white dark:bg-gray-800 border-gray-300 dark:border-gray-700 text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-700 relative inline-flex items-center px-4 py-2 border text-sm font-medium">
              2
            </a>
            <a href="#" class="bg-white dark:bg-gray-800 border-gray-300 dark:border-gray-700 text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-700 relative inline-flex items-center px-4 py-2 border text-sm font-medium">
              3
            </a>
            <span class="relative inline-flex items-center px-4 py-2 border border-gray-300 dark:border-gray-700 bg-white dark:bg-gray-800 text-sm font-medium text-gray-700 dark:text-gray-300">
              ...
            </span>
            <a href="#" class="bg-white dark:bg-gray-800 border-gray-300 dark:border-gray-700 text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-700 relative inline-flex items-center px-4 py-2 border text-sm font-medium">
              9
            </a>
            <a href="#" class="bg-white dark:bg-gray-800 border-gray-300 dark:border-gray-700 text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-700 relative inline-flex items-center px-4 py-2 border text-sm font-medium">
              10
            </a>
            <a href="#" class="relative inline-flex items-center px-2 py-2 rounded-r-md border border-gray-300 dark:border-gray-700 bg-white dark:bg-gray-800 text-sm font-medium text-gray-500 dark:text-gray-400 hover:bg-gray-50 dark:hover:bg-gray-700">
              <span class="sr-only">Next</span>
              <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="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd" />
              </svg>
            </a>
          </nav>
        </div>
      </div>
    </nav>
  </div>
</div>

Image Lightbox Component

A responsive image lightbox component with cool neutral colors, gradient transitions, and dark mode support, suitable for professional consulting services.

Open Preview

                <div class="flex items-center justify-center min-h-screen bg-gradient-to-br from-gray-100 via-gray-50 to-gray-200 dark:from-gray-900 dark:via-gray-850 dark:to-gray-800 p-4 font-sans">
  <div class="container mx-auto p-4 md:p-8 bg-white dark:bg-gray-900 rounded-2xl shadow-xl space-y-8 max-w-6xl transition-all duration-500 ease-in-out">
    <h2 class="text-4xl md:text-5xl font-extrabold text-center bg-clip-text text-transparent bg-gradient-to-r from-blue-600 to-sky-400 dark:from-blue-400 dark:to-sky-200 py-2 leading-tight transition-colors duration-500">
      Our Projects in Focus
    </h2>
    <p class="text-lg text-center text-gray-600 dark:text-gray-300 mb-8 max-w-3xl mx-auto transition-colors duration-500">
      Explore our impactful work through a collection of high-resolution project images. Click to enlarge and discover the details.
    </p>

    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6 md:gap-8">
      <!-- Lightbox Item 1 -->
      <div class="group relative overflow-hidden rounded-xl shadow-lg transition-all duration-300 ease-in-out transform hover:scale-105 hover:shadow-2xl cursor-pointer" onclick="document.getElementById('lightbox-modal-1').classList.remove('hidden'); document.body.classList.add('overflow-hidden')">
        <img src="https://picsum.photos/id/101/600/400" alt="Project Image 1" class="w-full h-56 object-cover object-center transition-all duration-500 ease-in-out group-hover:filter group-hover:brightness-75 group-hover:saturate-150">
        <div class="absolute inset-0 bg-gradient-to-t from-gray-900 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-end p-4">
          <p class="text-white text-xl font-semibold opacity-0 group-hover:opacity-100 transform translate-y-4 group-hover:translate-y-0 transition-all duration-300 ease-out">Strategic Insight</p>
        </div>
      </div>

      <!-- Lightbox Item 2 -->
      <div class="group relative overflow-hidden rounded-xl shadow-lg transition-all duration-300 ease-in-out transform hover:scale-105 hover:shadow-2xl cursor-pointer" onclick="document.getElementById('lightbox-modal-2').classList.remove('hidden'); document.body.classList.add('overflow-hidden')">
        <img src="https://picsum.photos/id/102/600/400" alt="Project Image 2" class="w-full h-56 object-cover object-center transition-all duration-500 ease-in-out group-hover:filter group-hover:brightness-75 group-hover:saturate-150">
        <div class="absolute inset-0 bg-gradient-to-t from-gray-900 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-end p-4">
          <p class="text-white text-xl font-semibold opacity-0 group-hover:opacity-100 transform translate-y-4 group-hover:translate-y-0 transition-all duration-300 ease-out">Innovation & Growth</p>
        </div>
      </div>

      <!-- Lightbox Item 3 -->
      <div class="group relative overflow-hidden rounded-xl shadow-lg transition-all duration-300 ease-in-out transform hover:scale-105 hover:shadow-2xl cursor-pointer" onclick="document.getElementById('lightbox-modal-3').classList.remove('hidden'); document.body.classList.add('overflow-hidden')">
        <img src="https://picsum.photos/id/103/600/400" alt="Project Image 3" class="w-full h-56 object-cover object-center transition-all duration-500 ease-in-out group-hover:filter group-hover:brightness-75 group-hover:saturate-150">
        <div class="absolute inset-0 bg-gradient-to-t from-gray-900 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-end p-4">
          <p class="text-white text-xl font-semibold opacity-0 group-hover:opacity-100 transform translate-y-4 group-hover:translate-y-0 transition-all duration-300 ease-out">Client Success</p>
        </div>
      </div>

      <!-- Lightbox Item 4 -->
      <div class="group hidden sm:block relative overflow-hidden rounded-xl shadow-lg transition-all duration-300 ease-in-out transform hover:scale-105 hover:shadow-2xl cursor-pointer" onclick="document.getElementById('lightbox-modal-4').classList.remove('hidden'); document.body.classList.add('overflow-hidden')">
        <img src="https://picsum.photos/id/104/600/400" alt="Project Image 4" class="w-full h-56 object-cover object-center transition-all duration-500 ease-in-out group-hover:filter group-hover:brightness-75 group-hover:saturate-150">
        <div class="absolute inset-0 bg-gradient-to-t from-gray-900 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-end p-4">
          <p class="text-white text-xl font-semibold opacity-0 group-hover:opacity-100 transform translate-y-4 group-hover:translate-y-0 transition-all duration-300 ease-out">Digital Transformation</p>
        </div>
      </div>

      <!-- Lightbox Item 5 -->
      <div class="group hidden lg:block relative overflow-hidden rounded-xl shadow-lg transition-all duration-300 ease-in-out transform hover:scale-105 hover:shadow-2xl cursor-pointer" onclick="document.getElementById('lightbox-modal-5').classList.remove('hidden'); document.body.classList.add('overflow-hidden')">
        <img src="https://picsum.photos/id/105/600/400" alt="Project Image 5" class="w-full h-56 object-cover object-center transition-all duration-500 ease-in-out group-hover:filter group-hover:brightness-75 group-hover:saturate-150">
        <div class="absolute inset-0 bg-gradient-to-t from-gray-900 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-end p-4">
          <p class="text-white text-xl font-semibold opacity-0 group-hover:opacity-100 transform translate-y-4 group-hover:translate-y-0 transition-all duration-300 ease-out">Sustainable Solutions</p>
        </div>
      </div>

      <!-- Lightbox Item 6 -->
      <div class="group hidden lg:block relative overflow-hidden rounded-xl shadow-lg transition-all duration-300 ease-in-out transform hover:scale-105 hover:shadow-2xl cursor-pointer" onclick="document.getElementById('lightbox-modal-6').classList.remove('hidden'); document.body.classList.add('overflow-hidden')">
        <img src="https://picsum.photos/id/106/600/400" alt="Project Image 6" class="w-full h-56 object-cover object-center transition-all duration-500 ease-in-out group-hover:filter group-hover:brightness-75 group-hover:saturate-150">
        <div class="absolute inset-0 bg-gradient-to-t from-gray-900 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-end p-4">
          <p class="text-white text-xl font-semibold opacity-0 group-hover:opacity-100 transform translate-y-4 group-hover:translate-y-0 transition-all duration-300 ease-out">Global Reach</p>
        </div>
      </div>
    </div>

    <!-- Lightbox Modals (hidden by default) -->
    <div id="lightbox-modal-1" class="fixed inset-0 z-50 bg-black bg-opacity-80 flex items-center justify-center p-4 transition-opacity duration-300 hidden" onclick="this.classList.add('hidden'); document.body.classList.remove('overflow-hidden')">
      <div class="relative bg-gray-900/90 dark:bg-gray-950/90 p-4 rounded-xl shadow-2xl max-w-4xl mx-auto transform scale-95 opacity-0 transition-all duration-300 group-hover:scale-100 group-hover:opacity-100" onclick="event.stopPropagation()">
        <button class="absolute top-3 right-3 text-white text-3xl font-bold p-2 leading-none hover:text-red-400 transition-colors duration-200" onclick="document.getElementById('lightbox-modal-1').classList.add('hidden'); document.body.classList.remove('overflow-hidden')">&times;</button>
        <img src="https://picsum.photos/id/101/1200/800" alt="Enlarged Project Image 1" class="max-w-full max-h-[80vh] object-contain rounded-lg shadow-lg">
        <div class="mt-4 text-center text-gray-200 text-lg">
          <h3 class="text-xl md:text-2xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-blue-400 to-sky-200 dark:from-blue-300 dark:to-sky-100">Strategic Insight</h3>
          <p class="text-sm md:text-base text-gray-400 mt-1">Delivering actionable strategies for sustainable growth.</p>
        </div>
      </div>
    </div>

    <div id="lightbox-modal-2" class="fixed inset-0 z-50 bg-black bg-opacity-80 flex items-center justify-center p-4 transition-opacity duration-300 hidden" onclick="this.classList.add('hidden'); document.body.classList.remove('overflow-hidden')">
      <div class="relative bg-gray-900/90 dark:bg-gray-950/90 p-4 rounded-xl shadow-2xl max-w-4xl mx-auto transform scale-95 opacity-0 transition-all duration-300 group-hover:scale-100 group-hover:opacity-100" onclick="event.stopPropagation()">
        <button class="absolute top-3 right-3 text-white text-3xl font-bold p-2 leading-none hover:text-red-400 transition-colors duration-200" onclick="document.getElementById('lightbox-modal-2').classList.add('hidden'); document.body.classList.remove('overflow-hidden')">&times;</button>
        <img src="https://picsum.photos/id/102/1200/800" alt="Enlarged Project Image 2" class="max-w-full max-h-[80vh] object-contain rounded-lg shadow-lg">
        <div class="mt-4 text-center text-gray-200 text-lg">
          <h3 class="text-xl md:text-2xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-blue-400 to-sky-200 dark:from-blue-300 dark:to-sky-100">Innovation & Growth</h3>
          <p class="text-sm md:text-base text-gray-400 mt-1">Fostering innovation to drive significant business growth.</p>
        </div>
      </div>
    </div>

    <div id="lightbox-modal-3" class="fixed inset-0 z-50 bg-black bg-opacity-80 flex items-center justify-center p-4 transition-opacity duration-300 hidden" onclick="this.classList.add('hidden'); document.body.classList.remove('overflow-hidden')">
      <div class="relative bg-gray-900/90 dark:bg-gray-950/90 p-4 rounded-xl shadow-2xl max-w-4xl mx-auto transform scale-95 opacity-0 transition-all duration-300 group-hover:scale-100 group-hover:opacity-100" onclick="event.stopPropagation()">
        <button class="absolute top-3 right-3 text-white text-3xl font-bold p-2 leading-none hover:text-red-400 transition-colors duration-200" onclick="document.getElementById('lightbox-modal-3').classList.add('hidden'); document.body.classList.remove('overflow-hidden')">&times;</button>
        <img src="https://picsum.photos/id/103/1200/800" alt="Enlarged Project Image 3" class="max-w-full max-h-[80vh] object-contain rounded-lg shadow-lg">
        <div class="mt-4 text-center text-gray-200 text-lg">
          <h3 class="text-xl md:text-2xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-blue-400 to-sky-200 dark:from-blue-300 dark:to-sky-100">Client Success</h3>
          <p class="text-sm md:text-base text-gray-400 mt-1">Ensuring our clients achieve their ambitious goals.</p>
        </div>
      </div>
    </div>

    <div id="lightbox-modal-4" class="fixed inset-0 z-50 bg-black bg-opacity-80 flex items-center justify-center p-4 transition-opacity duration-300 hidden" onclick="this.classList.add('hidden'); document.body.classList.remove('overflow-hidden')">
      <div class="relative bg-gray-900/90 dark:bg-gray-950/90 p-4 rounded-xl shadow-2xl max-w-4xl mx-auto transform scale-95 opacity-0 transition-all duration-300 group-hover:scale-100 group-hover:opacity-100" onclick="event.stopPropagation()">
        <button class="absolute top-3 right-3 text-white text-3xl font-bold p-2 leading-none hover:text-red-400 transition-colors duration-200" onclick="document.getElementById('lightbox-modal-4').classList.add('hidden'); document.body.classList.remove('overflow-hidden')">&times;</button>
        <img src="https://picsum.photos/id/104/1200/800" alt="Enlarged Project Image 4" class="max-w-full max-h-[80vh] object-contain rounded-lg shadow-lg">
        <div class="mt-4 text-center text-gray-200 text-lg">
          <h3 class="text-xl md:text-2xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-blue-400 to-sky-200 dark:from-blue-300 dark:to-sky-100">Digital Transformation</h3>
          <p class="text-sm md:text-base text-gray-400 mt-1">Guiding businesses through seamless digital transitions.</p>
        </div>
      </div>
    </div>

    <div id="lightbox-modal-5" class="fixed inset-0 z-50 bg-black bg-opacity-80 flex items-center justify-center p-4 transition-opacity duration-300 hidden" onclick="this.classList.add('hidden'); document.body.classList.remove('overflow-hidden')">
      <div class="relative bg-gray-900/90 dark:bg-gray-950/90 p-4 rounded-xl shadow-2xl max-w-4xl mx-auto transform scale-95 opacity-0 transition-all duration-300 group-hover:scale-100 group-hover:opacity-100" onclick="event.stopPropagation()">
        <button class="absolute top-3 right-3 text-white text-3xl font-bold p-2 leading-none hover:text-red-400 transition-colors duration-200" onclick="document.getElementById('lightbox-modal-5').classList.add('hidden'); document.body.classList.remove('overflow-hidden')">&times;</button>
        <img src="https://picsum.photos/id/105/1200/800" alt="Enlarged Project Image 5" class="max-w-full max-h-[80vh] object-contain rounded-lg shadow-lg">
        <div class="mt-4 text-center text-gray-200 text-lg">
          <h3 class="text-xl md:text-2xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-blue-400 to-sky-200 dark:from-blue-300 dark:to-sky-100">Sustainable Solutions</h3>
          <p class="text-sm md:text-base text-gray-400 mt-1">Crafting eco-conscious strategies for future-proof businesses.</p>
        </div>
      </div>
    </div>

    <div id="lightbox-modal-6" class="fixed inset-0 z-50 bg-black bg-opacity-80 flex items-center justify-center p-4 transition-opacity duration-300 hidden" onclick="this.classList.add('hidden'); document.body.classList.remove('overflow-hidden')">
      <div class="relative bg-gray-900/90 dark:bg-gray-950/90 p-4 rounded-xl shadow-2xl max-w-4xl mx-auto transform scale-95 opacity-0 transition-all duration-300 group-hover:scale-100 group-hover:opacity-100" onclick="event.stopPropagation()">
        <button class="absolute top-3 right-3 text-white text-3xl font-bold p-2 leading-none hover:text-red-400 transition-colors duration-200" onclick="document.getElementById('lightbox-modal-6').classList.add('hidden'); document.body.classList.remove('overflow-hidden')">&times;</button>
        <img src="https://picsum.photos/id/106/1200/800" alt="Enlarged Project Image 6" class="max-w-full max-h-[80vh] object-contain rounded-lg shadow-lg">
        <div class="mt-4 text-center text-gray-200 text-lg">
          <h3 class="text-xl md:text-2xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-blue-400 to-sky-200 dark:from-blue-300 dark:to-sky-100">Global Reach</h3>
          <p class="text-sm md:text-base text-gray-400 mt-1">Extending your presence and impact across markets.</p>
        </div>
      </div>
    </div>

  </div>
</div>

Bauhaus Accordion Component - Blog/Content

A complex, responsive accordion component with a Bauhaus-inspired design, featuring geometric forms, cool neutral colors, and rich interactive elements for blog/content consumption. Includes dark mode support.

Open Preview

                <div class="p-4 sm:p-6 md:p-8 lg:p-12 min-h-screen bg-gray-100 dark:bg-gray-900 flex items-start justify-center font-sans">
  <div class="w-full max-w-4xl bg-white dark:bg-gray-800 shadow-xl rounded-lg overflow-hidden border border-gray-200 dark:border-gray-700">
    <div class="p-6 bg-blue-100 dark:bg-blue-900 text-blue-800 dark:text-blue-200 border-b border-gray-200 dark:border-gray-700">
      <h2 class="text-2xl sm:text-3xl font-bold tracking-tight">Frequently Asked Questions</h2>
      <p class="mt-2 text-sm sm:text-base text-blue-700 dark:text-blue-300">Find answers to common questions about our content.</p>
    </div>

    <div class="divide-y divide-gray-200 dark:divide-gray-700">
      <!-- Accordion Item 1 -->
      <details class="group">
        <summary class="flex justify-between items-center px-6 py-4 cursor-pointer focus:outline-none focus-visible:ring focus-visible:ring-blue-500 focus-visible:ring-opacity-75 transition-colors duration-200 hover:bg-gray-50 dark:hover:bg-gray-700">
          <span class="text-lg sm:text-xl font-semibold text-gray-800 dark:text-gray-100">What is the Bauhaus philosophy in design?</span>
          <svg class="h-6 w-6 text-blue-600 dark:text-blue-400 transform transition-transform duration-300 group-open:rotate-180" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
          </svg>
        </summary>
        <div class="px-6 pb-4 pt-2 text-gray-600 dark:text-gray-300 text-sm sm:text-base leading-relaxed border-t border-gray-100 dark:border-gray-700 group-open:animate-fade-in">
          <p class="mb-3">The Bauhaus philosophy, originating from a German art school in the early 20th century, emphasized functionality, clean lines, and geometric forms. It aimed to unify art, craft, and technology, promoting minimalist designs suitable for mass production with an emphasis on 'form follows function'.</p>
          <img src="https://picsum.photos/300/200?random=1" alt="Geometric shapes illustration" class="w-full h-40 object-cover mt-4 rounded-md shadow-sm border border-gray-200 dark:border-gray-600">
        </div>
      </details>

      <!-- Accordion Item 2 -->
      <details class="group">
        <summary class="flex justify-between items-center px-6 py-4 cursor-pointer focus:outline-none focus-visible:ring focus-visible:ring-blue-500 focus-visible:ring-opacity-75 transition-colors duration-200 hover:bg-gray-50 dark:hover:bg-gray-700">
          <span class="text-lg sm:text-xl font-semibold text-gray-800 dark:text-gray-100">How does Bauhaus influence modern web design?</span>
          <svg class="h-6 w-6 text-blue-600 dark:text-blue-400 transform transition-transform duration-300 group-open:rotate-180" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
          </svg>
        </summary>
        <div class="px-6 pb-4 pt-2 text-gray-600 dark:text-gray-300 text-sm sm:text-base leading-relaxed border-t border-gray-100 dark:border-gray-700 group-open:animate-fade-in">
          <p class="mb-3">Bauhaus principles like minimalism, grid-based layouts, sans-serif typography, and emphasizing usability profoundly impact modern web design. Its focus on structure and readability translates directly into clean, functional, and accessible user interfaces.</p>
          <div class="flex items-center space-x-4 mt-4 p-3 bg-gray-50 dark:bg-gray-900 rounded-md border border-gray-200 dark:border-gray-700">
            <img class="h-12 w-12 rounded-full" src="https://randomuser.me/api/portraits/men/45.jpg" alt="Author avatar">
            <div>
              <p class="font-medium text-gray-900 dark:text-gray-50">John Doe</p>
              <p class="text-sm text-gray-500 dark:text-gray-400">UI/UX Designer</p>
            </div>
          </div>
        </div>
      </details>

      <!-- Accordion Item 3 -->
      <details class="group">
        <summary class="flex justify-between items-center px-6 py-4 cursor-pointer focus:outline-none focus-visible:ring focus-visible:ring-blue-500 focus-visible:ring-opacity-75 transition-colors duration-200 hover:bg-gray-50 dark:hover:bg-gray-700">
          <span class="text-lg sm:text-xl font-semibold text-gray-800 dark:text-gray-100">What are primary colors in Bauhaus context?</span>
          <svg class="h-6 w-6 text-blue-600 dark:text-blue-400 transform transition-transform duration-300 group-open:rotate-180" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
          </svg>
        </summary>
        <div class="px-6 pb-4 pt-2 text-gray-600 dark:text-gray-300 text-sm sm:text-base leading-relaxed border-t border-gray-100 dark:border-gray-700 group-open:animate-fade-in">
          <p class="mb-3">In a strong reflection of Constructivism and De Stijl movements, the Bauhaus often utilized primary colors – red, yellow, and blue – alongside black and white. This limited palette emphasized geometric simplicity and stark visual impact, creating a powerful functional aesthetic.</p>
          <div class="flex space-x-2 mt-4">
            <div class="w-16 h-16 bg-red-500 rounded-lg"></div>
            <div class="w-16 h-16 bg-yellow-400 rounded-lg"></div>
            <div class="w-16 h-16 bg-blue-500 rounded-lg"></div>
          </div>
        </div>
      </details>

      <!-- Accordion Item 4 -->
      <details class="group">
        <summary class="flex justify-between items-center px-6 py-4 cursor-pointer focus:outline-none focus-visible:ring focus-visible:ring-blue-500 focus-visible:ring-opacity-75 transition-colors duration-200 hover:bg-gray-50 dark:hover:bg-gray-700">
          <span class="text-lg sm:text-xl font-semibold text-gray-800 dark:text-gray-100">Can I contribute my own content or questions?</span>
          <svg class="h-6 w-6 text-blue-600 dark:text-blue-400 transform transition-transform duration-300 group-open:rotate-180" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
          </svg>
        </summary>
        <div class="px-6 pb-4 pt-2 text-gray-600 dark:text-gray-300 text-sm sm:text-base leading-relaxed border-t border-gray-100 dark:border-gray-700 group-open:animate-fade-in">
          <p class="mb-3">Yes, we welcome contributions! Please visit our 'Submit Content' page or contact our editorial team directly with your proposals. We are always looking for insightful questions and well-researched answers to enrich our blog.</p>
          <a href="#" class="inline-flex items-center mt-3 px-4 py-2 bg-blue-600 text-white font-medium rounded-md shadow-sm hover:bg-blue-700 focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2 dark:focus-visible:ring-offset-gray-800 transition-colors duration-200 text-sm sm:text-base">
            Learn More
            <svg class="ml-2 -mr-1 w-4 h-4" 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 8l4 4m0 0l-4 4m4-4H3"></path></svg>
          </a>
        </div>
      </details>
    </div>

    <div class="p-6 bg-gray-50 dark:bg-gray-900 border-t border-gray-200 dark:border-gray-700 text-center text-sm text-gray-500 dark:text-gray-400">
      <p>&copy; 2023 Bauhaus Inspired Content. All rights reserved.</p>
    </div>
  </div>
</div>

<!-- To make the 'details' tag animate, adding simple CSS is highly recommended. Tailwind CSS does not provide direct animation for 'details[open]'. This can be embedded in a <style> tag or a CSS file. -->
<!-- Example CSS for the fade-in effect: -->
<style>
  /* This is outside the JSON intentionally, as per the rules to ONLY include HTML and Tailwind CSS classes in the json.html_code output. This is a note for the user. */
  /* If embedding <style> tags were allowed in the output, it would look like this: */
  /*
  .group-open\:animate-fade-in[open] > div {
    animation: fade-in 0.5s ease-out forwards;
  }

  @keyframes fade-in {
    from {
      opacity: 0;
      transform: translateY(-10px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
  */
</style>

Social Components Component

A simple, responsive social media card for news/journalism content with an industrial aesthetic and autumn color scheme, including dark mode support.

Open Preview

                <div class="bg-stone-100 dark:bg-stone-900 p-4 sm:p-6 lg:p-8 font-sans antialiased text-stone-800 dark:text-stone-200">
  <div class="max-w-xs mx-auto border-2 border-stone-400 dark:border-stone-700 rounded-lg overflow-hidden shadow-lg bg-stone-50 dark:bg-stone-800 transition-colors duration-300">
    <div class="relative">
      <img class="w-full h-32 object-cover object-center" src="https://picsum.photos/400/250?random=1" alt="News Article Cover">
      <span class="absolute top-2 left-2 bg-amber-700 text-amber-50 text-xs px-2 py-1 rounded font-mono uppercase tracking-wide">News</span>
    </div>
    <div class="p-4">
      <h3 class="text-lg font-bold text-amber-800 dark:text-amber-500 mb-2 leading-tight">Headline Connects Community Leaders</h3>
      <p class="text-sm text-stone-600 dark:text-stone-400 mb-4 line-clamp-3">
        Local officials and community organizers gathered today to discuss new initiatives aimed at fostering stronger neighborhood bonds and addressing pressing local issues.
      </p>
      <div class="flex items-center justify-between text-stone-500 dark:text-stone-400 text-xs">
        <div class="flex items-center space-x-2">
          <img class="w-6 h-6 rounded-full border border-stone-300 dark:border-stone-600" src="https://randomuser.me/api/portraits/men/75.jpg" alt="Author Avatar">
          <span class="font-medium">John Doe</span>
        </div>
        <span>Oct 26, 2023</span>
      </div>
    </div>
  </div>
</div>

360_viewer_component

A complex, responsive 360° viewer component with cyberpunk and autumn color aesthetics, designed for educational platforms. It features dark mode support, interactive elements, and rich typography.

Open Preview

                <div class="p-4 sm:p-6 lg:p-8 bg-gray-900 text-orange-200 min-h-screen font-sans antialiased dark:bg-gray-950 dark:text-orange-100">

  <!-- Component Container -->
  <div class="max-w-7xl mx-auto bg-gray-800 rounded-xl shadow-2xl overflow-hidden border border-orange-600/30 dark:bg-gray-900 dark:border-orange-700/40">
    <div class="grid grid-cols-1 lg:grid-cols-3 gap-6 p-6 sm:p-8">

      <!-- Left Panel: 360 Viewer Placeholder & Controls -->
      <div class="lg:col-span-2 space-y-6">
        <h2 class="text-3xl sm:text-4xl font-extrabold text-orange-400 tracking-tight leading-tight uppercase relative drop-shadow-lg">
          <span class="relative z-10">Cybernetic Flora: Mycelial Network</span>
          <span class="absolute inset-y-0 left-0 w-full h-full bg-orange-600 mix-blend-multiply opacity-10 rounded-lg blur-sm"></span>
        </h2>
        <p class="text-sm text-orange-300/80 font-mono tracking-widest uppercase">Lesson ID: NWRK-734-ALPHA</p>

        <!-- 360 Viewer Area -->
        <div class="relative w-full h-96 sm:h-[500px] bg-gray-950 rounded-lg overflow-hidden border border-orange-700 shadow-inner shadow-orange-900/30 group">
          <img src="https://picsum.photos/1200/800?grayscale&blur=5" alt="360 Degree View of Mycelial Network" class="absolute inset-0 w-full h-full object-cover opacity-30 group-hover:opacity-40 transition-opacity duration-300">
          <div class="absolute inset-0 flex items-center justify-center">
            <div class="w-32 h-32 bg-orange-700 rounded-full flex items-center justify-center animate-pulse-slow border-2 border-orange-500 shadow-lg shadow-orange-500/50">
              <svg class="w-16 h-16 text-orange-300" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm-1-13h2v6h-2zm0 8h2v2h-2z"/>
              </svg>
            </div>
            <p class="absolute bottom-8 text-orange-500 text-lg font-bold drop-shadow-md">360° INTERACTIVE VIEW</p>
          </div>
          <!-- Overlay for VR/AR indicators -->
          <div class="absolute top-4 right-4 bg-orange-800/60 text-orange-200 text-xs px-3 py-1 rounded-full flex items-center gap-1 backdrop-blur-sm shadow-md">
            <svg class="w-3 h-3" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M12 1.5l-6 10.5 6 10.5 6-10.5zM12 4.14l-3.46 6.01L12 16.15l3.46-6.01z"/></svg>
            VR/AR Compatible
          </div>
        </div>

        <!-- Playback Controls -->
        <div class="flex flex-wrap items-center justify-center gap-4 bg-gray-700/60 p-4 rounded-lg border border-orange-800/50 dark:bg-gray-800/70">
          <button class="flex items-center space-x-2 text-orange-300 hover:text-orange-100 bg-orange-900/40 px-4 py-2 rounded-full transform hover:scale-105 transition duration-200 outline-none focus:ring-2 focus:ring-orange-500 shadow-md shadow-orange-900/30">
            <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24"><path d="M8 5v14l11-7z"/></svg>
            <span>Play</span>
          </button>
          <button class="flex items-center space-x-2 text-orange-300 hover:text-orange-100 bg-orange-900/40 px-4 py-2 rounded-full transform hover:scale-105 transition duration-200 outline-none focus:ring-2 focus:ring-orange-500 shadow-md shadow-orange-900/30">
              <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24"><path d="M6 19h4V5H6v14zm8-14v14h4V5h-4z"/></svg>
              <span>Pause</span>
            </button>
          <div class="flex-grow h-2 bg-orange-900 rounded-full cursor-pointer group">
            <div class="w-1/2 h-full bg-orange-500 rounded-full relative group-hover:bg-orange-400 transition-colors duration-200">
              <div class="absolute -right-2 -top-1 w-4 h-4 bg-orange-300 rounded-full border-2 border-orange-100 group-hover:scale-125 transition-transform duration-200 shadow-lg"></div>
            </div>
          </div>
          <span class="text-orange-400 text-sm font-mono">01:23 / 03:45</span>
          <button class="text-orange-300 hover:text-orange-100 bg-orange-900/40 p-2 rounded-full transform hover:scale-105 transition duration-200 outline-none focus:ring-2 focus:ring-orange-500 shadow-md shadow-orange-900/30">
            <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24"><path d="M12 3v10.55c-.59-.34-1.27-.55-2-.55-2.21 0-4 1.79-4 4s1.79 4 4 4 4-1.79 4-4V7h4V3h-6z"/></svg>
          </button>
          <button class="text-orange-300 hover:text-orange-100 bg-orange-900/40 p-2 rounded-full transform hover:scale-105 transition duration-200 outline-none focus:ring-2 focus:ring-orange-500 shadow-md shadow-orange-900/30">
            <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24"><path d="M19 12h-2v4h2v-4zm-4 0H5v6h10v-6zM3 4c-.55 0-1 .45-1 1v14c0 .55.45 1 1 1h18c.55 0 1-.45 1-1V5c0-.55-.45-1-1-1H3zm0 15V5h18l.01 14H3z"/></svg>
          </button>
        </div>
      </div>

      <!-- Right Panel: Information & Interactions -->
      <div class="space-y-6 lg:space-y-8">
        <!-- Description/Synopsis -->
        <section class="bg-gray-700/50 p-5 rounded-lg border border-orange-800/50 space-y-3 shadow-lg shadow-orange-900/20 dark:bg-gray-800/60">
          <h3 class="text-xl font-bold text-orange-300 uppercase tracking-wide">Overview Protocol</h3>
          <p class="text-sm text-orange-200/90 leading-relaxed">
            Explore the intricate bio-electrical pathways of the <span class="text-orange-400 font-semibold">Symbiotic Mycelial Network</span>. This interactive module details its energy transfer mechanisms, defensive protocols, and potential applications in bio-engineering. Navigate the 3D model to uncover hidden <span class="text-orange-400 font-semibold">anomalies</span> and <span class="text-orange-400 font-semibold">data nodes</span>.
          </p>
          <div class="flex flex-wrap gap-2 text-xs font-mono pt-2">
            <span class="bg-orange-700/60 px-2 py-1 rounded text-orange-200 border border-orange-600">#BIO-CYBER</span>
            <span class="bg-orange-700/60 px-2 py-1 rounded text-orange-200 border border-orange-600">#NEURAL-NET</span>
            <span class="bg-orange-700/60 px-2 py-1 rounded text-orange-200 border border-orange-600">#EDUCATIONAL</span>
          </div>
        </section>

        <!-- Hotspots/Interactive Elements -->
        <section class="bg-gray-700/50 p-5 rounded-lg border border-orange-800/50 space-y-4 shadow-lg shadow-orange-900/20 dark:bg-gray-800/60">
          <h3 class="text-xl font-bold text-orange-300 uppercase tracking-wide">Data Nodes & Anomalies</h3>
          <ul class="space-y-3">
            <li class="flex items-center gap-3 group bg-gray-800/40 p-3 rounded-md border border-orange-900/50 hover:bg-orange-900/30 transition-colors duration-200 cursor-pointer">
              <div class="w-3 h-3 bg-red-600 rounded-full animate-pulse"></div>
              <span class="text-orange-200 group-hover:text-orange-100 font-mono text-sm">Anomaly A-1: Energetic Signature Spike</span>
              <span class="ml-auto text-orange-400 text-xs font-bold">+20XP</span>
            </li>
            <li class="flex items-center gap-3 group bg-gray-800/40 p-3 rounded-md border border-orange-900/50 hover:bg-orange-900/30 transition-colors duration-200 cursor-pointer">
              <div class="w-3 h-3 bg-teal-500 rounded-full"></div>
              <span class="text-orange-200 group-hover:text-orange-100 font-mono text-sm">Data Node B-4: Mycelial Transport</span>
              <span class="ml-auto text-orange-400 text-xs font-bold">+15XP</span>
            </li>
            <li class="flex items-center gap-3 group bg-gray-800/40 p-3 rounded-md border border-orange-900/50 hover:bg-orange-900/30 transition-colors duration-200 cursor-pointer">
              <div class="w-3 h-3 bg-purple-500 rounded-full"></div>
              <span class="text-orange-200 group-hover:text-orange-100 font-mono text-sm">Hotspot C-7: Biomass Conversion</span>
              <span class="ml-auto text-orange-400 text-xs font-bold">+10XP</span>
            </li>
          </ul>
        </section>

        <!-- User/Instructor Info -->
        <section class="bg-gray-700/50 p-5 rounded-lg border border-orange-800/50 shadow-lg shadow-orange-900/20 dark:bg-gray-800/60">
          <h3 class="text-xl font-bold text-orange-300 uppercase tracking-wide mb-4">Instructor Profile</h3>
          <div class="flex items-center space-x-4">
            <img src="https://randomuser.me/api/portraits/men/75.jpg" alt="Instructor Avatar" class="w-16 h-16 rounded-full border-2 border-orange-500 shadow-md shadow-orange-700/50">
            <div>
              <h4 class="text-lg font-bold text-orange-300">Dr. Elias Thorne</h4>
              <p class="text-sm text-orange-400 font-mono tracking-wide">Bio-Cybernetics Specialist</p>
              <a href="#" class="text-xs text-orange-500 hover:underline mt-1 inline-block">View His Courses <span class="transform rotate-45 inline-block ml-1">⟶</span></a>
            </div>
          </div>
          <p class="text-sm text-orange-200/90 mt-4 leading-relaxed">Dr. Thorne is a leading authority on synthetic biology and neural integration. His research focuses on sustainable bio-computational systems for post-collapse environments.</p>
        </section>
      </div>

    </div>
  </div>

  <!-- Footer/Credits (Optional, but adds to the theme) -->
  <footer class="mt-8 text-center text-xs text-orange-400/50">
    <p>© 2077 Axiom Educational Network. All Rights Reserved. // Unauthorized access detected: Neural trace established.</p>
  </footer>

</div>

Product Cards Component

A complex, responsive product cards component for entertainment/media platforms, featuring an organic/nature-inspired design using a forest/green palette. Includes dark mode support and interactive elements.

Open Preview

                <div class="bg-gradient-to-br from-emerald-50 to-green-100 py-12 px-4 sm:px-6 lg:px-8 dark:from-gray-900 dark:to-gray-950">
  <div class="max-w-7xl mx-auto">
    <h2 class="text-4xl font-extrabold text-green-900 text-center mb-12 dark:text-green-200">
      Explore Our Worlds
    </h2>

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

      <!-- Card 1 -->
      <div class="bg-white rounded-3xl shadow-xl overflow-hidden transform hover:scale-[1.02] transition-all duration-300 ease-in-out dark:bg-gray-800 border border-green-200 dark:border-gray-700">
        <div class="relative pb-56 sm:pb-64 lg:pb-72">
          <img class="absolute inset-0 h-full w-full object-cover" src="https://picsum.photos/id/237/800/600" alt="Image of a lush forest">
          <div class="absolute inset-0 bg-gradient-to-t from-green-900 via-transparent to-transparent opacity-75 dark:from-gray-900"></div>
          <div class="absolute bottom-0 left-0 p-6">
            <span class="px-3 py-1 bg-green-600 text-white text-xs font-semibold rounded-full dark:bg-green-700">Fantasy</span>
          </div>
        </div>
        <div class="p-6 relative">
          <h3 class="text-2xl font-bold text-green-900 mb-2 dark:text-green-100">Whispers of Eldoria</h3>
          <p class="text-green-700 text-sm mb-4 dark:text-green-300">A captivating tale of ancient magic and forgotten kingdoms. Dive into a world where every creature has a story.</p>
          <div class="flex items-center mb-4">
            <div class="flex -space-x-2 mr-2">
              <img class="inline-block h-8 w-8 rounded-full ring-2 ring-white dark:ring-gray-800" src="https://randomuser.me/api/portraits/men/1.jpg" alt="Author 1">
              <img class="inline-block h-8 w-8 rounded-full ring-2 ring-white dark:ring-gray-800" src="https://randomuser.me/api/portraits/women/2.jpg" alt="Author 2">
            </div>
            <span class="text-green-600 text-sm dark:text-green-400">Feat. Alex & Sarah</span>
          </div>
          <div class="flex justify-between items-center mb-4">
            <div class="flex items-center text-green-700 dark:text-green-300">
              <svg class="w-5 h-5 mr-1 text-green-500 dark:text-green-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-12a1 1 0 10-2 0v4a1 1 0 00.293.707l3 3a1 1 0 001.414-1.414L11 9.586V6z" clip-rule="evenodd"></path></svg>
              <span class="text-sm">2h 15m</span>
            </div>
            <div class="flex items-center text-green-700 dark:text-green-300">
              <svg class="w-5 h-5 mr-1 text-yellow-500 dark:text-yellow-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><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.817 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.817-2.034a1 1 0 00-1.175 0l-2.817 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.381-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
              <span class="text-sm font-semibold">4.8</span>
            </div>
          </div>
          <button class="w-full flex items-center justify-center px-6 py-3 border border-transparent text-base font-medium rounded-full shadow-sm text-white bg-green-600 hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500 dark:bg-green-700 dark:hover:bg-green-800 dark:focus:ring-green-600">
            <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="M14.752 11.132l-3.398 3.398A1.006 1.006 0 0110 14.828V10.17a1.006 1.006 0 011.354-.98L14.752 11.132z"></path><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
            Start Watching
          </button>
        </div>
      </div>

      <!-- Card 2 -->
      <div class="bg-white rounded-3xl shadow-xl overflow-hidden transform hover:scale-[1.02] transition-all duration-300 ease-in-out dark:bg-gray-800 border border-green-200 dark:border-gray-700">
        <div class="relative pb-56 sm:pb-64 lg:pb-72">
          <img class="absolute inset-0 h-full w-full object-cover" src="https://picsum.photos/id/1025/800/600" alt="Image of abstract bioluminescent mushrooms">
          <div class="absolute inset-0 bg-gradient-to-t from-emerald-900 via-transparent to-transparent opacity-75 dark:from-gray-900"></div>
          <div class="absolute bottom-0 left-0 p-6">
            <span class="px-3 py-1 bg-emerald-600 text-white text-xs font-semibold rounded-full dark:bg-emerald-700">Sci-Fi</span>
          </div>
        </div>
        <div class="p-6 relative">
          <h3 class="text-2xl font-bold text-green-900 mb-2 dark:text-green-100">Echoes of the Cosmos</h3>
          <p class="text-green-700 text-sm mb-4 dark:text-green-300">Journey beyond the stars to uncover the secrets of a dying galaxy. A thrilling space opera unfolds.</p>
          <div class="flex items-center mb-4">
            <div class="flex -space-x-2 mr-2">
              <img class="inline-block h-8 w-8 rounded-full ring-2 ring-white dark:ring-gray-800" src="https://randomuser.me/api/portraits/women/3.jpg" alt="Author 3">
              <img class="inline-block h-8 w-8 rounded-full ring-2 ring-white dark:ring-gray-800" src="https://randomuser.me/api/portraits/men/4.jpg" alt="Author 4">
            </div>
            <span class="text-green-600 text-sm dark:text-green-400">Created by Luna & Kai</span>
          </div>
          <div class="flex justify-between items-center mb-4">
            <div class="flex items-center text-green-700 dark:text-green-300">
              <svg class="w-5 h-5 mr-1 text-green-500 dark:text-green-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-12a1 1 0 10-2 0v4a1 1 0 00.293.707l3 3a1 1 0 001.414-1.414L11 9.586V6z" clip-rule="evenodd"></path></svg>
              <span class="text-sm">2h 45m</span>
            </div>
            <div class="flex items-center text-green-700 dark:text-green-300">
              <svg class="w-5 h-5 mr-1 text-yellow-500 dark:text-yellow-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><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.817 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.817-2.034a1 1 0 00-1.175 0l-2.817 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.381-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
              <span class="text-sm font-semibold">4.9</span>
            </div>
          </div>
          <button class="w-full flex items-center justify-center px-6 py-3 border border-transparent text-base font-medium rounded-full shadow-sm text-white bg-green-600 hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500 dark:bg-green-700 dark:hover:bg-green-800 dark:focus:ring-green-600">
            <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="M14.752 11.132l-3.398 3.398A1.006 1.006 0 0110 14.828V10.17a1.006 1.006 0 011.354-.98L14.752 11.132z"></path><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
            Start Watching
          </button>
        </div>
      </div>

      <!-- Card 3 -->
      <div class="bg-white rounded-3xl shadow-xl overflow-hidden transform hover:scale-[1.02] transition-all duration-300 ease-in-out dark:bg-gray-800 border border-green-200 dark:border-gray-700">
        <div class="relative pb-56 sm:pb-64 lg:pb-72">
          <img class="absolute inset-0 h-full w-full object-cover" src="https://picsum.photos/id/196/800/600" alt="Image of a serene waterfall">
          <div class="absolute inset-0 bg-gradient-to-t from-lime-900 via-transparent to-transparent opacity-75 dark:from-gray-900"></div>
          <div class="absolute bottom-0 left-0 p-6">
            <span class="px-3 py-1 bg-lime-600 text-white text-xs font-semibold rounded-full dark:bg-lime-700">Adventure</span>
          </div>
        </div>
        <div class="p-6 relative">
          <h3 class="text-2xl font-bold text-green-900 mb-2 dark:text-green-100">The Emerald Quest</h3>
          <p class="text-green-700 text-sm mb-4 dark:text-green-300">Embark on a perilous journey through mystical lands to find the legendary Emerald Heart.</p>
          <div class="flex items-center mb-4">
            <div class="flex -space-x-2 mr-2">
              <img class="inline-block h-8 w-8 rounded-full ring-2 ring-white dark:ring-gray-800" src="https://randomuser.me/api/portraits/women/5.jpg" alt="Author 5">
              <img class="inline-block h-8 w-8 rounded-full ring-2 ring-white dark:ring-gray-800" src="https://randomuser.me/api/portraits/men/6.jpg" alt="Author 6">
            </div>
            <span class="text-green-600 text-sm dark:text-green-400">By The Wilderness Collective</span>
          </div>
          <div class="flex justify-between items-center mb-4">
            <div class="flex items-center text-green-700 dark:text-green-300">
              <svg class="w-5 h-5 mr-1 text-green-500 dark:text-green-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-12a1 1 0 10-2 0v4a1 1 0 00.293.707l3 3a1 1 0 001.414-1.414L11 9.586V6z" clip-rule="evenodd"></path></svg>
              <span class="text-sm">3h 05m</span>
            </div>
            <div class="flex items-center text-green-700 dark:text-green-300">
              <svg class="w-5 h-5 mr-1 text-yellow-500 dark:text-yellow-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><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.817 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.817-2.034a1 1 0 00-1.175 0l-2.817 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.381-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
              <span class="text-sm font-semibold">4.7</span>
            </div>
          </div>
          <button class="w-full flex items-center justify-center px-6 py-3 border border-transparent text-base font-medium rounded-full shadow-sm text-white bg-green-600 hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500 dark:bg-green-700 dark:hover:bg-green-800 dark:focus:ring-green-600">
            <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="M14.752 11.132l-3.398 3.398A1.006 1.006 0 0110 14.828V10.17a1.006 1.006 0 011.354-.98L14.752 11.132z"></path><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
            Start Watching
          </button>
        </div>
      </div>

    </div>
  </div>
</div>

Portfolio Navigation Component

A responsive navigation component for a portfolio website, inspired by paper/print aesthetics with sunset/warm tones. Includes dark mode support and a clean layout suitable for showcasing work.

Open Preview

                <nav class="bg-orange-50 dark:bg-gray-900 border-b border-orange-200 dark:border-gray-800 font-serif shadow-sm">
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
    <div class="flex items-center justify-between h-16">
      <div class="flex items-center">
        <div class="flex-shrink-0">
          <a href="#" class="text-orange-700 dark:text-orange-300 text-2xl font-bold tracking-tight">Portfolio<span class="text-orange-500 dark:text-yellow-400">.</span></a>
        </div>
        <div class="hidden md:block">
          <div class="ml-10 flex items-baseline space-x-4">
            <a href="#" class="text-orange-700 dark:text-orange-300 hover:bg-orange-100 hover:text-orange-900 dark:hover:bg-gray-800 dark:hover:text-yellow-400 px-3 py-2 rounded-md text-sm font-medium transition duration-200 ease-in-out">Projects</a>
            <a href="#" class="text-orange-700 dark:text-orange-300 hover:bg-orange-100 hover:text-orange-900 dark:hover:bg-gray-800 dark:hover:text-yellow-400 px-3 py-2 rounded-md text-sm font-medium transition duration-200 ease-in-out">About</a>
            <a href="#" class="text-orange-700 dark:text-orange-300 hover:bg-orange-100 hover:text-orange-900 dark:hover:bg-gray-800 dark:hover:text-yellow-400 px-3 py-2 rounded-md text-sm font-medium transition duration-200 ease-in-out">Services</a>
            <a href="#" class="text-orange-700 dark:text-orange-300 hover:bg-orange-100 hover:text-orange-900 dark:hover:bg-gray-800 dark:hover:text-yellow-400 px-3 py-2 rounded-md text-sm font-medium transition duration-200 ease-in-out">Contact</a>
          </div>
        </div>
      </div>
      <div class="hidden md:block">
        <div class="ml-4 flex items-center md:ml-6">
          <button type="button" class="hover:bg-orange-100 dark:hover:bg-gray-800 p-1 rounded-full text-orange-600 dark:text-orange-400 hover:text-orange-800 dark:hover:text-yellow-400 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-orange-50 dark:focus:ring-offset-gray-900 focus:ring-orange-500 dark:focus:ring-yellow-500 transition duration-200 ease-in-out">
            <span class="sr-only">View notifications</span>
            <svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
              <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 class="ml-3 relative">
            <div>
              <button type="button" class="max-w-xs bg-orange-50 dark:bg-gray-900 rounded-full flex items-center text-sm focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-orange-50 dark:focus:ring-offset-gray-900 focus:ring-orange-500 dark:focus:ring-yellow-500" id="user-menu-button" aria-expanded="false" aria-haspopup="true">
                <span class="sr-only">Open user menu</span>
                <img class="h-8 w-8 rounded-full border border-orange-300 dark:border-gray-700" src="https://randomuser.me/api/portraits/men/75.jpg" alt="User avatar">
              </button>
            </div>
            <!-- User menu options (hidden by default, can be toggled with JS) -->
            <!--
            <div class="origin-top-right absolute right-0 mt-2 w-48 rounded-md shadow-lg py-1 bg-white ring-1 ring-black ring-opacity-5 focus:outline-none" role="menu" aria-orientation="vertical" aria-labelledby="user-menu-button" tabindex="-1">
              <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100" role="menuitem" tabindex="-1" id="user-menu-item-0">Your Profile</a>
              <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100" role="menuitem" tabindex="-1" id="user-menu-item-1">Settings</a>
              <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100" role="menuitem" tabindex="-1" id="user-menu-item-2">Sign out</a>
            </div>
            -->
          </div>

          <!-- Dark mode toggle -->
          <button id="dark-mode-toggle" class="ml-4 hover:bg-orange-100 dark:hover:bg-gray-800 p-1 rounded-full text-orange-600 dark:text-orange-400 hover:text-orange-800 dark:hover:text-yellow-400 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-orange-50 dark:focus:ring-offset-gray-900 focus:ring-orange-500 dark:focus:ring-yellow-500 transition duration-200 ease-in-out">
            <span class="sr-only">Toggle dark mode</span>
            <svg class="h-6 w-6 hidden dark:block" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 3v1m0 16v1m9-9h1M3 12H2m8.05-9.636l-.707-.707M16.95 2L16.243 2.707m-9.636 8.05l-.707.707M2.707 16.243l.707.707M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
            </svg>
            <svg class="h-6 w-6 dark:hidden" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z" />
            </svg>
          </button>
        </div>
      </div>
      <div class="-mr-2 flex md:hidden">
        <!-- Mobile menu button -->
        <button type="button" class="inline-flex items-center justify-center p-2 rounded-md text-orange-600 dark:text-orange-400 hover:text-orange-800 hover:bg-orange-100 dark:hover:text-yellow-400 dark:hover:bg-gray-800 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-orange-500 dark:focus:ring-yellow-500 transition duration-200" aria-expanded="false">
          <span class="sr-only">Open main menu</span>
          <!-- Icon when menu is closed. -->
          <svg class="block h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
          </svg>
          <!-- Icon when menu is open. -->
          <svg class="hidden h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
          </svg>
        </button>
      </div>
    </div>
  </div>

  <!-- Mobile menu, show/hide based on menu state. -->
  <div class="md:hidden hidden" id="mobile-menu">
    <div class="px-2 pt-2 pb-3 space-y-1 sm:px-3">
      <a href="#" class="text-orange-700 dark:text-orange-300 hover:bg-orange-100 hover:text-orange-900 dark:hover:bg-gray-800 dark:hover:text-yellow-400 block px-3 py-2 rounded-md text-base font-medium transition duration-200 ease-in-out">Projects</a>
      <a href="#" class="text-orange-700 dark:text-orange-300 hover:bg-orange-100 hover:text-orange-900 dark:hover:bg-gray-800 dark:hover:text-yellow-400 block px-3 py-2 rounded-md text-base font-medium transition duration-200 ease-in-out">About</a>
      <a href="#" class="text-orange-700 dark:text-orange-300 hover:bg-orange-100 hover:text-orange-900 dark:hover:bg-gray-800 dark:hover:text-yellow-400 block px-3 py-2 rounded-md text-base font-medium transition duration-200 ease-in-out">Services</a>
      <a href="#" class="text-orange-700 dark:text-orange-300 hover:bg-orange-100 hover:text-orange-900 dark:hover:bg-gray-800 dark:hover:text-yellow-400 block px-3 py-2 rounded-md text-base font-medium transition duration-200 ease-in-out">Contact</a>
    </div>
    <div class="pt-4 pb-3 border-t border-orange-200 dark:border-gray-700">
      <div class="flex items-center px-5">
        <div class="flex-shrink-0">
          <img class="h-10 w-10 rounded-full border border-orange-300 dark:border-gray-700" src="https://randomuser.me/api/portraits/men/75.jpg" alt="User avatar">
        </div>
        <div class="ml-3">
          <div class="text-base font-medium leading-none text-orange-800 dark:text-orange-200">John Doe</div>
          <div class="text-sm font-medium leading-none text-orange-600 dark:text-gray-400">[email protected]</div>
        </div>
        <button type="button" class="ml-auto flex-shrink-0 hover:bg-orange-100 dark:hover:bg-gray-800 p-1 rounded-full text-orange-600 dark:text-orange-400 hover:text-orange-800 dark:hover:text-yellow-400 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-orange-50 dark:focus:ring-offset-gray-900 focus:ring-orange-500 dark:focus:ring-yellow-500 transition duration-200 ease-in-out">
          <span class="sr-only">View notifications</span>
          <svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
            <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>
      <div class="mt-3 px-2 space-y-1">
        <a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-orange-800 dark:text-orange-200 hover:text-orange-900 hover:bg-orange-100 dark:hover:bg-gray-800 dark:hover:text-yellow-400 transition duration-200 ease-in-out">Your Profile</a>
        <a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-orange-800 dark:text-orange-200 hover:text-orange-900 hover:bg-orange-100 dark:hover:bg-gray-800 dark:hover:text-yellow-400 transition duration-200 ease-in-out">Settings</a>
        <a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-orange-800 dark:text-orange-200 hover:text-orange-900 hover:bg-orange-100 dark:hover:bg-gray-800 dark:hover:text-yellow-400 transition duration-200 ease-in-out">Sign out</a>
      </div>
    </div>
  </div>
</nav>

<script>
  // This script toggle the mobile menu and dark mode.
  // In a real application, you would ensure these are correctly integrated with your framework or vanilla JS setup.
  document.addEventListener('DOMContentLoaded', () => {
    const mobileMenuButton = document.querySelector('nav button[aria-expanded]');
    const mobileMenu = document.getElementById('mobile-menu');
    const darkModeToggle = document.getElementById('dark-mode-toggle');

    // Mobile menu toggle
    mobileMenuButton.addEventListener('click', () => {
      const isExpanded = mobileMenuButton.getAttribute('aria-expanded') === 'true';
      mobileMenuButton.setAttribute('aria-expanded', !isExpanded);
      mobileMenu.classList.toggle('hidden');
      mobileMenuButton.querySelector('svg:first-child').classList.toggle('hidden');
      mobileMenuButton.querySelector('svg:last-child').classList.toggle('hidden');
    });

    // Dark mode toggle
    darkModeToggle.addEventListener('click', () => {
      if (document.documentElement.classList.contains('dark')) {
        document.documentElement.classList.remove('dark');
        localStorage.setItem('theme', 'light');
      } else {
        document.documentElement.classList.add('dark');
        localStorage.setItem('theme', 'dark');
      }
    });

    // Check for saved theme preference on load
    if (localStorage.getItem('theme') === 'dark' || (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
      document.documentElement.classList.add('dark');
    } else {
      document.documentElement.classList.remove('dark');
    }
  });
</script>

1 ... 29 30 31 32 33 ... 335

Search Components

Categories

All Components