Search Components

All Components

Browse all available Tailwind CSS components

Skeuomorphic_Earth_Tone_Data_Table

A simple, responsive data table with a skeuomorphic design style and earth-tone color scheme, suitable for business/corporate websites. Includes dark mode support.

Open Preview

                <div class="p-4 sm:p-6 md:p-8 bg-gradient-to-br from-stone-100 to-stone-200 dark:from-stone-900 dark:to-stone-950 min-h-screen font-sans">
  <div class="max-w-7xl mx-auto">
    <div class="bg-stone-300 dark:bg-stone-800 shadow-md shadow-stone-400/50 dark:shadow-stone-950/50 rounded-xl p-4 sm:p-6 mb-8
                border-t border-l border-stone-200 dark:border-stone-700
                border-b border-r border-stone-400 dark:border-stone-900
                inset-shadow-light dark:inset-shadow-dark">
      <h2 class="text-2xl sm:text-3xl font-bold text-stone-800 dark:text-stone-200 mb-4
                 text-shadow-light dark:text-shadow-dark">
        Project Overview
      </h2>
      <p class="text-stone-700 dark:text-stone-300 text-sm sm:text-base leading-relaxed">
        This table displays key metrics and status for ongoing projects. Each row represents a project with its current status, budget, and completion rate.
      </p>
    </div>

    <div class="overflow-x-auto relative rounded-xl shadow-lg shadow-stone-400/50 dark:shadow-stone-950/50
                border-t border-l border-stone-200 dark:border-stone-700
                border-b border-r border-stone-400 dark:border-stone-900
                inset-shadow-light dark:inset-shadow-dark">
      <table class="w-full text-sm text-left text-stone-500 dark:text-stone-400">
        <thead class="text-xs text-stone-700 uppercase bg-gradient-to-b from-stone-300 to-stone-400 dark:from-stone-700 dark:to-stone-800
                      rounded-t-lg
                      border-b border-stone-500 dark:border-stone-900
                      table-header-shadow">
          <tr>
            <th scope="col" class="py-3 px-4 sm:px-6 tracking-wider text-stone-800 dark:text-stone-200 font-semibold">
              Project Name
            </th>
            <th scope="col" class="py-3 px-4 sm:px-6 tracking-wider text-stone-800 dark:text-stone-200 font-semibold hidden md:table-cell">
              Manager
            </th>
            <th scope="col" class="py-3 px-4 sm:px-6 tracking-wider text-stone-800 dark:text-stone-200 font-semibold">
              Status
            </th>
            <th scope="col" class="py-3 px-4 sm:px-6 tracking-wider text-stone-800 dark:text-stone-200 font-semibold hidden sm:table-cell">
              Budget
            </th>
            <th scope="col" class="py-3 px-4 sm:px-6 tracking-wider text-stone-800 dark:text-stone-200 font-semibold hidden lg:table-cell">
              Completion
            </th>
            <th scope="col" class="py-3 px-4 sm:px-6 tracking-wider text-stone-800 dark:text-stone-200 font-semibold">
              Actions
            </th>
          </tr>
        </thead>
        <tbody>
          <tr class="bg-stone-100 dark:bg-stone-850 border-b border-stone-200 dark:border-stone-700
                     even:bg-stone-200 dark:even:bg-stone-900
                     hover:bg-stone-300 dark:hover:bg-stone-700 transition-colors duration-200">
            <th scope="row" class="py-4 px-4 sm:px-6 font-medium text-stone-900 dark:text-stone-100 whitespace-nowrap">
              Website Redesign
            </th>
            <td class="py-4 px-4 sm:px-6 text-stone-700 dark:text-stone-300 hidden md:table-cell">
              <div class="flex items-center space-x-2">
                <img class="w-6 h-6 rounded-full inline-block border border-stone-400/50 dark:border-stone-600/50 shadow-sm shadow-stone-400/50" src="https://randomuser.me/api/portraits/women/44.jpg" alt="Avatar">
                <span>Jane Doe</span>
              </div>
            </td>
            <td class="py-4 px-4 sm:px-6">
              <span class="px-2 py-1 inline-flex text-xs leading-5 font-semibold rounded-full bg-emerald-100 text-emerald-800 dark:bg-emerald-900 dark:text-emerald-100 
                           shadow-sm-light dark:shadow-sm-dark">
                Completed
              </span>
            </td>
            <td class="py-4 px-4 sm:px-6 text-stone-700 dark:text-stone-300 hidden sm:table-cell">
              $25,000
            </td>
            <td class="py-4 px-4 sm:px-6 hidden lg:table-cell">
              <div class="w-full bg-stone-300 dark:bg-stone-700 rounded-full h-2.5 shadow-inset-light dark:shadow-inset-dark">
                <div class="bg-emerald-600 h-2.5 rounded-full" style="width: 100%"></div>
              </div>
            </td>
            <td class="py-4 px-4 sm:px-6">
              <a href="#" class="font-medium text-brown-600 dark:text-brown-400 hover:underline hover-button-inset-light dark:hover-button-inset-dark
                         px-2 py-1 rounded
                         transition-all duration-200">
                View
              </a>
            </td>
          </tr>
          <tr class="bg-stone-100 dark:bg-stone-850 border-b border-stone-200 dark:border-stone-700
                     even:bg-stone-200 dark:even:bg-stone-900
                     hover:bg-stone-300 dark:hover:bg-stone-700 transition-colors duration-200">
            <th scope="row" class="py-4 px-4 sm:px-6 font-medium text-stone-900 dark:text-stone-100 whitespace-nowrap">
              Mobile App Development
            </th>
            <td class="py-4 px-4 sm:px-6 text-stone-700 dark:text-stone-300 hidden md:table-cell">
              <div class="flex items-center space-x-2">
                <img class="w-6 h-6 rounded-full inline-block border border-stone-400/50 dark:border-stone-600/50 shadow-sm shadow-stone-400/50" src="https://randomuser.me/api/portraits/men/32.jpg" alt="Avatar">
                <span>John Smith</span>
              </div>
            </td>
            <td class="py-4 px-4 sm:px-6">
              <span class="px-2 py-1 inline-flex text-xs leading-5 font-semibold rounded-full bg-amber-100 text-amber-800 dark:bg-amber-900 dark:text-amber-100
                           shadow-sm-light dark:shadow-sm-dark">
                In Progress
              </span>
            </td>
            <td class="py-4 px-4 sm:px-6 text-stone-700 dark:text-stone-300 hidden sm:table-cell">
              $75,000
            </td>
            <td class="py-4 px-4 sm:px-6 hidden lg:table-cell">
              <div class="w-full bg-stone-300 dark:bg-stone-700 rounded-full h-2.5 shadow-inset-light dark:shadow-inset-dark">
                <div class="bg-amber-500 h-2.5 rounded-full" style="width: 60%"></div>
              </div>
            </td>
            <td class="py-4 px-4 sm:px-6">
              <a href="#" class="font-medium text-brown-600 dark:text-brown-400 hover:underline hover-button-inset-light dark:hover-button-inset-dark
                         px-2 py-1 rounded
                         transition-all duration-200">
                View
              </a>
            </td>
          </tr>
          <tr class="bg-stone-100 dark:bg-stone-850 border-b border-stone-200 dark:border-stone-700
                     even:bg-stone-200 dark:even:bg-stone-900
                     hover:bg-stone-300 dark:hover:bg-stone-700 transition-colors duration-200">
            <th scope="row" class="py-4 px-4 sm:px-6 font-medium text-stone-900 dark:text-stone-100 whitespace-nowrap">
              Marketing Campaign
            </th>
            <td class="py-4 px-4 sm:px-6 text-stone-700 dark:text-stone-300 hidden md:table-cell">
              <div class="flex items-center space-x-2">
                <img class="w-6 h-6 rounded-full inline-block border border-stone-400/50 dark:border-stone-600/50 shadow-sm shadow-stone-400/50" src="https://randomuser.me/api/portraits/women/2.jpg" alt="Avatar">
                <span>Emily White</span>
              </div>
            </td>
            <td class="py-4 px-4 sm:px-6">
              <span class="px-2 py-1 inline-flex text-xs leading-5 font-semibold rounded-full bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-100
                           shadow-sm-light dark:shadow-sm-dark">
                Planned
              </span>
            </td>
            <td class="py-4 px-4 sm:px-6 text-stone-700 dark:text-stone-300 hidden sm:table-cell">
              $30,000
            </td>
            <td class="py-4 px-4 sm:px-6 hidden lg:table-cell">
              <div class="w-full bg-stone-300 dark:bg-stone-700 rounded-full h-2.5 shadow-inset-light dark:shadow-inset-dark">
                <div class="bg-blue-500 h-2.5 rounded-full" style="width: 10%"></div>
              </div>
            </td>
            <td class="py-4 px-4 sm:px-6">
              <a href="#" class="font-medium text-brown-600 dark:text-brown-400 hover:underline hover-button-inset-light dark:hover-button-inset-dark
                         px-2 py-1 rounded
                         transition-all duration-200">
                View
              </a>
            </td>
          </tr>
          <tr class="bg-stone-100 dark:bg-stone-850 border-b border-stone-200 dark:border-stone-700
                     even:bg-stone-200 dark:even:bg-stone-900
                     hover:bg-stone-300 dark:hover:bg-stone-700 transition-colors duration-200">
            <th scope="row" class="py-4 px-4 sm:px-6 font-medium text-stone-900 dark:text-stone-100 whitespace-nowrap">
              Q1 Financial Report
            </th>
            <td class="py-4 px-4 sm:px-6 text-stone-700 dark:text-stone-300 hidden md:table-cell">
              <div class="flex items-center space-x-2">
                <img class="w-6 h-6 rounded-full inline-block border border-stone-400/50 dark:border-stone-600/50 shadow-sm shadow-stone-400/50" src="https://randomuser.me/api/portraits/men/88.jpg" alt="Avatar">
                <span>David Lee</span>
              </div>
            </td>
            <td class="py-4 px-4 sm:px-6">
              <span class="px-2 py-1 inline-flex text-xs leading-5 font-semibold rounded-full bg-amber-100 text-amber-800 dark:bg-amber-900 dark:text-amber-100
                           shadow-sm-light dark:shadow-sm-dark">
                In Progress
              </span>
            </td>
            <td class="py-4 px-4 sm:px-6 text-stone-700 dark:text-stone-300 hidden sm:table-cell">
              $10,000
            </td>
            <td class="py-4 px-4 sm:px-6 hidden lg:table-cell">
              <div class="w-full bg-stone-300 dark:bg-stone-700 rounded-full h-2.5 shadow-inset-light dark:shadow-inset-dark">
                <div class="bg-amber-500 h-2.5 rounded-full" style="width: 85%"></div>
              </div>
            </td>
            <td class="py-4 px-4 sm:px-6">
              <a href="#" class="font-medium text-brown-600 dark:text-brown-400 hover:underline hover-button-inset-light dark:hover-button-inset-dark
                         px-2 py-1 rounded
                         transition-all duration-200">
                View
              </a>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</div>

<style>
  /* Base for defining custom CSS variables for skeuomorphic effects */
  :root {
    --shadow-light-color-1: rgba(255, 255, 255, 0.7);
    --shadow-light-color-2: rgba(0, 0, 0, 0.2);
    --shadow-dark-color-1: rgba(0, 0, 0, 0.7);
    --shadow-dark-color-2: rgba(255, 255, 255, 0.05);
  }

  /* Light mode shadows */
  .inset-shadow-light {
    box-shadow: inset -2px -2px 5px var(--shadow-light-color-1),
                inset 2px 2px 5px var(--shadow-light-color-2);
  }
  .shadow-sm-light {
    box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1), -1px -1px 3px rgba(255, 255, 255, 0.5);
  }
  .shadow-inset-light {
    box-shadow: inset 1px 1px 2px rgba(0, 0, 0, 0.1), inset -1px -1px 2px rgba(255, 255, 255, 0.5);
  }
  .text-shadow-light {
    text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.7), -1px -1px 2px rgba(0, 0, 0, 0.1);
  }
  .table-header-shadow {
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06),
                0 2px 2px rgba(255, 255, 255, 0.5) inset;
  }
  .hover-button-inset-light {
    box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2), -2px -2px 4px rgba(255, 255, 255, 0.7);
  }
  .hover-button-inset-light:hover {
    box-shadow: inset 2px 2px 5px var(--shadow-light-color-2),
                inset -2px -2px 5px var(--shadow-light-color-1);
  }

  /* Dark mode shadows using custom properties */
  .dark .inset-shadow-dark {
    box-shadow: inset -2px -2px 5px var(--shadow-dark-color-1),
                inset 2px 2px 5px var(--shadow-dark-color-2);
  }
  .dark .shadow-sm-dark {
    box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.8), -1px -1px 3px rgba(255, 255, 255, 0.05);
  }
  .dark .shadow-inset-dark {
    box-shadow: inset 1px 1px 2px rgba(0, 0, 0, 0.8), inset -1px -1px 2px rgba(255, 255, 255, 0.05);
  }
  .dark .text-shadow-dark {
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.7), -1px -1px 2px rgba(255, 255, 255, 0.1);
  }
  .dark .table-header-shadow {
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.5), 0 2px 4px -1px rgba(0, 0, 0, 0.3),
                0 2px 2px rgba(0, 0, 0, 0.7) inset;
  }
  .dark .hover-button-inset-dark {
    box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8), -2px -2px 4px rgba(255, 255, 255, 0.05);
  }
  .dark .hover-button-inset-dark:hover {
    box-shadow: inset 2px 2px 5px var(--shadow-dark-color-2),
                inset -2px -2px 5px var(--shadow-dark-color-1);
  }

  /* Define custom colors */
  .text-brown-600 {
    color: #795548; /* A warm brown */
  }
  .dark .text-brown-400 {
    color: #a1887f; /* A lighter warm brown for dark mode */
  }



</style>

Cyberpunk_Portfolio_Navigation

A complex, responsive cyberpunk-themed navigation component for a portfolio, featuring futuristic neon purple aesthetics, dark backgrounds, and interactive elements. Includes dark mode support.

Open Preview

                <header class="bg-zinc-950 text-purple-400 shadow-lg shadow-purple-900/50 dark:bg-zinc-900 dark:text-purple-300 dark:shadow-purple-700/30 font-mono tracking-wide relative z-50">
  <div class="container mx-auto px-4 py-3 flex items-center justify-between lg:py-4">
    <a href="#" class="flex items-center space-x-2 group">
      <svg class="h-8 w-8 text-purple-600 group-hover:text-purple-400 transition-colors duration-300" fill="none" viewBox="0 0 24 24" stroke="currentColor">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.75 17L9 20l-1 1h8l-1-1-1.25-3M19.5 10l.91-1m-1.54-5.5l.01-.01M7.05 12.05l-.01-.01M2.27 14L4 15.5l.65-.65V18l2-2v-.65l.65-.65H11l-.45-.45-1.07-1.07M12 17.25L10.5 16ZM6 10V6l1-1h6l1 1v4l-1 1H7l-1-1zm4.75-5l-.5-.5L4 8.75l-.5.5L7 12.25l.5.5zM12.25 17.25L16 13.5l.5-.5L12.25 9.75l-.5-.5zM17 10V6l1-1h6l1 1v4l-1 1h-6l-1-1z" />
      </svg>
      <span class="text-2xl font-bold text-purple-500 group-hover:text-purple-300 transition-colors duration-300">[SYNAPTIC]</span>
    </a>

    <nav class="hidden lg:flex space-x-8">
      <a href="#projects" class="text-lg relative group overflow-hidden py-1 leading-none">
        Projects
        <span class="absolute bottom-0 left-0 w-full h-[2px] bg-purple-500 transform scale-x-0 group-hover:scale-x-100 transition-transform duration-300 origin-left"></span>
        <span class="absolute top-0 right-0 w-[2px] h-full bg-purple-500 transform scale-y-0 group-hover:scale-y-100 transition-transform duration-300 origin-top"></span>
        <span class="absolute top-0 left-0 w-full h-[2px] bg-purple-500 transform scale-x-0 group-hover:scale-x-100 transition-transform duration-300 origin-right"></span>
        <span class="absolute bottom-0 right-0 w-[2px] h-full bg-purple-500 transform scale-y-0 group-hover:scale-y-100 transition-transform duration-300 origin-bottom"></span>
      </a>
      <a href="#skills" class="text-lg relative group overflow-hidden py-1 leading-none">
        Skills
        <span class="absolute bottom-0 left-0 w-full h-[2px] bg-purple-500 transform scale-x-0 group-hover:scale-x-100 transition-transform duration-300 origin-left"></span>
        <span class="absolute top-0 right-0 w-[2px] h-full bg-purple-500 transform scale-y-0 group-hover:scale-y-100 transition-transform duration-300 origin-top"></span>
        <span class="absolute top-0 left-0 w-full h-[2px] bg-purple-500 transform scale-x-0 group-hover:scale-x-100 transition-transform duration-300 origin-right"></span>
        <span class="absolute bottom-0 right-0 w-[2px] h-full bg-purple-500 transform scale-y-0 group-hover:scale-y-100 transition-transform duration-300 origin-bottom"></span>
      </a>
      <a href="#experience" class="text-lg relative group overflow-hidden py-1 leading-none">
        Experience
        <span class="absolute bottom-0 left-0 w-full h-[2px] bg-purple-500 transform scale-x-0 group-hover:scale-x-100 transition-transform duration-300 origin-left"></span>
        <span class="absolute top-0 right-0 w-[2px] h-full bg-purple-500 transform scale-y-0 group-hover:scale-y-100 transition-transform duration-300 origin-top"></span>
        <span class="absolute top-0 left-0 w-full h-[2px] bg-purple-500 transform scale-x-0 group-hover:scale-x-100 transition-transform duration-300 origin-right"></span>
        <span class="absolute bottom-0 right-0 w-[2px] h-full bg-purple-500 transform scale-y-0 group-hover:scale-y-100 transition-transform duration-300 origin-bottom"></span>
      </a>
      <a href="#contact" class="text-lg relative group overflow-hidden py-1 leading-none">
        Contact
        <span class="absolute bottom-0 left-0 w-full h-[2px] bg-purple-500 transform scale-x-0 group-hover:scale-x-100 transition-transform duration-300 origin-left"></span>
        <span class="absolute top-0 right-0 w-[2px] h-full bg-purple-500 transform scale-y-0 group-hover:scale-y-100 transition-transform duration-300 origin-top"></span>
        <span class="absolute top-0 left-0 w-full h-[2px] bg-purple-500 transform scale-x-0 group-hover:scale-x-100 transition-transform duration-300 origin-right"></span>
        <span class="absolute bottom-0 right-0 w-[2px] h-full bg-purple-500 transform scale-y-0 group-hover:scale-y-100 transition-transform duration-300 origin-bottom"></span>
      </a>
    </nav>

    <div class="flex items-center space-x-4">
      <!-- Dark Mode Toggle (placeholder for JS functionality) -->
      <button aria-label="Toggle dark mode" class="p-2 rounded-full bg-purple-800 text-purple-200 hover:bg-purple-700 focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-offset-2 focus:ring-offset-zinc-950 dark:bg-purple-700 dark:hover:bg-purple-600 dark:focus:ring-offset-zinc-900 transition-colors duration-300">
        <svg class="w-6 h-6" 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>

      <!-- Mobile Menu Button -->
      <button aria-label="Open menu" class="lg:hidden p-2 rounded-md bg-purple-800 text-purple-200 hover:bg-purple-700 focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-offset-2 focus:ring-offset-zinc-950 dark:bg-purple-700 dark:hover:bg-purple-600 dark:focus:ring-offset-zinc-900 transition-colors duration-300">
        <svg class="w-7 h-7" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
        </svg>
      </button>
    </div>
  </div>

  <!-- Mobile Menu (hidden by default, would be toggled by JS) -->
  <div class="lg:hidden absolute top-full left-0 w-full bg-zinc-900 border-t border-purple-800 shadow-xl shadow-purple-900/50 dark:bg-zinc-800 dark:border-purple-700 dark:shadow-purple-700/30 overflow-hidden" style="max-height: 0; transition: max-height 0.4s ease-out;">
    <nav class="flex flex-col p-4 space-y-3">
      <a href="#projects" class="block text-lg py-2 px-3 rounded-md text-purple-300 bg-zinc-800 hover:bg-purple-800 hover:text-white transition-colors duration-300 dark:bg-zinc-700 dark:hover:bg-purple-700">Projects</a>
      <a href="#skills" class="block text-lg py-2 px-3 rounded-md text-purple-300 bg-zinc-800 hover:bg-purple-800 hover:text-white transition-colors duration-300 dark:bg-zinc-700 dark:hover:bg-purple-700">Skills</a>
      <a href="#experience" class="block text-lg py-2 px-3 rounded-md text-purple-300 bg-zinc-800 hover:bg-purple-800 hover:text-white transition-colors duration-300 dark:bg-zinc-700 dark:hover:bg-purple-700">Experience</a>
      <a href="#contact" class="block text-lg py-2 px-3 rounded-md text-purple-300 bg-zinc-800 hover:bg-purple-800 hover:text-white transition-colors duration-300 dark:bg-zinc-700 dark:hover:bg-purple-700">Contact</a>
    </nav>
    <div class="flex justify-center p-4 border-t border-purple-800 dark:border-purple-700">
      <img src="https://randomuser.me/api/portraits/men/75.jpg" alt="Developer Avatar" class="w-16 h-16 rounded-full border-2 border-purple-600 shadow-md shadow-purple-700/50 object-cover">
    </div>
  </div>
</header>

Add to Cart Button Component

A complex 'add to cart' button component for healthcare/medical applications, inspired by Swiss/International Typography and earth tones. It features a clean, minimalist design with a focus on typography and grid systems, offering full responsiveness and dark mode support.

Open Preview

                <div class="flex flex-col items-center justify-center min-h-screen bg-gray-50 dark:bg-gray-900 font-sans p-4 sm:p-6 md:p-8">

  <!-- Component Container -->
  <div class="w-full max-w-sm md:max-w-md lg:max-w-xl mx-auto rounded-lg shadow-xl overflow-hidden
              bg-white dark:bg-gray-800
              border border-gray-200 dark:border-gray-700
              transition-colors duration-300 ease-in-out">

    <!-- Product Header -->
    <div class="p-4 sm:p-5 md:p-6 border-b border-gray-200 dark:border-gray-700">
      <h2 class="text-xl sm:text-2xl font-semibold text-gray-800 dark:text-gray-100 mb-1
                 font-sans tracking-wide">
        MediKit Essential
      </h2>
      <p class="text-sm sm:text-base text-gray-600 dark:text-gray-400 font-light">
        Advanced Diagnostic & First Aid Kit
      </p>
    </div>

    <!-- Product Image and Details -->
    <div class="grid grid-cols-1 sm:grid-cols-2 gap-4 sm:gap-6 p-4 sm:p-5 md:p-6">
      <!-- Product Image -->
      <div class="relative rounded-md overflow-hidden aspect-video sm:aspect-square flex items-center justify-center bg-gray-100 dark:bg-gray-700">
        <img src="https://picsum.photos/600/400?random=10" alt="MediKit Essential Product Image" class="w-full h-full object-cover" loading="lazy">
        <span class="absolute top-2 left-2 px-3 py-1 bg-amber-600/90 dark:bg-amber-700/90 text-white text-xs font-bold rounded-full shadow-md">
          <span class="hidden sm:inline">Limited </span>Stock
        </span>
      </div>

      <!-- Product Details -->
      <div class="flex flex-col justify-between">
        <div>
          <p class="text-lg sm:text-xl font-bold text-gray-800 dark:text-gray-100 mb-2
             font-sans tracking-tight">
            <span class="line-through text-gray-400 dark:text-gray-500 mr-2 text-base sm:text-lg">$119.99</span>
            $99.99
          </p>
          <ul class="text-sm text-gray-700 dark:text-gray-300 space-y-1 mb-4">
            <li class="flex items-center">
              <svg class="w-4 h-4 mr-2 text-green-600 dark:text-green-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="M5 13l4 4L19 7"></path></svg>
              FDA Approved
            </li>
            <li class="flex items-center">
              <svg class="w-4 h-4 mr-2 text-green-600 dark:text-green-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2d00/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
              CE Certified
            </li>
            <li class="flex items-center">
              <svg class="w-4 h-4 mr-2 text-green-600 dark:text-green-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="M5 13l4 4L19 7"></path></svg>
              2-Year Warranty
            </li>
          </ul>
        </div>

        <!-- Quantity Selector -->
        <div class="flex items-center justify-between mb-4 mt-auto">
          <label for="quantity" class="block text-sm font-medium text-gray-700 dark:text-gray-300 font-sans">Quantity:</label>
          <div class="flex items-center border border-gray-300 dark:border-gray-600 rounded-md overflow-hidden">
            <button aria-label="Decrease quantity" class="px-3 py-1 bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-gray-400 dark:focus:ring-gray-500 transition-colors duration-200 ease-in-out">
              −
            </button>
            <input type="number" id="quantity" value="1" min="1" max="10" aria-live="polite"
                   class="w-12 text-center bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 font-medium
                          text-sm border-x border-gray-300 dark:border-gray-600 outline-none
                          focus:ring-0 appearance-none [-moz-appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none">
            <button aria-label="Increase quantity" class="px-3 py-1 bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-gray-400 dark:focus:ring-gray-500 transition-colors duration-200 ease-in-out">
              +
            </button>
          </div>
        </div>
      </div>
    </div>

    <!-- Action Buttons -->
    <div class="p-4 sm:p-5 md:p-6 border-t border-gray-200 dark:border-gray-700 grid grid-cols-1 sm:grid-cols-2 gap-3 sm:gap-4">

      <button aria-label="Add to Cart" class="relative w-full py-3 px-4 rounded-md shadow-md
                  bg-green-700 dark:bg-green-600 text-white font-semibold text-base sm:text-lg
                  hover:bg-green-800 dark:hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-green-500 dark:focus:ring-green-400 focus:ring-offset-2
                  focus:ring-offset-white dark:focus:ring-offset-gray-800
                  transition-all duration-300 flex items-center justify-center space-x-2
                  active:scale-[0.98]">
        <svg class="w-5 h-5 sm:w-6 sm: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="M16 11V7a4 4 0 00-8 0v4M5 9h14l1 12H4L5 9z"></path></svg>
        <span>Add to Cart</span>
        <span class="absolute right-3 top-1/2 -translate-y-1/2 text-xs opacity-70 hidden md:block">
          ($99.99)
        </span>
      </button>

      <button aria-label="Buy Now" class="w-full py-3 px-4 rounded-md shadow-md
                  bg-gray-100 dark:bg-gray-700 text-gray-800 dark:text-gray-200 font-semibold text-base sm:text-lg
                  hover:bg-gray-200 dark:hover:bg-gray-600 border border-gray-300 dark:border-gray-600
                  focus:outline-none focus:ring-2 focus:ring-gray-400 dark:focus:ring-gray-500 focus:ring-offset-2
                  focus:ring-offset-white dark:focus:ring-offset-gray-800
                  transition-all duration-300 flex items-center justify-center space-x-2
                  active:scale-[0.98]">
        <svg class="w-5 h-5 sm:w-6 sm: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="M9 7H7a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-2m-13-2l4 4m0 0l4-4m-4 4V3"></path></svg>
        <span>Buy Now</span>
      </button>

    </div>

    <!-- Information Section (Optional) -->
    <div class="p-4 sm:p-5 md:p-6 bg-gray-50 dark:bg-gray-900 border-t border-gray-200 dark:border-gray-700">
      <div class="flex items-center text-sm text-gray-600 dark:text-gray-400">
        <svg class="w-5 h-5 mr-3 text-emerald-600 dark:text-emerald-400 flex-shrink-0" 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 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 12c0 3.037 1.282 5.767 3.322 7.749L12 21.051l5.75-2.289C20.713 17.514 22 14.887 22 12c0-2.887-1.287-5.514-3.37-7.468z"></path></svg>
        <span>Secure Checkout Guaranteed. Orders ship within 24 hours.</span>
      </div>
    </div>

  </div>
</div>

Monospace_Developer_Simple_Finance_Navigation

A simple, clean, code-inspired navigation component for finance/banking interfaces, featuring monospace fonts, warm sunset tones, and full responsiveness with dark mode support.

Open Preview

                <nav class="bg-orange-500 dark:bg-gray-900 shadow-md font-mono">
  <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-900 dark:text-orange-400 text-2xl font-bold tracking-tight">FIJI.DEV</a>
        </div>
        <div class="hidden md:block">
          <div class="ml-10 flex items-baseline space-x-4">
            <a href="#" class="px-3 py-2 rounded-md text-sm font-medium text-orange-800 dark:text-gray-300 hover:bg-orange-600 dark:hover:bg-gray-800 hover:text-white transition-colors duration-200">Dashboard</a>
            <a href="#" class="px-3 py-2 rounded-md text-sm font-medium text-orange-800 dark:text-gray-300 hover:bg-orange-600 dark:hover:bg-gray-800 hover:text-white transition-colors duration-200">Transactions</a>
            <a href="#" class="px-3 py-2 rounded-md text-sm font-medium text-orange-800 dark:text-gray-300 hover:bg-orange-600 dark:hover:bg-gray-800 hover:text-white transition-colors duration-200">Accounts</a>
            <a href="#" class="px-3 py-2 rounded-md text-sm font-medium text-orange-800 dark:text-gray-300 hover:bg-orange-600 dark:hover:bg-gray-800 hover:text-white transition-colors duration-200">Settings</a>
          </div>
        </div>
      </div>
      <div class="hidden md:block">
        <div class="ml-4 flex items-center md:ml-6">
          <button type="button" class="p-1 rounded-full text-orange-800 dark:text-gray-400 hover:text-white dark:hover:text-white hover:bg-orange-600 dark:hover:bg-gray-800 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-orange-500 dark:focus:ring-offset-gray-900 focus:ring-white transition-colors duration-200">
            <span class="sr-only">View notifications</span>
            <!-- Heroicon bell -->
            <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>

          <!-- Profile dropdown -->
          <div class="ml-3 relative">
            <div>
              <button type="button" class="max-w-xs bg-orange-600 dark:bg-gray-800 rounded-full flex items-center text-sm focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-orange-500 dark:focus:ring-offset-gray-900 focus:ring-white" 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" src="https://randomuser.me/api/portraits/men/32.jpg" alt="User avatar">
              </button>
            </div>
            <!--
              Dropdown menu, show/hide based on menu state.

              Entering: "transition ease-out duration-100"
                From: "transform opacity-0 scale-95"
                To: "transform opacity-100 scale-100"
              Leaving: "transition ease-in duration-75"
                From: "transform opacity-100 scale-100"
                To: "transform opacity-0 scale-95"
            -->
            <!-- Placeholder for dropdown content, not implemented as per JSON requirement for pure HTML/CSS -->
          </div>
        </div>
      </div>
      <!-- Mobile menu button -->
      <div class="-mr-2 flex md:hidden">
        <button type="button" class="inline-flex items-center justify-center p-2 rounded-md text-orange-800 dark:text-gray-400 hover:text-white dark:hover:text-white hover:bg-orange-600 dark:hover:bg-gray-800 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-orange-500 dark:focus:ring-offset-gray-900 focus:ring-white" aria-controls="mobile-menu" aria-expanded="false">
          <span class="sr-only">Open main menu</span>
          <!-- Icon when menu is closed. -->
          <!-- Heroicon hamburger menu -->
          <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. -->
          <!-- Heroicon close menu -->
          <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. Only for layout demonstration; requires JS to toggle. -->
  <div class="md:hidden" id="mobile-menu">
    <div class="px-2 pt-2 pb-3 space-y-1 sm:px-3">
      <a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-orange-800 dark:text-gray-300 hover:bg-orange-600 dark:hover:bg-gray-800 hover:text-white transition-colors duration-200">Dashboard</a>
      <a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-orange-800 dark:text-gray-300 hover:bg-orange-600 dark:hover:bg-gray-800 hover:text-white transition-colors duration-200">Transactions</a>
      <a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-orange-800 dark:text-gray-300 hover:bg-orange-600 dark:hover:bg-gray-800 hover:text-white transition-colors duration-200">Accounts</a>
      <a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-orange-800 dark:text-gray-300 hover:bg-orange-600 dark:hover:bg-gray-800 hover:text-white transition-colors duration-200">Settings</a>
    </div>
    <div class="pt-4 pb-3 border-t border-orange-700 dark:border-gray-700">
      <div class="flex items-center px-5">
        <div class="flex-shrink-0">
          <img class="h-10 w-10 rounded-full" src="https://randomuser.me/api/portraits/men/32.jpg" alt="User avatar">
        </div>
        <div class="ml-3">
          <div class="text-base font-medium leading-none text-orange-900 dark:text-white">John Doe</div>
          <div class="text-sm font-medium leading-none text-orange-800 dark:text-gray-400">[email protected]</div>
        </div>
        <button type="button" class="ml-auto flex-shrink-0 bg-orange-600 dark:bg-gray-800 p-1 rounded-full text-orange-800 dark:text-gray-400 hover:text-white dark:hover:text-white focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-orange-500 dark:focus:ring-offset-gray-900 focus:ring-white transition-colors duration-200">
          <span class="sr-only">View notifications</span>
          <!-- Heroicon bell -->
          <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-gray-300 hover:bg-orange-600 dark:hover:bg-gray-800 hover:text-white transition-colors duration-200">Your Profile</a>
        <a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-orange-800 dark:text-gray-300 hover:bg-orange-600 dark:hover:bg-gray-800 hover:text-white transition-colors duration-200">Settings</a>
        <a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-orange-800 dark:text-gray-300 hover:bg-orange-600 dark:hover:bg-gray-800 hover:text-white transition-colors duration-200">Sign out</a>
      </div>
    </div>
  </div>
</nav>

Memphis_Vibrant_Marketplace_Dropdown_Menu

A complex, responsive dropdown menu component for a marketplace, designed with a vibrant Memphis-style aesthetic. Features bold colors, geometric shapes, and dark mode support.

Open Preview

                <div class="relative inline-block text-left font-sans">
  <div>
    <button type="button" class="inline-flex justify-center w-full rounded-full border-4 border-yellow-400 dark:border-yellow-500 shadow-lg px-6 py-3 bg-fuchsia-500 text-lg font-extrabold text-white hover:bg-fuchsia-600 focus:outline-none focus:ring-4 focus:ring-yellow-300 dark:focus:ring-yellow-600 transition duration-300 ease-in-out transform hover:scale-105 active:scale-95 sm:text-base md:text-lg lg:text-xl" id="menu-button" aria-expanded="true" aria-haspopup="true">
      Categories
      <svg class="-mr-1 ml-3 h-6 w-6 text-white" 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>
    </button>
  </div>

  <!-- Dropdown menu, show/hide based on menu state. -->
  <div class="origin-top-right absolute right-0 mt-3 w-72 md:w-80 lg:w-96 rounded-3xl shadow-xl bg-gradient-to-br from-violet-500 to-pink-500 dark:from-violet-700 dark:to-pink-700 ring-4 ring-orange-400 dark:ring-orange-600 ring-offset-4 ring-offset-blue-300 dark:ring-offset-blue-900 focus:outline-none overflow-hidden transform scale-100 opacity-100 transition ease-out duration-300" role="menu" aria-orientation="vertical" aria-labelledby="menu-button" tabindex="-1">
    <div class="py-2" role="none">
      <!-- Search Bar -->
      <div class="px-4 py-2 mb-2">
        <input type="text" placeholder="Search categories..." class="w-full p-3 rounded-xl border-2 border-indigo-400 dark:border-indigo-600 bg-white bg-opacity-90 text-gray-800 dark:text-gray-200 placeholder-gray-500 dark:placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-violet-300 dark:focus:ring-violet-500 transition duration-200 text-base sm:text-sm md:text-base">
      </div>
      
      <!-- Section Header -->
      <div class="px-4 py-2 bg-gradient-to-r from-teal-400 to-green-400 dark:from-teal-600 dark:to-green-600 text-white font-bold text-lg uppercase tracking-wide border-b-2 border-dotted border-white/50 dark:border-white/30 text-center rounded-t-xl sm:text-base md:text-lg">
        Top Categories
      </div>

      <!-- Menu Items -->
      <a href="#" class="group flex items-center px-4 py-3 text-white text-base hover:bg-fuchsia-600 hover:text-yellow-200 transition-all duration-200 border-b border-white/20 dark:border-white/10 last:border-0 sm:text-sm md:text-base" role="menuitem" tabindex="-1" id="menu-item-0">
        <img src="https://picsum.photos/40/40?random=1" alt="Electronics icon" class="w-8 h-8 rounded-full object-cover mr-3 border-2 border-white group-hover:border-yellow-200">
        <span class="font-semibold">Electronics</span>
        <span class="ml-auto text-sm opacity-75 group-hover:opacity-100">(120k listings)</span>
      </a>
      <a href="#" class="group flex items-center px-4 py-3 text-white text-base hover:bg-fuchsia-600 hover:text-yellow-200 transition-all duration-200 border-b border-white/20 dark:border-white/10 last:border-0 sm:text-sm md:text-base" role="menuitem" tabindex="-1" id="menu-item-1">
        <img src="https://picsum.photos/40/40?random=2" alt="Fashion icon" class="w-8 h-8 rounded-full object-cover mr-3 border-2 border-white group-hover:border-yellow-200">
        <span class="font-semibold">Fashion & Apparel</span>
        <span class="ml-auto text-sm opacity-75 group-hover:opacity-100">(95k listings)</span>
      </a>
      <a href="#" class="group flex items-center px-4 py-3 text-white text-base hover:bg-fuchsia-600 hover:text-yellow-200 transition-all duration-200 border-b border-white/20 dark:border-white/10 last:border-0 sm:text-sm md:text-base" role="menuitem" tabindex="-1" id="menu-item-2">
        <img src="https://picsum.photos/40/40?random=3" alt="Home icon" class="w-8 h-8 rounded-full object-cover mr-3 border-2 border-white group-hover:border-yellow-200">
        <span class="font-semibold">Home & Garden</span>
        <span class="ml-auto text-sm opacity-75 group-hover:opacity-100">(78k listings)</span>
      </a>
      <a href="#" class="group flex items-center px-4 py-3 text-white text-base hover:bg-fuchsia-600 hover:text-yellow-200 transition-all duration-200 border-b border-white/20 dark:border-white/10 last:border-0 sm:text-sm md:text-base" role="menuitem" tabindex="-1" id="menu-item-3">
        <img src="https://picsum.photos/40/40?random=4" alt="Art icon" class="w-8 h-8 rounded-full object-cover mr-3 border-2 border-white group-hover:border-yellow-200">
        <span class="font-semibold">Art & Collectibles</span>
        <span class="ml-auto text-sm opacity-75 group-hover:opacity-100">(55k listings)</span>
      </a>
      <a href="#" class="group flex items-center px-4 py-3 text-white text-base hover:bg-fuchsia-600 hover:text-yellow-200 transition-all duration-200 sm:text-sm md:text-base" role="menuitem" tabindex="-1" id="menu-item-4">
        <img src="https://picsum.photos/40/40?random=5" alt="Sports icon" class="w-8 h-8 rounded-full object-cover mr-3 border-2 border-white group-hover:border-yellow-200">
        <span class="font-semibold">Sports & Outdoors</span>
        <span class="ml-auto text-sm opacity-75 group-hover:opacity-100">(42k listings)</span>
      </a>

      <!-- Call to Action -->
      <div class="border-t-2 border-dotted border-white/50 dark:border-white/30 pt-4 px-4 pb-2 mt-4 text-center" role="none">
        <a href="#" class="inline-flex items-center justify-center w-full px-5 py-3 border-4 border-lime-400 dark:border-lime-500 rounded-full shadow-md font-bold text-lg bg-cyan-400 text-teal-900 hover:bg-cyan-500 hover:text-teal-800 focus:outline-none focus:ring-4 focus:ring-lime-300 dark:focus:ring-lime-600 transition duration-300 ease-in-out transform hover:scale-105 active:scale-95 sm:text-base md:text-lg">
          <svg class="w-6 h-6 mr-2" 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>
          View All Categories
        </a>
      </div>
    </div>
  </div>
</div>

Industrial_Candy_Footer_Component

A responsive footer component for a forum/community platform, featuring an 'industrial' aesthetic with 'candy/sweet' color accents. Includes navigation links, social media icons, copyright, and a newsletter signup, with full dark mode support.

Open Preview

                <footer class="bg-zinc-100 dark:bg-zinc-900 text-zinc-900 dark:text-zinc-50 font-sans border-t-4 border-t-pink-500 dark:border-t-pink-700 shadow-lg">
  <div class="container mx-auto px-4 py-12 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-12">

    <!-- Section 1: Logo & Tagline -->
    <div class="flex flex-col items-start">
      <a href="#" class="text-4xl lg:text-5xl font-extrabold tracking-tighter text-pink-500 dark:text-pink-400 mb-4 font-mono transform hover:scale-105 transition-transform duration-300">
        FORUM<span class="text-emerald-500 dark:text-emerald-400">HUB</span>
      </a>
      <p class="text-sm text-zinc-700 dark:text-zinc-300 leading-relaxed max-w-xs">
        Your vibrant community for discussions, insights, and connections. Built on solid ground.
      </p>
      <div class="mt-6 flex flex-wrap gap-4 text-zinc-600 dark:text-zinc-400">
        <p class="text-xs font-semibold uppercase tracking-wider">Powered by:</p>
        <span class="text-xs bg-pink-200 dark:bg-pink-800 text-pink-700 dark:text-pink-300 px-2 py-0.5 rounded-full shadow-inner">Gears</span>
        <span class="text-xs bg-emerald-200 dark:bg-emerald-800 text-emerald-700 dark:text-emerald-300 px-2 py-0.5 rounded-full shadow-inner">Circuits</span>
      </div>
    </div>

    <!-- Section 2: Quick Links -->
    <div>
      <h3 class="text-lg font-bold uppercase tracking-wide text-zinc-800 dark:text-zinc-100 mb-6 border-b-2 border-emerald-500 dark:border-emerald-700 pb-2 inline-block">
        Quick Links
      </h3>
      <ul class="space-y-4">
        <li>
          <a href="#" class="text-zinc-700 dark:text-zinc-300 hover:text-pink-500 dark:hover:text-pink-400 transition-colors duration-200 text-base font-medium relative group">
            Home
            <span class="absolute bottom-0 left-0 w-0 h-0.5 bg-emerald-500 dark:bg-emerald-400 group-hover:w-full transition-all duration-300"></span>
          </a>
        </li>
        <li>
          <a href="#" class="text-zinc-700 dark:text-zinc-300 hover:text-pink-500 dark:hover:text-pink-400 transition-colors duration-200 text-base font-medium relative group">
            Forums
            <span class="absolute bottom-0 left-0 w-0 h-0.5 bg-emerald-500 dark:bg-emerald-400 group-hover:w-full transition-all duration-300"></span>
          </a>
        </li>
        <li>
          <a href="#" class="text-zinc-700 dark:text-zinc-300 hover:text-pink-500 dark:hover:text-pink-400 transition-colors duration-200 text-base font-medium relative group">
            Members
            <span class="absolute bottom-0 left-0 w-0 h-0.5 bg-emerald-500 dark:bg-emerald-400 group-hover:w-full transition-all duration-300"></span>
          </a>
        </li>
        <li>
          <a href="#" class="text-zinc-700 dark:text-zinc-300 hover:text-pink-500 dark:hover:text-pink-400 transition-colors duration-200 text-base font-medium relative group">
            Guidelines
            <span class="absolute bottom-0 left-0 w-0 h-0.5 bg-emerald-500 dark:bg-emerald-400 group-hover:w-full transition-all duration-300"></span>
          </a>
        </li>
      </ul>
    </div>

    <!-- Section 3: Resources -->
    <div>
      <h3 class="text-lg font-bold uppercase tracking-wide text-zinc-800 dark:text-zinc-100 mb-6 border-b-2 border-emerald-500 dark:border-emerald-700 pb-2 inline-block">
        Resources
      </h3>
      <ul class="space-y-4">
        <li>
          <a href="#" class="text-zinc-700 dark:text-zinc-300 hover:text-pink-500 dark:hover:text-pink-400 transition-colors duration-200 text-base font-medium relative group">
            FAQ
            <span class="absolute bottom-0 left-0 w-0 h-0.5 bg-emerald-500 dark:bg-emerald-400 group-hover:w-full transition-all duration-300"></span>
          </a>
        </li>
        <li>
          <a href="#" class="text-zinc-700 dark:text-zinc-300 hover:text-pink-500 dark:hover:text-pink-400 transition-colors duration-200 text-base font-medium relative group">
            Support
            <span class="absolute bottom-0 left-0 w-0 h-0.5 bg-emerald-500 dark:bg-emerald-400 group-hover:w-full transition-all duration-300"></span>
          </a>
        </li>
        <li>
          <a href="#" class="text-zinc-700 dark:text-zinc-300 hover:text-pink-500 dark:hover:text-pink-400 transition-colors duration-200 text-base font-medium relative group">
            Privacy Policy
            <span class="absolute bottom-0 left-0 w-0 h-0.5 bg-emerald-500 dark:bg-emerald-400 group-hover:w-full transition-all duration-300"></span>
          </a>
        </li>
        <li>
          <a href="#" class="text-zinc-700 dark:text-zinc-300 hover:text-pink-500 dark:hover:text-pink-400 transition-colors duration-200 text-base font-medium relative group">
            Terms of Service
            <span class="absolute bottom-0 left-0 w-0 h-0.5 bg-emerald-500 dark:bg-emerald-400 group-hover:w-full transition-all duration-300"></span>
          </a>
        </li>
      </ul>
    </div>

    <!-- Section 4: Newsletter & Social -->
    <div>
      <h3 class="text-lg font-bold uppercase tracking-wide text-zinc-800 dark:text-zinc-100 mb-6 border-b-2 border-emerald-500 dark:border-emerald-700 pb-2 inline-block">
        Stay Connected
      </h3>
      <p class="text-zinc-700 dark:text-zinc-300 mb-4 text-sm">
        Join our newsletter for community updates and exclusive content.
      </p>
      <form class="flex flex-col sm:flex-row gap-2 mb-8">
        <input
          type="email"
          placeholder="Your email..."
          aria-label="Email for newsletter"
          class="flex-grow px-4 py-2 rounded-lg bg-zinc-200 dark:bg-zinc-800 text-zinc-900 dark:text-zinc-50 placeholder-zinc-500 dark:placeholder-zinc-400
                 border-2 border-zinc-300 dark:border-zinc-700 focus:outline-none focus:border-pink-500 dark:focus:border-pink-400
                 transition-colors duration-200 shadow-inner text-sm"
        />
        <button
          type="submit"
          aria-label="Subscribe to newsletter"
          class="bg-pink-500 dark:bg-pink-600 hover:bg-pink-600 dark:hover:bg-pink-700 text-white font-semibold py-2 px-5 rounded-lg
                 transition-all duration-300 ease-in-out transform hover:scale-105 active:scale-95
                 focus:outline-none focus:ring-2 focus:ring-pink-400 dark:focus:ring-pink-500 focus:ring-opacity-75 relative overflow-hidden text-sm"
        >
          <span class="relative z-10">Subscribe</span>
          <span class="absolute top-0 left-0 w-full h-full bg-pink-700 dark:bg-pink-800 opacity-0 hover:opacity-10 transition-opacity duration-300"></span>
        </button>
      </form>

      <h4 class="text-md font-bold uppercase tracking-wide text-zinc-800 dark:text-zinc-100 mb-4">Follow Us</h4>
      <div class="flex space-x-6">
        <a href="#" aria-label="Follow us on Facebook" class="text-zinc-700 dark:text-zinc-300 hover:text-emerald-500 dark:hover:text-emerald-400 transition-colors duration-200 text-2xl transform hover:scale-125 transition-transform duration-200">
          <svg fill="currentColor" viewBox="0 0 24 24" width="1em" height="1em"><path d="M12 2.04C6.54 2.04 2 6.51 2 11.94c0 5.09 3.69 9.35 8.5 10.32v-7.31H7.81v-3.01h2.69V8.58c0-2.6 1.59-4.01 3.88-4.01 1.11 0 2.06.08 2.34.12v2.78h-1.64c-1.29 0-1.55.61-1.55 1.51v1.98h3.08l-.5 3.01h-2.58V22.26c4.98-.97 8.5-5.23 8.5-10.32 0-5.43-4.54-9.9-10.04-9.9z"></path></svg>
        </a>
        <a href="#" aria-label="Follow us on Twitter" class="text-zinc-700 dark:text-zinc-300 hover:text-emerald-500 dark:hover:text-emerald-400 transition-colors duration-200 text-2xl transform hover:scale-125 transition-transform duration-200">
          <svg fill="currentColor" viewBox="0 0 24 24" width="1em" height="1em"><path d="M22.46 6c-.77.34-1.6.56-2.46.66.89-.53 1.57-1.37 1.89-2.37-.83.49-1.74.85-2.73 1.05C18.18 4.3 17.06 4 15.89 4c-3.3 0-5.99 2.68-5.99 5.99 0 .47.05.93.13 1.37-4.98-.25-9.39-2.64-12.34-6.28-.52.87-.82 1.87-.82 2.94 0 2.07 1.05 3.89 2.64 4.97-.8-.02-1.55-.24-2.2-.6v.07c0 2.9 2.06 5.31 4.79 5.86-.47.13-.96.2-1.47.2-.36 0-.71-.03-1.05-.1.76 2.37 2.97 4.1 5.6 4.14-2.05 1.61-4.64 2.57-7.44 2.57-.49 0-.96-.03-1.43-.09 2.64 1.7 5.77 2.7 9.17 2.7 10.99 0 17.02-9.12 17.02-17.02 0-.26-.01-.52-.02-.78.73-.53 1.36-1.19 1.86-1.92z"></path></svg>
        </a>
        <a href="#" aria-label="Follow us on Instagram" class="text-zinc-700 dark:text-zinc-300 hover:text-emerald-500 dark:hover:text-emerald-400 transition-colors duration-200 text-2xl transform hover:scale-125 transition-transform duration-200">
          <svg fill="currentColor" viewBox="0 0 24 24" width="1em" height="1em"><path d="M7.8 2h8.4C19.4 2 22 4.6 22 7.8v8.4c0 3.2-2.6 5.8-5.8 5.8H7.8C4.6 22 2 19.4 2 16.2V7.8C2 4.6 4.6 2 7.8 2zm-.2 2A2.8 2.8 0 005 6.8v8.4C5 17.1 6.9 19 9.2 19h8.4c2.3 0 4.2-1.9 4.2-4.2V7.8A2.8 2.8 0 0019.2 5H7.6zm9.2-.7h.8v.8h-.8v-.8zm-5.4 2.2c-3.1 0-5.7 2.5-5.7 5.7s2.5 5.7 5.7 5.7 5.7-2.5 5.7-5.7-2.6-5.7-5.7-5.7zm0 2c2 0 3.7 1.6 3.7 3.7S14 17.7 12 17.7 8.3 16.1 8.3 14 10 10.3 12 10.3z"></path></svg>
        </a>
        <a href="#" aria-label="Follow us on LinkedIn" class="text-zinc-700 dark:text-zinc-300 hover:text-emerald-500 dark:hover:text-emerald-400 transition-colors duration-200 text-2xl transform hover:scale-125 transition-transform duration-200">
          <svg fill="currentColor" viewBox="0 0 24 24" width="1em" height="1em"><path d="M20.5 2h-17A1.5 1.5 0 002 3.5v17A1.5 1.5 0 003.5 22h17a1.5 1.5 0 001.5-1.5v-17A1.5 1.5 0 0020.5 2zm-12 17.5h-3v-7h3zM6.91 9.4c-1.12 0-2-.82-2-1.99 0-1.18.88-2 2-2.01 1.12 0 2 .82 2 1.99S8.03 9.4 6.91 9.4zm13.11 10.1h-3.05a.5.5 0 01-.5-.5v-4.38c0-.77-.07-1.46-.86-1.46-.72 0-1.22.49-1.42 1.05-.09.25-.13.58-.13.91v4.08a.5.5 0 01-.5.5h-2.91a.5.5 0 01-.5-.5V12c0-1.3.01-2.6.01-3.69-.01-.72-.08-1.39-.77-1.39-.71 0-1.22.49-1.42 1.05-.09.25-.13.59-.13.92v6.62a.5.5 0 01-.5.5h-3.05a.5.5 0 01-.5-.5v-7h3v1.27a.5.5 0 01.12.33c.48-.68 1.18-1.22 2.76-1.22 3.12 0 5.48 2.05 5.48 6.46v5.82a.5.5 0 01-.5.5zM12 11h-3v-2h3v2z"></path></svg>
        </a>
      </div>
    </div>
  </div>

  <!-- Bottom Bar: Copyright & Theme Toggle (Placeholder) -->
  <div class="bg-zinc-200 dark:bg-zinc-800 py-6 border-t border-t-zinc-300 dark:border-t-zinc-700">
    <div class="container mx-auto px-4 flex flex-col md:flex-row justify-between items-center text-sm text-zinc-600 dark:text-zinc-400">
      <p>&copy; 2023 ForumHub. All rights reserved. Built with <span class="text-pink-500 dark:text-pink-400">&hearts;</span> by Community Devs.</p>
      <div class="mt-4 md:mt-0 flex items-center space-x-4">
        <span class="font-semibold">Industrial Charm, Sweet Vibes.</span>
        <!-- Placeholder for a real theme toggle: -->
        <button
          aria-label="Toggle dark mode"
          class="bg-zinc-300 dark:bg-zinc-700 text-zinc-800 dark:text-zinc-200 px-3 py-1 rounded-full
                 hover:bg-zinc-400 dark:hover:bg-zinc-600 transition-colors duration-200 text-xs font-bold shadow-sm"
        >
          Toggle Theme
        </button>
      </div>
    </div>
  </div>
</footer>

Retro_Earth_Tone_Portfolio_Footer

A responsive, retro-themed footer navigation component for a portfolio website, featuring earth tones and dark mode support. Designed with 80s/90s aesthetics in mind, offering a nostalgic feel.

Open Preview

                <footer class="bg-amber-100 dark:bg-gray-900 text-amber-900 dark:text-gray-100 py-8 md:py-12 font-mono border-t-4 border-amber-900 dark:border-gray-700">
  <div class="container mx-auto px-4 md:px-8">
    <div class="grid grid-cols-1 md:grid-cols-4 gap-8 md:gap-12">
      <div class="flex flex-col items-center md:items-start text-center md:text-left">
        <a href="#" class="text-2xl font-bold uppercase tracking-wider mb-4 hover:text-amber-700 dark:hover:text-amber-300 transition-colors duration-300">
          [Your Portfolio]
        </a>
        <p class="text-sm mb-4 max-w-xs">Crafting digital experiences since the '90s. Pixel-perfect code. Analog soul.</p>
        <div class="flex space-x-4">
          <a href="#" class="text-amber-800 dark:text-gray-400 hover:text-amber-600 dark:hover:text-amber-200 transition-colors duration-300">
            <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
              <path fill-rule="evenodd" d="M22 12c0-5.523-4.477-10-10-10S2 6.477 2 12c0 4.991 3.657 9.128 8.438 9.878v-6.987h-2.54V12h2.54V9.797c0-2.506 1.492-3.89 3.777-3.89 1.094 0 2.238.195 2.238.195v2.46h-1.26c-1.243 0-1.63.771-1.63 1.562V12h2.773l-.443 2.89h-2.33V22c5.373-.623 9.573-4.721 9.573-9.879Z" clip-rule="evenodd" />
            </svg>
            <span class="sr-only">Facebook</span>
          </a>
          <a href="#" class="text-amber-800 dark:text-gray-400 hover:text-amber-600 dark:hover:text-amber-200 transition-colors duration-300">
            <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
              <path fill-rule="evenodd" d="M12.315 2c2.43 0 2.784.002 3.797.048.843.04 1.15.148 1.465.247a4.872 4.872 0 0 1 3.427 3.427c.099.315.207.622.247 1.465.047 1.013.049 1.371.049 3.797 0 2.43-.002 2.784-.048 3.797-.04.843-.148 1.15-.247 1.465a4.872 4.872 0 0 1-3.427 3.427c-.315.099-.622.207-1.465.247-1.013.047-1.371.049-3.797.049s-2.784-.002-3.797-.048c-.843-.04-1.15-.148-1.465-.247a4.872 4.872 0 0 1-3.427-3.427c-.099-.315-.207-.622-.247-1.465-.047-1.013-.049-1.371-.049-3.797s.002-2.784.048-3.797c.04-.843.148-1.15.247-1.465a4.872 4.872 0 0 1 3.427-3.427c.315-.099.622-.207 1.465-.247C9.567 2.002 9.92 2 12.315 2Zm0 0S5.474 2 5.031 2.008c-.844.04-1.282.174-1.637.387a3.36 3.36 0 0 0-1.921 1.921c-.213.355-.347.793-.387 1.637C2.002 6.969 2 7.413 2 12.001c0 4.588.002 5.031.008 5.875.04.844.174 1.282.387 1.637a3.36 3.36 0 0 0 1.921 1.921c.355.213.793.347 1.637.387C6.969 22.002 7.413 22 12.001 22c4.588 0 5.031-.002 5.875-.008.844-.04 1.282-.174 1.637-.387a3.36 3.36 0 0 0 1.921-1.921c.213-.355.347-.793.387-1.637.006-.844.008-1.282.008-5.875s-.002-5.031-.008-5.875c-.04-.844-.174-1.282-.387-1.637a3.36 3.36 0 0 0-1.921-1.921c-.355-.213-.793-.347-1.637-.387C17.031 2.002 16.588 2 12.001 2Zm0 5.875a6.126 6.126 0 1 0 0 12.252 6.126 6.126 0 0 0 0-12.252ZM12.001 16a4 4 0 1 1 0-8 4 4 0 0 1 0 8Zm6.406-11.848a1.69 1.69 0 1 0 0 3.38 1.69 1.69 0 0 0 0-3.38Z" clip-rule="evenodd" />
            </svg>
            <span class="sr-only">Instagram</span>
          </a>
          <a href="#" class="text-amber-800 dark:text-gray-400 hover:text-amber-600 dark:hover:text-amber-200 transition-colors duration-300">
            <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
              <path d="M8.29 20.35c-4.69 0-8.5-3.81-8.5-8.5s3.81-8.5 8.5-8.5c2.3 0 4.41.92 5.89 2.45l-1.8 1.8c-1.07-.95-2.52-1.55-4.09-1.55-3.32 0-6 2.68-6 6s2.68 6 6 6c3.04 0 5.6-2.26 5.89-5.3h-5.89V10h9.5c.13.62.2 1.25.2 1.9 0 5.24-4.24 9.5-9.5 9.5Z"/>
              <path d="M23 12h-9c0 5.24 4.24 9.5 9.5 9.5h-.5c-4.41 0-7.97-3.56-7.97-7.97 0-.65.07-1.28.2-1.9H23v2.85z"/>
            </svg>
            <span class="sr-only">Google</span>
          </a>
        </div>
      </div>

      <div>
        <h3 class="text-lg font-semibold mb-4 border-b border-amber-500 pb-2">Quick Links</h3>
        <nav class="flex flex-col space-y-2">
          <a href="#" class="hover:text-amber-700 dark:hover:text-amber-300 transition-colors duration-300">Home</a>
          <a href="#" class="hover:text-amber-700 dark:hover:text-amber-300 transition-colors duration-300">About</a>
          <a href="#" class="hover:text-amber-700 dark:hover:text-amber-300 transition-colors duration-300">Portfolio</a>
          <a href="#" class="hover:text-amber-700 dark:hover:text-amber-300 transition-colors duration-300">Services</a>
          <a href="#" class="hover:text-amber-700 dark:hover:text-amber-300 transition-colors duration-300">Contact</a>
        </nav>
      </div>

      <div>
        <h3 class="text-lg font-semibold mb-4 border-b border-amber-500 pb-2">Categories</h3>
        <nav class="flex flex-col space-y-2">
          <a href="#" class="hover:text-amber-700 dark:hover:text-amber-300 transition-colors duration-300">Web Design</a>
          <a href="#" class="hover:text-amber-700 dark:hover:text-amber-300 transition-colors duration-300">Branding</a>
          <a href="#" class="hover:text-amber-700 dark:hover:text-amber-300 transition-colors duration-300">UI/UX</a>
          <a href="#" class="hover:text-amber-700 dark:hover:text-amber-300 transition-colors duration-300">Development</a>
          <a href="#" class="hover:text-amber-700 dark:hover:text-amber-300 transition-colors duration-300">Illustration</a>
        </nav>
      </div>

      <div>
        <h3 class="text-lg font-semibold mb-4 border-b border-amber-500 pb-2">Get in Touch</h3>
        <address class="not-italic text-sm space-y-2">
          <p class="flex items-center"><svg class="w-5 h-5 mr-2 text-amber-700 dark:text-amber-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="M17.657 16.727A8 8 0 016.343 7.273L17.657 16.727zm0 0A8.001 8.001 0 0120 12c0 2.21-1.206 4.16-3.097 5.29-1.425.864-3.153 1.34-5.028 1.34-3.957 0-7.25-3.047-7.25-6.81 C4.625 9.09 5.86 6.88 7.625 5.56L17.657 16.727zM6.343 7.273 C5.83 6.94 5.376 6.541 4.98 6.095m0 0a8.001 8.001 0 01-2.316 2.502L6.343 7.273z"></path></svg>123 Pixel Drive, Retroville, RV 90210</p>
          <p class="flex items-center"><svg class="w-5 h-5 mr-2 text-amber-700 dark:text-amber-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="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684L10.106 9.2A1 1 0 0011.233 10c1.354-.42 2.766-.671 4.29-1.284A1 1 0 0016 8.35v-1.7a2 2 0 012-2h3a2 2 0 012-2v16a2 2 0 01-2 2h-3a2 2 0 01-2-2v-1.7a1 1 0 00-.777-.962c-1.524-.613-2.936-.864-4.29-1.284a1 1 0 00-1.127.784l-.872 3.518A1 1 0 018.28 21H5a2 2 0 01-2-2V5z"></path></svg><a href="tel:+1234567890" class="hover:underline">+1 (234) 567-890</a></p>
          <p class="flex items-center"><svg class="w-5 h-5 mr-2 text-amber-700 dark:text-amber-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="M3 8l7.983 5.485c.346.238.749.362 1.167.362.418 0 .82-.124 1.167-.362L21 8M6.25 10a.75.75 0 100 1.5.75.75 0 000-1.5zM12 12c-1.105 0-2 .895-2 2s.895 2 2 2 2-.895 2-2-.895-2-2-2zM21 8a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2h14a2 2 0 002-2V8z"></path></svg><a href="mailto:[email protected]" class="hover:underline">[email protected]</a></p>
        </address>
      </div>
    </div>

    <div class="mt-10 pt-6 border-t-2 border-amber-800 dark:border-gray-700 text-center text-sm">
      <p>&copy; <span id="current-year"></span> [Your Portfolio]. All rights reserved. <span class="hidden md:inline">Designed with '80s passion.</span></p>
    </div>
  </div>
</footer>

<script>
  document.getElementById('current-year').textContent = new Date().getFullYear();
</script>

Registration Form Component

A responsive registration form component with a skeuomorphic design, muted color scheme, and dark mode support, suitable for travel and tourism websites. It mimics real-world elements like embossed buttons and recessed input fields.

Open Preview

                <div class="min-h-screen flex items-center justify-center p-4 bg-gradient-to-br from-gray-200 to-gray-300 dark:from-gray-800 dark:to-gray-900 font-sans">
  <div class="w-full max-w-lg bg-gray-100 dark:bg-gray-700 rounded-3xl shadow-xl p-8 transform transition-all duration-300 ease-in-out
              dark:shadow-[inset_0_2px_4px_rgba(0,0,0,0.6),_inset_0_-2px_4px_rgba(255,255,255,0.05),_0_8px_16px_rgba(0,0,0,0.5)]
              shadow-[inset_0_2px_4px_rgba(255,255,255,0.8),_inset_0_-2px_4px_rgba(0,0,0,0.1),_0_8px_16px_rgba(0,0,0,0.2)]">
    <h2 class="text-3xl font-extrabold text-gray-700 dark:text-gray-200 mb-8 text-center drop-shadow-sm">
      <span class="block">Embark on Your Journey</span>
      <span class="block text-sm font-normal text-gray-500 dark:text-gray-400 mt-2">Register for an unforgettable experience</span>
    </h2>

    <form class="space-y-6">
      <div>
        <label for="full-name" class="block text-sm font-medium text-gray-600 dark:text-gray-300 mb-2 drop-shadow-sm">Full Name</label>
        <input type="text" id="full-name" name="full-name" placeholder="John Doe" autocomplete="name"
               class="w-full px-5 py-3 border border-transparent rounded-2xl text-gray-900 dark:text-gray-100 focus:outline-none focus:ring-2 focus:ring-blue-400
                      bg-gray-200 dark:bg-gray-800 shadow-inner
                      shadow-[inset_0_2px_4px_rgba(0,0,0,0.15),_inset_0_-2px_4px_rgba(255,255,255,0.7)]
                      dark:shadow-[inset_0_2px_4px_rgba(0,0,0,0.8),_inset_0_-2px_4px_rgba(255,255,255,0.02)]
                      transition-all duration-200 ease-in-out placeholder-gray-500 dark:placeholder-gray-400"
               aria-label="Full Name">
      </div>

      <div>
        <label for="email" class="block text-sm font-medium text-gray-600 dark:text-gray-300 mb-2 drop-shadow-sm">Email Address</label>
        <input type="email" id="email" name="email" placeholder="[email protected]" autocomplete="email"
               class="w-full px-5 py-3 border border-transparent rounded-2xl text-gray-900 dark:text-gray-100 focus:outline-none focus:ring-2 focus:ring-blue-400
                      bg-gray-200 dark:bg-gray-800 shadow-inner
                      shadow-[inset_0_2px_4px_rgba(0,0,0,0.15),_inset_0_-2px_4px_rgba(255,255,255,0.7)]
                      dark:shadow-[inset_0_2px_4px_rgba(0,0,0,0.8),_inset_0_-2px_4px_rgba(255,255,255,0.02)]
                      transition-all duration-200 ease-in-out placeholder-gray-500 dark:placeholder-gray-400"
               aria-label="Email Address">
      </div>

      <div>
        <label for="password" class="block text-sm font-medium text-gray-600 dark:text-gray-300 mb-2 drop-shadow-sm">Password</label>
        <input type="password" id="password" name="password" placeholder="••••••••"
               class="w-full px-5 py-3 border border-transparent rounded-2xl text-gray-900 dark:text-gray-100 focus:outline-none focus:ring-2 focus:ring-blue-400
                      bg-gray-200 dark:bg-gray-800 shadow-inner
                      shadow-[inset_0_2px_4px_rgba(0,0,0,0.15),_inset_0_-2px_4px_rgba(255,255,255,0.7)]
                      dark:shadow-[inset_0_2px_4px_rgba(0,0,0,0.8),_inset_0_-2px_4px_rgba(255,255,255,0.02)]
                      transition-all duration-200 ease-in-out placeholder-gray-500 dark:placeholder-gray-400"
               aria-label="Password">
      </div>

      <div>
        <label for="confirm-password" class="block text-sm font-medium text-gray-600 dark:text-gray-300 mb-2 drop-shadow-sm">Confirm Password</label>
        <input type="password" id="confirm-password" name="confirm-password" placeholder="••••••••"
               class="w-full px-5 py-3 border border-transparent rounded-2xl text-gray-900 dark:text-gray-100 focus:outline-none focus:ring-2 focus:ring-blue-400
                      bg-gray-200 dark:bg-gray-800 shadow-inner
                      shadow-[inset_0_2px_4px_rgba(0,0,0,0.15),_inset_0_-2px_4px_rgba(255,255,255,0.7)]
                      dark:shadow-[inset_0_2px_4px_rgba(0,0,0,0.8),_inset_0_-2px_4px_rgba(255,255,255,0.02)]
                      transition-all duration-200 ease-in-out placeholder-gray-500 dark:placeholder-gray-400"
               aria-label="Confirm Password">
      </div>

      <div class="relative flex items-start">
        <div class="flex items-center h-5">
          <input id="terms" name="terms" type="checkbox"
                 class="focus:ring-blue-500 h-5 w-5 text-blue-600 rounded drop-shadow-sm
                        bg-gray-200 dark:bg-gray-800 border-gray-300 dark:border-gray-600
                        shadow-[inset_0_1px_2px_rgba(0,0,0,0.1),_inset_0_-1px_2px_rgba(255,255,255,0.6)]
                        dark:shadow-[inset_0_1px_2px_rgba(0,0,0,0.7),_inset_0_-1px_2px_rgba(255,255,255,0.05)]
                        appearance-none checked:bg-blue-500 checked:border-transparent cursor-pointer
                        transition-all duration-200 ease-in-out">
          <div class="absolute w-5 h-5 flex items-center justify-center pointer-events-none">
            <svg class="h-4 w-4 text-white opacity-0 transform scale-0 transition-all duration-200 ease-in-out pointer-events-none" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round">
              <polyline points="20 6 9 17 4 12"></polyline>
            </svg>
          </div>
        </div>
        <div class="ml-3 text-sm">
          <label for="terms" class="font-medium text-gray-700 dark:text-gray-300 drop-shadow-sm">
            I agree to the <a href="#" class="text-blue-600 dark:text-blue-400 hover:underline focus:outline-none focus:ring-2 focus:ring-blue-400 rounded-md transition duration-200">Terms and Conditions</a>
          </label>
        </div>
      </div>

      <div>
        <button type="submit"
                class="w-full flex justify-center py-3 px-6 border border-transparent rounded-2xl text-lg font-bold text-white
                       bg-blue-500 dark:bg-blue-600 hover:bg-blue-600 dark:hover:bg-blue-700
                       focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-400
                       shadow-xl
                       shadow-[0_4px_8px_rgba(0,0,0,0.2),_inset_0px_2px_4px_rgba(255,255,255,0.4),_inset_0px_-2px_4px_rgba(0,0,0,0.2)]
                       dark:shadow-[0_4px_8px_rgba(0,0,0,0.6),_inset_0px_2px_4px_rgba(255,255,255,0.1),_inset_0px_-2px_4px_rgba(0,0,0,0.4)]
                       active:shadow-inner active:bg-blue-700 dark:active:bg-blue-800
                       transform active:scale-98 transition-all duration-200 ease-in-out drop-shadow-sm">
          Register Now
        </button>
      </div>
    </form>
  </div>
</div>

<style>
  /* Custom style for the checkbox checkmark animation */
  input[type='checkbox']:checked + div > svg {
    opacity: 1;
    transform: scale(1);
  }
</style>

Memphis_Monochrome_Image_Lightbox

A simple, responsive image lightbox component with a Memphis Design influence, featuring a monochrome palette with a single bright accent color. Designed for job/career platforms.

Open Preview

                <div class="flex items-center justify-center min-h-screen p-4 bg-gray-100 dark:bg-gray-900 font-sans">
  <div class="relative w-full max-w-sm sm:max-w-md md:max-w-lg lg:max-w-xl xl:max-w-2xl bg-white dark:bg-gray-800 rounded-lg shadow-xl overflow-hidden group border-4 border-black dark:border-white animate-fade-in">
    
    <!-- Memphis Design Top Accent -->
    <div class="absolute top-0 left-0 w-24 h-24 bg-yellow-400 dark:bg-yellow-500 rounded-br-full z-10 opacity-75 sm:opacity-100"></div>
    <div class="absolute top-0 right-0 w-16 h-16 bg-blue-400 dark:bg-blue-500 rounded-bl-full z-10 opacity-50"></div>

    <!-- Image Container (Simulated Lightbox Opener) -->
    <div class="relative h-64 sm:h-72 md:h-80 lg:h-96 w-full overflow-hidden">
      <img src="https://picsum.photos/1200/800?random=1" alt="Career Development Image" class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-105">
      
      <!-- Overlay for 'View Details' -->
      <div class="absolute inset-0 bg-black bg-opacity-40 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity duration-300">
        <button class="px-6 py-3 bg-yellow-400 dark:bg-yellow-500 text-black text-lg font-bold uppercase rounded-full shadow-lg transform -translate-y-4 group-hover:translate-y-0 opacity-0 group-hover:opacity-100 transition-all duration-300 ease-out">
          View Details
        </button>
      </div>
    </div>
    
    <!-- Content Area -->
    <div class="p-6 sm:p-8 relative z-20">
      <h3 class="text-2xl sm:text-3xl font-extrabold text-gray-900 dark:text-white mb-2 leading-tight">
        Elevate Your Career Path
      </h3>
      <p class="text-sm sm:text-base text-gray-700 dark:text-gray-300 mb-4">
        Explore new opportunities and connect with industry leaders. Click the image to see more about our exclusive career resources.
      </p>
      
      <!-- Call to Action / Info Grid -->
      <div class="grid grid-cols-2 gap-4 text-center mb-6">
        <div class="p-3 bg-gray-200 dark:bg-gray-700 rounded-md border-2 border-gray-300 dark:border-gray-600 relative overflow-hidden">
          <span class="block text-lg font-bold text-gray-900 dark:text-white">500+</span>
          <span class="block text-xs text-gray-600 dark:text-gray-400">Courses</span>
          <div class="absolute top-0 left-0 w-6 h-6 bg-yellow-400 dark:bg-yellow-500 rounded-br-md opacity-20"></div>
        </div>
        <div class="p-3 bg-gray-200 dark:bg-gray-700 rounded-md border-2 border-gray-300 dark:border-gray-600 relative overflow-hidden">
          <span class="block text-lg font-bold text-gray-900 dark:text-white">10K+</span>
          <span class="block text-xs text-gray-600 dark:text-gray-400">Members</span>
          <div class="absolute top-0 right-0 w-6 h-6 bg-blue-400 dark:bg-blue-500 rounded-bl-md opacity-20"></div>
        </div>
      </div>

      <!-- Simulated Profile / Mentor -->
      <div class="flex items-center space-x-3">
        <img class="w-10 h-10 rounded-full border-2 border-yellow-400 dark:border-yellow-500" src="https://randomuser.me/api/portraits/women/4.jpg" alt="Mentor Avatar">
        <div>
          <p class="text-sm font-semibold text-gray-900 dark:text-white">Sarah Johnson</p>
          <p class="text-xs text-gray-600 dark:text-gray-400">Career Coach, HR Dept.</p>
        </div>
      </div>
    </div>

    <!-- Memphis Design Bottom Accent -->
    <div class="absolute bottom-0 right-0 w-20 h-20 bg-yellow-400 dark:bg-yellow-500 rounded-tl-full z-10 opacity-75 sm:opacity-100"></div>
    <div class="absolute bottom-0 left-0 w-12 h-12 bg-blue-400 dark:bg-blue-500 rounded-tr-full z-10 opacity-50"></div>

  </div>
</div>

Playful_Sports_Login_Form

A playful and cheerful login form component with rounded elements and earth-tone colors, designed for sports and fitness applications. It is fully responsive and supports dark mode.

Open Preview

                <div class="p-4 sm:p-6 md:p-8 min-h-screen flex items-center justify-center bg-green-100 dark:bg-stone-900 font-sans">
  <div class="w-full max-w-md p-6 sm:p-8 md:p-10 bg-white dark:bg-stone-800 rounded-3xl shadow-xl transform transition-all duration-300 hover:scale-[1.02] border border-green-200 dark:border-stone-700">
    <div class="flex justify-center mb-6 sm:mb-8">
      <img src="https://picsum.photos/100/100?random=1" alt="Sports Logo" class="rounded-full w-20 h-20 sm:w-24 sm:h-24 object-cover border-4 border-green-500 dark:border-green-600 shadow-md animate-bounce-slow">
    </div>
    <h2 class="text-center text-3xl sm:text-4xl font-extrabold text-green-800 dark:text-green-300 mb-4 sm:mb-6 leading-tight">
      Welcome Back, Athlete!
    </h2>
    <p class="text-center text-stone-600 dark:text-stone-400 mb-6 sm:mb-8 text-base sm:text-lg">
      Sign in to manage your team or track your fitness journey.
    </p>

    <form>
      <div class="mb-4 sm:mb-5">
        <label for="email" class="block text-stone-700 dark:text-stone-300 text-sm font-bold mb-2">
          Email Address
        </label>
        <input
          type="email"
          id="email"
          name="email"
          placeholder="[email protected]"
          class="shadow-sm appearance-none border border-green-300 dark:border-stone-700 rounded-xl w-full py-3 px-4 text-stone-700 dark:text-stone-200 leading-tight focus:outline-none focus:ring-4 focus:ring-green-200 dark:focus:ring-green-700 focus:border-transparent bg-green-50 dark:bg-stone-700 transition-all duration-200 placeholder:text-stone-400 dark:placeholder:text-stone-500"
          aria-label="Email Address"
        />
      </div>
      <div class="mb-6 sm:mb-7">
        <label for="password" class="block text-stone-700 dark:text-stone-300 text-sm font-bold mb-2">
          Password
        </label>
        <input
          type="password"
          id="password"
          name="password"
          placeholder="**********"
          class="shadow-sm appearance-none border border-green-300 dark:border-stone-700 rounded-xl w-full py-3 px-4 text-stone-700 dark:text-stone-200 leading-tight focus:outline-none focus:ring-4 focus:ring-green-200 dark:focus:ring-green-700 focus:border-transparent bg-green-50 dark:bg-stone-700 transition-all duration-200 placeholder:text-stone-400 dark:placeholder:text-stone-500"
          aria-label="Password"
        />
      </div>
      <div class="flex items-center justify-between mb-6 sm:mb-8">
        <a href="#" class="inline-block align-baseline font-bold text-sm text-green-600 dark:text-green-400 hover:text-green-800 dark:hover:text-green-300 transition-colors duration-200">
          Forgot Password?
        </a>
        <button
          type="submit"
          class="bg-green-500 hover:bg-green-600 dark:bg-green-600 dark:hover:bg-green-700 text-white font-bold py-3 px-6 rounded-full focus:outline-none focus:shadow-outline transform transition-all duration-200 hover:scale-105 active:scale-95 shadow-lg shadow-green-300/50 dark:shadow-green-900/50 flex items-center gap-2"
        >
          <svg class="w-5 h-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="M11 16l-4-4m0 0l4-4m-4 4h14m-5 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h7a3 3 0 013 3v1"></path>
          </svg>
          Sign In
        </button>
      </div>
      <p class="text-center text-stone-600 dark:text-stone-400 text-sm">
        Don't have an account? <a href="#" class="font-bold text-green-600 dark:text-green-400 hover:text-green-800 dark:hover:text-green-300 transition-colors duration-200">Sign Up</a>
      </p>
    </form>
  </div>
  <style>
    @keyframes bounce-slow {
      0%, 100% { transform: translateY(0); }
      50% { transform: translateY(-8px); }
    }
    .animate-bounce-slow {
      animation: bounce-slow 3s infinite ease-in-out;
    }
  </style>
</div>

1 ... 66 67 68 69 70 ... 335