Search Components

All Components

Browse all available Tailwind CSS components

E-commerce Components Component

A simple, minimalist booking/reservation component with a Swiss/International Typography style, featuring a black and white color scheme with a bright accent. It's fully responsive and supports dark mode.

Open Preview

                <div class="font-sans antialiased text-gray-900 bg-white dark:bg-gray-900 dark:text-gray-100 min-h-screen flex items-center justify-center p-4">
  <div class="w-full max-w-sm bg-white dark:bg-gray-800 shadow-xl rounded-lg overflow-hidden border border-gray-100 dark:border-gray-700">
    <div class="p-6">
      <h2 class="text-2xl font-bold mb-2 text-gray-900 dark:text-gray-100 tracking-tight leading-tight">Book Your Spot</h2>
      <p class="text-gray-600 dark:text-gray-400 text-sm mb-6">Select your preferred date and time for a seamless experience.</p>

      <div class="mb-6">
        <label for="date-select" class="block text-xs uppercase font-semibold text-gray-500 dark:text-gray-400 mb-2 tracking-wide">Date</label>
        <select id="date-select" class="block w-full p-2 border border-gray-300 dark:border-gray-600 rounded-md bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400 focus:border-transparent transition-colors duration-200">
          <option value="">Select a Date</option>
          <option value="2023-10-26">Thursday, October 26</option>
          <option value="2023-10-27">Friday, October 27</option>
          <option value="2023-10-28">Saturday, October 28</option>
          <option value="2023-10-29">Sunday, October 29</option>
        </select>
      </div>

      <div class="mb-6">
        <label for="time-select" class="block text-xs uppercase font-semibold text-gray-500 dark:text-gray-400 mb-2 tracking-wide">Time</label>
        <div class="grid grid-cols-3 gap-2">
          <button class="relative px-3 py-2 text-sm border border-gray-300 dark:border-gray-600 rounded-md text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-700 hover:bg-gray-100 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-500 transition-colors duration-200">
            9:00 AM
            <span class="absolute top-0 right-0 -mr-1 -mt-1 w-3 h-3 bg-red-500 rounded-full flex items-center justify-center text-white text-xs font-bold">5</span>
          </button>
          <button class="px-3 py-2 text-sm border border-gray-300 dark:border-gray-600 rounded-md text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-700 hover:bg-gray-100 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-500 transition-colors duration-200">
            10:00 AM
          </button>
          <button class="px-3 py-2 text-sm border border-gray-300 dark:border-gray-600 rounded-md text-blue-600 dark:text-blue-400 bg-blue-50 dark:bg-blue-900/40 border-blue-500 dark:border-blue-400 font-semibold focus:outline-none focus:ring-2 focus:ring-blue-500 transform scale-105 shadow-md transition-all duration-200">
            11:00 AM
          </button>
          <button class="px-3 py-2 text-sm border border-gray-300 dark:border-gray-600 rounded-md text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-700 hover:bg-gray-100 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-500 transition-colors duration-200">
            1:00 PM
          </button>
          <button class="px-3 py-2 text-sm border border-gray-300 dark:border-gray-600 rounded-md text-gray-400 dark:text-gray-500 bg-gray-50 dark:bg-gray-700 cursor-not-allowed" disabled>
            2:00 PM
          </button>
          <button class="px-3 py-2 text-sm border border-gray-300 dark:border-gray-600 rounded-md text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-700 hover:bg-gray-100 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-500 transition-colors duration-200">
            3:00 PM
          </button>
        </div>
      </div>

      <button class="w-full py-3 bg-blue-600 dark:bg-blue-500 text-white font-semibold rounded-md hover:bg-blue-700 dark:hover:bg-blue-600 focus:outline-none focus:ring-4 focus:ring-blue-500/50 dark:focus:ring-blue-400/50 transition-colors duration-200 text-base uppercase tracking-wider">
        Confirm Booking
      </button>

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

Gradient Grid Booking Layout

A complex, responsive grid layout component for booking/reservation systems, featuring triadic color gradients, smooth transitions, and dark mode support. Designed with multiple interactive elements.

Open Preview

                <div class="min-h-screen bg-gray-50 text-gray-900 dark:bg-gray-900 dark:text-gray-100 transition-colors duration-500 p-4 sm:p-6 md:p-8 lg:p-12 font-sans">

  <!-- Header Section -->
  <header class="mb-8 text-center">
    <h1 class="text-4xl sm:text-5xl md:text-6xl font-extrabold bg-clip-text text-transparent bg-gradient-to-r from-red-500 via-yellow-400 to-emerald-500 dark:from-red-400 dark:via-yellow-300 dark:to-emerald-400 pb-2">
      Book Your Next Adventure
    </h1>
    <p class="mt-2 text-lg sm:text-xl text-gray-600 dark:text-gray-300">Seamless reservations, unforgettable experiences.</p>
  </header>

  <!-- Main Content Grid -->
  <main class="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-5 gap-6 sm:gap-8">

    <!-- Left Sidebar / Navigation (Col 1 md, Col 1-2 lg) -->
    <aside class="md:col-span-1 lg:col-span-2 p-6 rounded-3xl shadow-xl transform transition-all duration-300 border border-transparent hover:border-gray-200 dark:hover:border-gray-700 bg-gradient-to-br from-indigo-50 dark:from-gray-800 to-white dark:to-gray-900 group relative overflow-hidden">
      <div class="absolute inset-0 bg-gradient-to-br from-indigo-100 via-purple-100 to-green-100 dark:from-indigo-950 dark:via-purple-950 dark:to-green-950 opacity-20 group-hover:opacity-40 transition-opacity duration-500 blur-xl w-full h-full scale-110"></div>
      <div class="relative z-10">
        <h2 class="text-3xl font-bold mb-6 bg-clip-text text-transparent bg-gradient-to-r from-pink-500 to-purple-500 dark:from-pink-400 dark:to-purple-400">
          Categories
        </h2>
        <ul class="space-y-4">
          <li>
            <a href="#" class="flex items-center p-3 rounded-xl transition-all duration-300 transform hover:scale-[1.02] hover:bg-gradient-to-r hover:from-purple-100 hover:to-indigo-100 dark:hover:from-purple-900 dark:hover:to-indigo-900 group-hover:shadow-md">
              <svg class="w-7 h-7 text-purple-600 dark:text-purple-400 mr-4 group-hover:scale-110 transition-transform duration-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="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m-.707 5.657l.707.707M18.364 5.636l.707-.707M6.879 7.121A4 4 0 0112 5c2.21 0 4 1.79 4 4 0 1.27-.492 2.453-1.386 3.348L12 21l-2.614-7.652A4 4 0 018 9c0-2.21 1.79-4 4-4z"></path></svg>
              <span class="text-lg font-medium text-gray-800 dark:text-gray-200 group-hover:text-purple-700 dark:group-hover:text-purple-300">Adventures</span>
            </a>
          </li>
          <li>
            <a href="#" class="flex items-center p-3 rounded-xl transition-all duration-300 transform hover:scale-[1.02] hover:bg-gradient-to-r hover:from-purple-100 hover:to-indigo-100 dark:hover:from-purple-900 dark:hover:to-indigo-900 group-hover:shadow-md">
              <svg class="w-7 h-7 text-yellow-600 dark:text-yellow-400 mr-4 group-hover:scale-110 transition-transform duration-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 21v-4a2 2 0 012-2h4a2 2 0 012 2v4m-6 0h6m-6 0v-4m0-4.004H8m0 0v-2.004S10 10 12 10s4-2 4-2v2.004m-4-2.004V8m.004-2.004h-.008m.008 2.004h-.008m0 0v2.004M15 17h6l-3-3m0-4.004S18 10 16 10s-4-2-4-2v2.004M12 21h9m-9-4.004H15m0 0v-2.004S17 10 19 10s4-2 4-2v2.004m-4-2.004V8"></path></svg>
              <span class="text-lg font-medium text-gray-800 dark:text-gray-200 group-hover:text-yellow-700 dark:group-hover:text-yellow-300">Experiences</span>
            </a>
          </li>
          <li>
            <a href="#" class="flex items-center p-3 rounded-xl transition-all duration-300 transform hover:scale-[1.02] hover:bg-gradient-to-r hover:from-purple-100 hover:to-indigo-100 dark:hover:from-purple-900 dark:hover:to-indigo-900 group-hover:shadow-md">
              <svg class="w-7 h-7 text-emerald-600 dark:text-emerald-400 mr-4 group-hover:scale-110 transition-transform duration-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="M8 12h.01M12 12h.01M16 12h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
              <span class="text-lg font-medium text-gray-800 dark:text-gray-200 group-hover:text-emerald-700 dark:group-hover:text-emerald-300">Classes & Workshops</span>
            </a>
          </li>
          <!-- Add more categories -->
        </ul>
        <div class="mt-8">
          <h3 class="text-2xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-red-500 to-orange-500 dark:from-red-400 dark:to-orange-400 mb-4">Popular Searches</h3>
          <div class="flex flex-wrap gap-2">
            <span class="px-4 py-2 rounded-full text-sm font-semibold bg-red-100 text-red-700 dark:bg-red-900 dark:text-red-200 transition-colors duration-300 hover:bg-red-200 dark:hover:bg-red-800 cursor-pointer shadow-sm">Hiking</span>
            <span class="px-4 py-2 rounded-full text-sm font-semibold bg-yellow-100 text-yellow-700 dark:bg-yellow-900 dark:text-yellow-200 transition-colors duration-300 hover:bg-yellow-200 dark:hover:bg-yellow-800 cursor-pointer shadow-sm">Spa Days</span>
            <span class="px-4 py-2 rounded-full text-sm font-semibold bg-emerald-100 text-emerald-700 dark:bg-emerald-900 dark:text-emerald-200 transition-colors duration-300 hover:bg-emerald-200 dark:hover:bg-emerald-800 cursor-pointer shadow-sm">Cooking</span>
            <span class="px-4 py-2 rounded-full text-sm font-semibold bg-indigo-100 text-indigo-700 dark:bg-indigo-900 dark:text-indigo-200 transition-colors duration-300 hover:bg-indigo-200 dark:hover:bg-indigo-800 cursor-pointer shadow-sm">Photography</span>
          </div>
        </div>
      </div>
    </aside>

    <!-- Main Content Area (Central Cards) (Col 1-3 md, Col 3-5 lg) -->
    <section class="md:col-span-2 lg:col-span-3 space-y-6">

      <!-- Search/Filter Bar -->
      <div class="bg-gradient-to-r from-red-50 via-yellow-50 to-emerald-50 dark:from-gray-800 dark:via-gray-850 dark:to-gray-900 p-5 rounded-3xl shadow-xl flex flex-col sm:flex-row items-center justify-between gap-4 transition-all duration-300 group relative overflow-hidden">
        <div class="absolute inset-0 bg-gradient-to-r from-red-100 via-yellow-100 to-emerald-100 dark:from-red-950 dark:via-yellow-950 dark:to-emerald-950 opacity-10 group-hover:opacity-20 transition-opacity duration-500 blur-xl w-full h-full scale-110"></div>
        <div class="relative z-10 w-full flex flex-col sm:flex-row gap-4">
          <input type="text" placeholder="Search activities or locations..." class="flex-grow p-3 rounded-full bg-white dark:bg-gray-700 border border-transparent focus:outline-none focus:ring-4 focus:ring-red-300 dark:focus:ring-red-600 focus:border-transparent transition-all duration-300 shadow-inner placeholder:text-gray-500 dark:placeholder:text-gray-400" />
          <button class="px-6 py-3 bg-gradient-to-r from-red-600 to-yellow-600 dark:from-red-700 dark:to-yellow-700 text-white font-bold rounded-full shadow-lg hover:shadow-xl transform hover:scale-[1.02] active:scale-95 transition-all duration-300 flex items-center justify-center">
            <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="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path></svg>
            Search
          </button>
        </div>
      </div>

      <!-- Booking Cards Grid -->
      <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6 auto-rows-fr">

        <!-- Card 1 -->
        <article class="bg-white dark:bg-gray-800 rounded-3xl shadow-lg hover:shadow-2xl transform hover:-translate-y-2 transition-all duration-500 overflow-hidden relative group border border-transparent hover:border-red-200 dark:hover:border-red-700">
          <div class="absolute inset-0 bg-gradient-to-br from-red-100 to-red-50 dark:from-red-950 dark:to-red-900 opacity-10 group-hover:opacity-20 transition-opacity duration-500 blur-xl w-full h-full scale-110"></div>
          <img src="https://picsum.photos/400/300?random=1" alt="Mountain Hiking" class="w-full h-48 object-cover transition-transform duration-500 group-hover:scale-105 relative z-0" loading="lazy">
          <div class="p-5 relative z-10">
            <h3 class="text-2xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-red-600 to-orange-600 dark:from-red-400 dark:to-orange-400 mb-2">Alaskan Glacier Trek</h3>
            <p class="text-gray-600 dark:text-gray-300 text-sm mb-4">Experience the breathtaking beauty of massive glaciers.</p>
            <div class="flex items-center text-sm text-gray-500 dark:text-gray-400 mb-4">
              <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.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.683-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.565-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path></svg>
              <span>4.9 (245 reviews)</span>
            </div>
            <div class="flex justify-between items-center">
              <span class="text-3xl font-extrabold bg-clip-text text-transparent bg-gradient-to-r from-emerald-600 to-teal-600 dark:from-emerald-400 dark:to-teal-400">$299</span>
              <button class="px-5 py-2 bg-gradient-to-r from-red-500 to-yellow-500 dark:from-red-600 dark:to-yellow-600 text-white rounded-full font-semibold shadow-md hover:shadow-lg transform hover:scale-105 active:scale-95 transition-all duration-300">
                Book Now
              </button>
            </div>
          </div>
        </article>

        <!-- Card 2 -->
        <article class="bg-white dark:bg-gray-800 rounded-3xl shadow-lg hover:shadow-2xl transform hover:-translate-y-2 transition-all duration-500 overflow-hidden relative group border border-transparent hover:border-yellow-200 dark:hover:border-yellow-700">
          <div class="absolute inset-0 bg-gradient-to-br from-yellow-100 to-yellow-50 dark:from-yellow-950 dark:to-yellow-900 opacity-10 group-hover:opacity-20 transition-opacity duration-500 blur-xl w-full h-full scale-110"></div>
          <img src="https://picsum.photos/400/300?random=2" alt="Cooking Class" class="w-full h-48 object-cover transition-transform duration-500 group-hover:scale-105 relative z-0" loading="lazy">
          <div class="p-5 relative z-10">
            <h3 class="text-2xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-red-600 to-yellow-600 dark:from-red-400 dark:to-yellow-400 mb-2">Authentic Italian Cooking</h3>
            <p class="text-gray-600 dark:text-gray-300 text-sm mb-4">Master the art of pasta making and classic sauces.</p>
            <div class="flex items-center text-sm text-gray-500 dark:text-gray-400 mb-4">
              <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.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.683-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.565-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path></svg>
              <span>4.7 (180 reviews)</span>
            </div>
            <div class="flex justify-between items-center">
              <span class="text-3xl font-extrabold bg-clip-text text-transparent bg-gradient-to-r from-emerald-600 to-teal-600 dark:from-emerald-400 dark:to-teal-400">$85</span>
              <button class="px-5 py-2 bg-gradient-to-r from-red-500 to-yellow-500 dark:from-red-600 dark:to-yellow-600 text-white rounded-full font-semibold shadow-md hover:shadow-lg transform hover:scale-105 active:scale-95 transition-all duration-300">
                Book Now
              </button>
            </div>
          </div>
        </article>

        <!-- Card 3 -->
        <article class="bg-white dark:bg-gray-800 rounded-3xl shadow-lg hover:shadow-2xl transform hover:-translate-y-2 transition-all duration-500 overflow-hidden relative group border border-transparent hover:border-emerald-200 dark:hover:border-emerald-700">
          <div class="absolute inset-0 bg-gradient-to-br from-emerald-100 to-emerald-50 dark:from-emerald-950 dark:to-emerald-900 opacity-10 group-hover:opacity-20 transition-opacity duration-500 blur-xl w-full h-full scale-110"></div>
          <img src="https://picsum.photos/400/300?random=3" alt="City Tour" class="w-full h-48 object-cover transition-transform duration-500 group-hover:scale-105 relative z-0" loading="lazy">
          <div class="p-5 relative z-10">
            <h3 class="text-2xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-red-600 to-emerald-600 dark:from-red-400 dark:to-emerald-400 mb-2">Historic City Walking Tour</h3>
            <p class="text-gray-600 dark:text-gray-300 text-sm mb-4">Explore ancient landmarks and hidden gems with a local guide.</p>
            <div class="flex items-center text-sm text-gray-500 dark:text-gray-400 mb-4">
              <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.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.683-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.565-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path></svg>
              <span>4.8 (310 reviews)</span>
            </div>
            <div class="flex justify-between items-center">
              <span class="text-3xl font-extrabold bg-clip-text text-transparent bg-gradient-to-r from-emerald-600 to-teal-600 dark:from-emerald-400 dark:to-teal-400">$45</span>
              <button class="px-5 py-2 bg-gradient-to-r from-emerald-500 to-teal-500 dark:from-emerald-600 dark:to-teal-600 text-white rounded-full font-semibold shadow-md hover:shadow-lg transform hover:scale-105 active:scale-95 transition-all duration-300">
                Book Now
              </button>
            </div>
          </div>
        </article>

        <!-- Card 4 (Hidden on smaller screens until lg) -->
        <article class="bg-white dark:bg-gray-800 rounded-3xl shadow-lg hover:shadow-2xl transform hover:-translate-y-2 transition-all duration-500 overflow-hidden hidden lg:block relative group border border-transparent hover:border-violet-200 dark:hover:border-violet-700">
          <div class="absolute inset-0 bg-gradient-to-br from-violet-100 to-violet-50 dark:from-violet-950 dark:to-violet-900 opacity-10 group-hover:opacity-20 transition-opacity duration-500 blur-xl w-full h-full scale-110"></div>
          <img src="https://picsum.photos/400/300?random=4" alt="Yoga Retreat" class="w-full h-48 object-cover transition-transform duration-500 group-hover:scale-105 relative z-0" loading="lazy">
          <div class="p-5 relative z-10">
            <h3 class="text-2xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-purple-600 to-indigo-600 dark:from-purple-400 dark:to-indigo-400 mb-2">Serene Beach Yoga Retreat</h3>
            <p class="text-gray-600 dark:text-gray-300 text-sm mb-4">Rejuvenate your mind and body by the ocean.</p>
            <div class="flex items-center text-sm text-gray-500 dark:text-gray-400 mb-4">
              <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.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.683-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.565-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path></svg>
              <span>5.0 (98 reviews)</span>
            </div>
            <div class="flex justify-between items-center">
              <span class="text-3xl font-extrabold bg-clip-text text-transparent bg-gradient-to-r from-emerald-600 to-teal-600 dark:from-emerald-400 dark:to-teal-400">$599</span>
              <button class="px-5 py-2 bg-gradient-to-r from-purple-500 to-indigo-500 dark:from-purple-600 dark:to-indigo-600 text-white rounded-full font-semibold shadow-md hover:shadow-lg transform hover:scale-105 active:scale-95 transition-all duration-300">
                Book Now
              </button>
            </div>
          </div>
        </article>

        <!-- Card 5 (Hidden on smaller screens until lg) -->
        <article class="bg-white dark:bg-gray-800 rounded-3xl shadow-lg hover:shadow-2xl transform hover:-translate-y-2 transition-all duration-500 overflow-hidden hidden lg:block relative group border border-transparent hover:border-blue-200 dark:hover:border-blue-700">
          <div class="absolute inset-0 bg-gradient-to-br from-blue-100 to-blue-50 dark:from-blue-950 dark:to-blue-900 opacity-10 group-hover:opacity-20 transition-opacity duration-500 blur-xl w-full h-full scale-110"></div>
          <img src="https://picsum.photos/400/300?random=5" alt="Scuba Diving" class="w-full h-48 object-cover transition-transform duration-500 group-hover:scale-105 relative z-0" loading="lazy">
          <div class="p-5 relative z-10">
            <h3 class="text-2xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-blue-600 to-cyan-600 dark:from-blue-400 dark:to-cyan-400 mb-2">Deep Sea Scuba Diving</h3>
            <p class="text-gray-600 dark:text-gray-300 text-sm mb-4">Discover vibrant marine life in crystal clear waters.</p>
            <div class="flex items-center text-sm text-gray-500 dark:text-gray-400 mb-4">
              <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.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.683-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.565-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path></svg>
              <span>4.6 (155 reviews)</span>
            </div>
            <div class="flex justify-between items-center">
              <span class="text-3xl font-extrabold bg-clip-text text-transparent bg-gradient-to-r from-emerald-600 to-teal-600 dark:from-emerald-400 dark:to-teal-400">$180</span>
              <button class="px-5 py-2 bg-gradient-to-r from-blue-500 to-cyan-500 dark:from-blue-600 dark:to-cyan-600 text-white rounded-full font-semibold shadow-md hover:shadow-lg transform hover:scale-105 active:scale-95 transition-all duration-300">
                Book Now
              </button>
            </div>
          </div>
        </article>

        <!-- 'Load More' or Pagination -->
        <div class="md:col-span-3 lg:col-span-5 flex justify-center mt-4 w-full">
          <button class="px-8 py-4 bg-gradient-to-r from-yellow-500 to-emerald-500 dark:from-yellow-600 dark:to-emerald-600 text-white font-bold rounded-full shadow-lg hover:shadow-xl transform hover:scale-[1.02] active:scale-95 transition-all duration-300 flex items-center justify-center">
            <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="M4 4v5h.582m15.356 2A8.001 8.001 0 004 16.087v-2.072a2 2 0 012-2h4a2 2 0 002-2V6h2v2h4a2 2 0 012 2v2a8.001 8.001 0 00-15.356 2M4 20h16"></path></svg>
            Load More Activities
          </button>
        </div>

      </div>
    </section>

  </main>

  <!-- Footer Section (Optional, could be simplified) -->
  <footer class="mt-12 text-center text-gray-500 dark:text-gray-400 text-sm">
    <p>&copy; 2023 AdventureBook. All rights reserved.</p>
  </footer>

</div>

Social_Components_Component

A responsive and interactive e-commerce social component with a 3D design aesthetic, complementary color scheme, and dark mode support. Features user reviews/testimonials, star ratings, and a 'share' call to action.

Open Preview

                <div class="relative min-h-screen bg-gray-100 p-4 sm:p-8 md:p-12 dark:bg-gray-900 overflow-hidden flex items-center justify-center">

  <!-- Base background (for pseudo-3D effect) -->
  <div class="absolute inset-0 bg-gradient-to-br from-purple-200 to-indigo-100 dark:from-purple-900 dark:to-indigo-800 transform rotate-3 scale-105 rounded-3xl opacity-50 blur-xl"></div>
  <div class="absolute inset-0 bg-gradient-to-tl from-teal-200 to-green-100 dark:from-teal-900 dark:to-green-800 transform -rotate-6 scale-105 rounded-3xl opacity-50 blur-xl"></div>

  <div class="relative z-10 w-full max-w-4xl bg-white bg-opacity-80 dark:bg-gray-800 dark:bg-opacity-80 backdrop-blur-md rounded-3xl shadow-2xl p-6 sm:p-8 md:p-10 border border-t-4 border-l-4 border-purple-300 dark:border-purple-600 transform perspective-1000 rotate-x-6 rotate-y-3 skew-y-1 hover:rotate-x-0 hover:rotate-y-0 hover:skew-y-0 transition-all duration-700 ease-in-out">
    
    <div class="flex flex-col md:flex-row gap-8">

      <!-- Product/Image Section -->
      <div class="w-full md:w-1/2 relative bg-purple-50 dark:bg-purple-950 rounded-2xl p-2 shadow-inner border border-purple-200 dark:border-purple-700 transform rotate-3 translate-x-2 translate-y-1">
        <img src="https://picsum.photos/600/400?random=1" alt="Product Image" class="w-full h-auto object-cover rounded-xl shadow-lg transform -rotate-3 -translate-x-2 -translate-y-1 mx-auto">
        <div class="absolute bottom-2 left-2 right-2 p-2 bg-gradient-to-t from-black/60 to-transparent rounded-b-xl text-white text-sm flex justify-between items-center">
          <span>New Arrivals</span>
          <button class="flex items-center gap-1 text-white hover:text-green-300 transition-colors">
            <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M3.172 5.172a4 4 0 015.656 0L10 6.343l1.172-1.171a4 4 0 115.656 5.656L10 17.657l-6.828-6.829a4 4 0 010-5.656z" clip-rule="evenodd"></path></svg>
            Save
          </button>
        </div>
      </div>

      <!-- Social Engagement Section -->
      <div class="w-full md:w-1/2 flex flex-col justify-between gap-6 relative">
        
        <div class="relative p-6 bg-gradient-to-br from-green-50 to-teal-50 dark:from-green-950 dark:to-teal-900 rounded-3xl shadow-xl border border-green-200 dark:border-green-700 transform -rotate-2 -translate-x-1 translate-y-2">
          <h3 class="text-2xl font-bold text-gray-900 dark:text-white mb-2 transform -rotate-1 origin-top-left">Customer Reviews</h3>
          
          <!-- Rating Block -->
          <div class="flex items-center mb-4">
            <div class="flex text-yellow-400">
              <svg class="w-5 h-5" 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.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.538 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.783.57-1.838-.197-1.538-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>
              <svg class="w-5 h-5" 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.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.538 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.783.57-1.838-.197-1.538-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>
              <svg class="w-5 h-5" 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.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.538 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.783.57-1.838-.197-1.538-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>
              <svg class="w-5 h-5" 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.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.538 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.783.57-1.838-.197-1.538-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>
              <svg class="w-5 h-5 text-gray-300 dark:text-gray-600" 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.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.538 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.783.57-1.838-.197-1.538-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>
            </div>
            <span class="ml-2 text-gray-700 dark:text-gray-300 font-semibold">4.5 out of 5</span>
            <a href="#" class="ml-4 text-sm text-purple-600 dark:text-purple-400 hover:underline">Read all 120 reviews</a>
          </div>

          <!-- Individual Review -->
          <div class="bg-white dark:bg-gray-700 p-4 rounded-xl shadow-md border-b-4 border-r-4 border-green-300 dark:border-green-600 transform translate-x-1 translate-y-1">
            <div class="flex items-center mb-3">
              <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="User Avatar" class="w-10 h-10 rounded-full border-2 border-purple-400 dark:border-purple-500 mr-3 shadow-sm">
              <div>
                <p class="font-semibold text-gray-800 dark:text-white">Jane Doe</p>
                <p class="text-xs text-gray-500 dark:text-gray-400">Verified Purchaser</p>
              </div>
            </div>
            <p class="text-gray-700 dark:text-gray-300 italic text-sm mb-2">"Absolutely love this product! The quality is superb and it arrived so quickly."</p>
            <p class="text-xs text-gray-500 dark:text-gray-400 text-right">Reviewed on July 15, 2023</p>
          </div>

        </div>

        <!-- Share and Social Buttons -->
        <div class="relative p-6 bg-gradient-to-br from-indigo-50 to-purple-50 dark:from-indigo-950 dark:to-purple-900 rounded-3xl shadow-xl border border-indigo-200 dark:border-indigo-700 transform rotate-2 translate-x-2 -translate-y-1">
          <h3 class="text-2xl font-bold text-gray-900 dark:text-white mb-4 transform rotate-1 origin-top-left">Share & Connect</h3>
          <div class="flex flex-wrap gap-4 justify-center sm:justify-start">
            <button class="flex items-center gap-2 px-5 py-3 bg-purple-600 text-white rounded-full shadow-lg hover:shadow-xl hover:bg-purple-700 transition-all duration-300 transform perspective-1000 rotate-x-6 rotate-y-3 skew-y-1 hover:rotate-x-0 hover:rotate-y-0 hover:skew-y-0">
              <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M16.994 20.29c-.777 0-1.488-.363-1.944-.937-.456-.574-.694-1.309-.694-2.106V11.23a.75.75 0 011.5 0v6.071c0 .484.148.97.447 1.34s.707.57 1.157.57a3.99 3.99 0 003.99-3.99c0-.485-.149-.97-.448-1.34s-.708-.57-1.157-.57h-1.5a.75.75 0 010-1.5h1.5a.75.75 0 01.75.75c0 1.29-.444 2.502-1.282 3.407-.84.904-1.977 1.4-3.193 1.4zm-9.996-3.957A3.99 3.99 0 003 12.29c0-.485.149-.97.448-1.34s.708-.57 1.157-.57h1.5a.75.75 0 010-1.5H4.555a.75.75 0 01-.75-.75c0-1.29.444-2.502 1.282-3.407.84-.904 1.977-1.4 3.193-1.4.777 0 1.488.363 1.944.937.456.574.694 1.309.694 2.106v6.972c0 .484-.148.97-.447 1.34s-.707.57-1.157.57a3.99 3.99 0 00-3.99-3.99z"></path></svg>
              Share Product
            </button>
            <button class="flex items-center gap-2 px-5 py-3 bg-blue-600 text-white rounded-full shadow-lg hover:shadow-xl hover:bg-blue-700 transition-all duration-300 transform perspective-1000 rotate-x-6 rotate-y-3 skew-y-1 hover:rotate-x-0 hover:rotate-y-0 hover:skew-y-0">
              <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M22 6.981a5.61 5.61 0 00-1.637-.446 3.149 3.149 0 01-2.28 1.002.75.75 0 01-.5-.14A5.61 5.61 0 0013 7.825c0-.422-.05-.838-.145-1.243a4.072 4.072 0 00-3.513-3.618 3.189 3.189 0 00-.817-.116 3.978 3.978 0 00-2.81 1.153C4.249 4.908 4 6.136 4 7.424v1.312a.75.75 0 01-.75.75c-1.196 0-2.392 0-3.588 0a.75.75 0 01-.75-.75V7.424C0 6.136.249 4.908.775 3.013A4.043 4.043 0 001.353 2.126a3.978 3.978 0 002.81-1.153C4.249.908 4 1.136 4 2.424v1.312a.75.75 0 01-.75.75c-1.196 0-2.392 0-3.588 0a.75.75 0 01-.75-.75V2.424c0-1.288.249-2.516.775-4.411A4.043 4.043 0 001.353-2.126a3.978 3.978 0 002.81 1.153C4.249-1.908 4-1.136 4-.424v1.312a.75.75 0 01-.75.75c-1.196 0-2.392 0-3.588 0a.75.75 0 01-.75-.75V-.424c0-1.288.249-2.516.775-4.411A4.043 4.043 0 001.353-2.126a3.978 3.978 0 002.81 1.153C4.249-1.908 4-1.136 4-.424v1.312a.75.75 0 01-.75.75c-1.196 0-2.392 0-3.588 0a.75.75 0 01-.75-.75V-.424c0-1.288.249-2.516.775-4.411A4.043 4.043 0 001.353-2.126a3.978 3.978 0 002.81 1.153C4.249-1.908 4-1.136 4-.424v1.312a.75.75 0 01-.75.75c-1.196 0-2.392 0-3.588 0A.75.75 0 010 .681V.681c0 1.288-.249 2.516-.775 4.411A4.043 4.043 0 00-1.353 2.126c-.45-.487-1.026-.78-1.666-.889-.64-.108-1.316-.016-1.928.272-.61.286-1.12.753-1.472 1.341s-.513 1.22-.513 1.905c0 .285.029.566.088.841.059.274.148.539.26.792.112.253.25.495.412.72s.347.43.55.614l.05.044c.484.423.953.79 1.393 1.096.44.306.845.548 1.196.726.35.178.634.3l.865.253a.75.75 0 01.31.07zm-.591 1.242c.45-.487 1.026-.78 1.666-.889.64-.108 1.316-.016 1.928.272.61.286 1.12.753 1.472 1.341s.513 1.22.513 1.905c0 .285-.029.566-.088.841-.059.274-.148.539-.26.792-.112.253-.25.495-.412.72s-.347.43-.55.614l-.05.044c-.484.423-.953.79-1.393 1.096-.44.306-.845.548-1.196.726-.35.178-.634.3l-.865.253a.75.75 0 01-.31.07z"></path></svg>
              Facebook
            </button>
            <button class="flex items-center gap-2 px-5 py-3 bg-red-600 text-white rounded-full shadow-lg hover:shadow-xl hover:bg-red-700 transition-all duration-300 transform perspective-1000 rotate-x-6 rotate-y-3 skew-y-1 hover:rotate-x-0 hover:rotate-y-0 hover:skew-y-0">
              <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M17 2H7c-2.76 0-5 2.24-5 5v10c0 2.76 2.24 5 5 5h10c2.76 0 5-2.24 5-5V7c0-2.76-2.24-5-5-5zm3.78 17H3.22c-.68 0-1.22-.54-1.22-1.22V7c0-.68.54-1.22 1.22-1.22h13.56c.68 0 1.22.54 1.22 1.22v10.78zm-1.89-5.78c-.24-1.07-.63-2.07-1.13-2.98-.59-.8-1.29-1.42-2.16-1.81-.9-.4-1.88-.6-2.98-.63-1.1-.03-2.2.06-3.23.3-1.03.24-1.99.63-2.88 1.13-.8.59-1.42 1.29-1.81 2.16-.4.9-.6 1.88-.63 2.98-.03 1.1.06 2.2.3 3.23.24 1.03.63 1.99 1.13 2.88.59.8 1.29 1.42 2.16 1.81.9.4 1.88.6 2.98.63 1.1.03 2.2-.06 3.23-.3 1.03-.24 1.99-.63 2.88-1.13.8-.59 1.42-1.29 1.81-2.16.4-.9.6-1.88.63-2.98.03-1.1-.06-2.2-.3-3.23zM12 17.5c-3.03 0-5.5-2.47-5.5-5.5S8.97 6.5 12 6.5s5.5 2.47 5.5 5.5-2.47 5.5-5.5 5.5zm.96-8.54l-1.92 1.92v-2.88a.5.5 0 00-1 0v2.88l-1.92-1.92a.5.5 0 00-.71.71l2.5 2.5a.5.5 0 00.71 0l2.5-2.5a.5.5 0 00-.71-.71z"></path></svg>
              Instagram
            </button>
          </div>
        </div>

      </div>
    </div>

    <!-- Bottom Call to Action / Social Proof -->
    <div class="mt-8 text-center bg-gray-50 dark:bg-gray-700 p-6 rounded-2xl shadow-inner border border-gray-200 dark:border-gray-600 transform perspective-1000 rotate-x-3 rotate-y-2 hover:rotate-x-0 hover:rotate-y-0 transition-all duration-700 ease-in-out">
      <p class="text-lg font-semibold text-gray-800 dark:text-white mb-3 tracking-wide transform perspective-1000 rotate-x-3 rotate-y-2">Join thousands of happy customers!</p>
      <button class="px-8 py-4 bg-gradient-to-r from-teal-500 to-green-500 text-white font-bold rounded-full text-xl shadow-lg hover:shadow-xl hover:from-teal-600 hover:to-green-600 transition-all duration-300 ease-in-out uppercase tracking-wider transform perspective-1000 translate-z-10 hover:translate-z-20 scale-105 hover:scale-110">
        Explore More Products
        <span class="ml-2 inline-block transition-transform duration-300 group-hover:translate-x-1">
          &rarr;
        </span>
      </button>
      <p class="text-sm text-gray-500 dark:text-gray-400 mt-3">"Your satisfaction is our priority."</p>
    </div>

     <!-- Small decorative elements -->
     <div class="absolute -top-4 -left-4 w-12 h-12 bg-purple-400 dark:bg-purple-700 rounded-full mix-blend-multiply blur-sm opacity-60 transform translate-z-10 rotate-45"></div>
     <div class="absolute -bottom-4 -right-4 w-16 h-16 bg-teal-400 dark:bg-teal-700 rounded-full mix-blend-multiply blur-sm opacity-60 transform translate-z-10 -rotate-30"></div>

  </div>
</div>

Wishlist Real Estate Component

A responsive and high-contrast wishlist component for real estate properties, inspired by Material Design principles, with dark mode support.

Open Preview

                <div class="p-4 sm:p-6 md:p-8 bg-gray-100 dark:bg-gray-900 min-h-screen font-sans">
  <div class="max-w-7xl mx-auto">
    <h2 class="text-3xl sm:text-4xl font-extrabold text-gray-900 dark:text-white mb-8 sm:mb-10 text-center">
      Your Wishlist
    </h2>

    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6 sm:gap-8">

      <!-- Property Card 1 -->
      <div class="bg-white dark:bg-gray-800 rounded-lg shadow-xl hover:shadow-2xl transition-all duration-300 overflow-hidden flex flex-col">
        <div class="relative pb-2/3">
          <img class="absolute h-full w-full object-cover" src="https://picsum.photos/id/1018/600/400" alt="Modern House With Large Windows">
          <button class="absolute top-3 right-3 p-2 rounded-full bg-white dark:bg-gray-700 text-red-500 hover:text-red-600 dark:text-red-400 dark:hover:text-red-500 shadow-md transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-opacity-50" aria-label="Remove from wishlist">
            <svg class="h-6 w-6 fill-current" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/>
            </svg>
          </button>
        </div>
        <div class="p-4 sm:p-5 flex flex-col flex-grow">
          <h3 class="text-lg sm:text-xl font-semibold text-gray-900 dark:text-white mb-2 line-clamp-2">Luxury Villa with Ocean View</h3>
          <p class="text-sm text-gray-600 dark:text-gray-300 mb-3">123 Ocean Blvd, Malibu, CA</p>
          <div class="flex items-center text-gray-700 dark:text-gray-200 text-sm mb-4">
            <span class="flex items-center mr-4"><svg class="h-4 w-4 mr-1" fill="currentColor" viewBox="0 0 20 20"><path d="M10 2a.75.75 0 01.75.75v5.5a.75.75 0 01-1.5 0v-5.5A.75.75 0 0110 2zM4 9.75a.75.75 0 01.75-.75h10.5a.75.75 0 010 1.5H4.75a.75.75 0 01-.75-.75zM10 17.25a.75.75 0 01-.75-.75v-5.5a.75.75 0 011.5 0v5.5a.75.75 0 01-.75.75z"></path><path fill-rule="evenodd" d="M4.25 15.5A.75.75 0 013.5 14.75V5.25a.75.75 0 011.5 0v9.5a.75.75 0 01-.75.75zM15.75 15.5a.75.75 0 01-.75-.75v-9.5a.75.75 0 011.5 0v9.5a.75.75 0 01-.75.75z" clip-rule="evenodd"></path></svg> 4 Beds</span>
            <span class="flex items-center mr-4"><svg class="h-4 w-4 mr-1" fill="currentColor" viewBox="0 0 20 20"><path d="M10 2a.75.75 0 01.75.75v5.5a.75.75 0 01-1.5 0v-5.5A.75.75 0 0110 2zM4 9.75a.75.75 0 01.75-.75h10.5a.75.75 0 010 1.5H4.75a.75.75 0 01-.75-.75zM10 17.25a.75.75 0 01-.75-.75v-5.5a.75.75 0 011.5 0v5.5a.75.75 0 01-.75.75z"></path><path fill-rule="evenodd" d="M4.25 10A.75.75 0 013.5 9.25V5.25a.75.75 0 011.5 0V9.25a.75.75 0 01-.75.75zM15.75 10A.75.75 0 0115 9.25V5.25a.75.75 0 011.5 0V9.25a.75.75 0 01-.75.75z" clip-rule="evenodd"></path></svg> 3 Baths</span>
            <span class="flex items-center"><svg class="h-4 w-4 mr-1" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M7 2a2 2 0 00-2 2v12a2 2 0 002 2h6a2 2 0 002-2V4a2 2 0 00-2-2H7zm0 2h6v8H7V4zm0 10v1a1 1 0 001 1h4a1 1 0 001-1v-1H7z" clip-rule="evenodd"></path></svg> 2,500 sqft</span>
          </div>
          <div class="mt-auto flex justify-between items-baseline pt-2">
            <p class="text-2xl sm:text-3xl font-bold text-indigo-700 dark:text-indigo-400">$2,500,000</p>
            <a href="#" class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-indigo-600 hover:bg-indigo-700 dark:bg-indigo-500 dark:hover:bg-indigo-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 dark:focus:ring-offset-gray-900 transition-colors duration-200">
              View Details
            </a>
          </div>
        </div>
      </div>

      <!-- Property Card 2 -->
      <div class="bg-white dark:bg-gray-800 rounded-lg shadow-xl hover:shadow-2xl transition-all duration-300 overflow-hidden flex flex-col">
        <div class="relative pb-2/3">
          <img class="absolute h-full w-full object-cover" src="https://picsum.photos/id/1020/600/400" alt="Apartment Complex with City View">
           <button class="absolute top-3 right-3 p-2 rounded-full bg-white dark:bg-gray-700 text-red-500 hover:text-red-600 dark:text-red-400 dark:hover:text-red-500 shadow-md transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-opacity-50" aria-label="Remove from wishlist">
            <svg class="h-6 w-6 fill-current" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/>
            </svg>
          </button>
        </div>
        <div class="p-4 sm:p-5 flex flex-col flex-grow">
          <h3 class="text-lg sm:text-xl font-semibold text-gray-900 dark:text-white mb-2 line-clamp-2">Chic Downtown Loft</h3>
          <p class="text-sm text-gray-600 dark:text-gray-300 mb-3">456 City St, New York, NY</p>
          <div class="flex items-center text-gray-700 dark:text-gray-200 text-sm mb-4">
            <span class="flex items-center mr-4"><svg class="h-4 w-4 mr-1" fill="currentColor" viewBox="0 0 20 20"><path d="M10 2a.75.75 0 01.75.75v5.5a.75.75 0 01-1.5 0v-5.5A.75.75 0 0110 2zM4 9.75a.75.75 0 01.75-.75h10.5a.75.75 0 010 1.5H4.75a.75.75 0 01-.75-.75zM10 17.25a.75.75 0 01-.75-.75v-5.5a.75.75 0 011.5 0v5.5a.75.75 0 01-.75.75z"></path><path fill-rule="evenodd" d="M4.25 15.5A.75.75 0 013.5 14.75V5.25a.75.75 0 011.5 0v9.5a.75.75 0 01-.75.75zM15.75 15.5a.75.75 0 01-.75-.75v-9.5a.75.75 0 011.5 0v9.5a.75.75 0 01-.75.75z" clip-rule="evenodd"></path></svg> 2 Beds</span>
            <span class="flex items-center mr-4"><svg class="h-4 w-4 mr-1" fill="currentColor" viewBox="0 0 20 20"><path d="M10 2a.75.75 0 01.75.75v5.5a.75.75 0 01-1.5 0v-5.5A.75.75 0 0110 2zM4 9.75a.75.75 0 01.75-.75h10.5a.75.75 0 010 1.5H4.75a.75.75 0 01-.75-.75zM10 17.25a.75.75 0 01-.75-.75v-5.5a.75.75 0 011.5 0v5.5a.75.75 0 01-.75.75z"></path><path fill-rule="evenodd" d="M4.25 10A.75.75 0 013.5 9.25V5.25a.75.75 0 011.5 0V9.25a.75.75 0 01-.75.75zM15.75 10A.75.75 0 0115 9.25V5.25a.75.75 0 011.5 0V9.25a.75.75 0 01-.75.75z" clip-rule="evenodd"></path></svg> 2 Baths</span>
            <span class="flex items-center"><svg class="h-4 w-4 mr-1" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M7 2a2 2 0 00-2 2v12a2 2 0 002 2h6a2 2 0 002-2V4a2 2 0 00-2-2H7zm0 2h6v8H7V4zm0 10v1a1 1 0 001 1h4a1 1 0 001-1v-1H7z" clip-rule="evenodd"></path></svg> 1,200 sqft</span>
          </div>
          <div class="mt-auto flex justify-between items-baseline pt-2">
            <p class="text-2xl sm:text-3xl font-bold text-indigo-700 dark:text-indigo-400">$850,000</p>
            <a href="#" class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-indigo-600 hover:bg-indigo-700 dark:bg-indigo-500 dark:hover:bg-indigo-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 dark:focus:ring-offset-gray-900 transition-colors duration-200">
              View Details
            </a>
          </div>
        </div>
      </div>

      <!-- Property Card 3 -->
      <div class="bg-white dark:bg-gray-800 rounded-lg shadow-xl hover:shadow-2xl transition-all duration-300 overflow-hidden flex flex-col">
        <div class="relative pb-2/3">
          <img class="absolute h-full w-full object-cover" src="https://picsum.photos/id/1025/600/400" alt="Suburban Family House">
           <button class="absolute top-3 right-3 p-2 rounded-full bg-white dark:bg-gray-700 text-red-500 hover:text-red-600 dark:text-red-400 dark:hover:text-red-500 shadow-md transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-opacity-50" aria-label="Remove from wishlist">
            <svg class="h-6 w-6 fill-current" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/>
            </svg>
          </button>
        </div>
        <div class="p-4 sm:p-5 flex flex-col flex-grow">
          <h3 class="text-lg sm:text-xl font-semibold text-gray-900 dark:text-white mb-2 line-clamp-2">Spacious Family Home with Garden</h3>
          <p class="text-sm text-gray-600 dark:text-gray-300 mb-3">789 Evergreen Ln, Suburbia, TX</p>
          <div class="flex items-center text-gray-700 dark:text-gray-200 text-sm mb-4">
            <span class="flex items-center mr-4"><svg class="h-4 w-4 mr-1" fill="currentColor" viewBox="0 0 20 20"><path d="M10 2a.75.75 0 01.75.75v5.5a.75.75 0 01-1.5 0v-5.5A.75.75 0 0110 2zM4 9.75a.75.75 0 01.75-.75h10.5a.75.75 0 010 1.5H4.75a.75.75 0 01-.75-.75zM10 17.25a.75.75 0 01-.75-.75v-5.5a.75.75 0 011.5 0v5.5a.75.75 0 01-.75.75z"></path><path fill-rule="evenodd" d="M4.25 15.5A.75.75 0 013.5 14.75V5.25a.75.75 0 011.5 0v9.5a.75.75 0 01-.75.75zM15.75 15.5a.75.75 0 01-.75-.75v-9.5a.75.75 0 011.5 0v9.5a.75.75 0 01-.75.75z" clip-rule="evenodd"></path></svg> 5 Beds</span>
            <span class="flex items-center mr-4"><svg class="h-4 w-4 mr-1" fill="currentColor" viewBox="0 0 20 20"><path d="M10 2a.75.75 0 01.75.75v5.5a.75.75 0 01-1.5 0v-5.5A.75.75 0 0110 2zM4 9.75a.75.75 0 01.75-.75h10.5a.75.75 0 010 1.5H4.75a.75.75 0 01-.75-.75zM10 17.25a.75.75 0 01-.75-.75v-5.5a.75.75 0 011.5 0v5.5a.75.75 0 01-.75.75z"></path><path fill-rule="evenodd" d="M4.25 10A.75.75 0 013.5 9.25V5.25a.75.75 0 011.5 0V9.25a.75.75 0 01-.75.75zM15.75 10A.75.75 0 0115 9.25V5.25a.75.75 0 011.5 0V9.25a.75.75 0 01-.75.75z" clip-rule="evenodd"></path></svg> 4 Baths</span>
            <span class="flex items-center"><svg class="h-4 w-4 mr-1" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M7 2a2 2 0 00-2 2v12a2 2 0 002 2h6a2 2 0 002-2V4a2 2 0 00-2-2H7zm0 2h6v8H7V4zm0 10v1a1 1 0 001 1h4a1 1 0 001-1v-1H7z" clip-rule="evenodd"></path></svg> 3,800 sqft</span>
          </div>
          <div class="mt-auto flex justify-between items-baseline pt-2">
            <p class="text-2xl sm:text-3xl font-bold text-indigo-700 dark:text-indigo-400">$650,000</p>
            <a href="#" class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-indigo-600 hover:bg-indigo-700 dark:bg-indigo-500 dark:hover:bg-indigo-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 dark:focus:ring-offset-gray-900 transition-colors duration-200">
              View Details
            </a>
          </div>
        </div>
      </div>

      <!-- Property Card 4 -->
      <div class="bg-white dark:bg-gray-800 rounded-lg shadow-xl hover:shadow-2xl transition-all duration-300 overflow-hidden flex flex-col">
        <div class="relative pb-2/3">
          <img class="absolute h-full w-full object-cover" src="https://picsum.photos/id/1037/600/400" alt="Small Countryside Cottage">
           <button class="absolute top-3 right-3 p-2 rounded-full bg-white dark:bg-gray-700 text-red-500 hover:text-red-600 dark:text-red-400 dark:hover:text-red-500 shadow-md transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-opacity-50" aria-label="Remove from wishlist">
            <svg class="h-6 w-6 fill-current" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/>
            </svg>
          </button>
        </div>
        <div class="p-4 sm:p-5 flex flex-col flex-grow">
          <h3 class="text-lg sm:text-xl font-semibold text-gray-900 dark:text-white mb-2 line-clamp-2">Cozy Countryside Retreat</h3>
          <p class="text-sm text-gray-600 dark:text-gray-300 mb-3">456 Rural Rd, Countryside, GA</p>
          <div class="flex items-center text-gray-700 dark:text-gray-200 text-sm mb-4">
            <span class="flex items-center mr-4"><svg class="h-4 w-4 mr-1" fill="currentColor" viewBox="0 0 20 20"><path d="M10 2a.75.75 0 01.75.75v5.5a.75.75 0 01-1.5 0v-5.5A.75.75 0 0110 2zM4 9.75a.75.75 0 01.75-.75h10.5a.75.75 0 010 1.5H4.75a.75.75 0 01-.75-.75zM10 17.25a.75.75 0 01-.75-.75v-5.5a.75.75 0 011.5 0v5.5a.75.75 0 01-.75.75z"></path><path fill-rule="evenodd" d="M4.25 15.5A.75.75 0 013.5 14.75V5.25a.75.75 0 011.5 0v9.5a.75.75 0 01-.75.75zM15.75 15.5a.75.75 0 01-.75-.75v-9.5a.75.75 0 011.5 0v9.5a.75.75 0 01-.75.75z" clip-rule="evenodd"></path></svg> 3 Beds</span>
            <span class="flex items-center mr-4"><svg class="h-4 w-4 mr-1" fill="currentColor" viewBox="0 0 20 20"><path d="M10 2a.75.75 0 01.75.75v5.5a.75.75 0 01-1.5 0v-5.5A.75.75 0 0110 2zM4 9.75a.75.75 0 01.75-.75h10.5a.75.75 0 010 1.5H4.75a.75.75 0 01-.75-.75zM10 17.25a.75.75 0 01-.75-.75v-5.5a.75.75 0 011.5 0v5.5a.75.75 0 01-.75.75z"></path><path fill-rule="evenodd" d="M4.25 10A.75.75 0 013.5 9.25V5.25a.75.75 0 011.5 0V9.25a.75.75 0 01-.75.75zM15.75 10A.75.75 0 0115 9.25V5.25a.75.75 0 011.5 0V9.25a.75.75 0 01-.75.75z" clip-rule="evenodd"></path></svg> 2 Baths</span>
            <span class="flex items-center"><svg class="h-4 w-4 mr-1" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M7 2a2 2 0 00-2 2v12a2 2 0 002 2h6a2 2 0 002-2V4a2 2 0 00-2-2H7zm0 2h6v8H7V4zm0 10v1a1 1 0 001 1h4a1 1 0 001-1v-1H7z" clip-rule="evenodd"></path></svg> 1,800 sqft</span>
          </div>
          <div class="mt-auto flex justify-between items-baseline pt-2">
            <p class="text-2xl sm:text-3xl font-bold text-indigo-700 dark:text-indigo-400">$380,000</p>
            <a href="#" class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-indigo-600 hover:bg-indigo-700 dark:bg-indigo-500 dark:hover:bg-indigo-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 dark:focus:ring-offset-gray-900 transition-colors duration-200">
              View Details
            </a>
          </div>
        </div>
      </div>

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

Art Deco Navigation Bar

A responsive, Art Deco inspired navigation bar for CRM/Business Tools, featuring geometric patterns, rich jewel tones, and dark mode support. Designed with moderate complexity, including interactive elements.

Open Preview

                <nav class="bg-gradient-to-r from-emerald-700 to-emerald-900 dark:from-gray-900 dark:to-gray-950 p-4 shadow-xl font-sans relative z-50">
  <div class="container mx-auto flex justify-between items-center">
    <!-- Logo/Brand Section -->
    <div class="flex items-center space-x-2">
      <svg class="h-8 w-8 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 14v3m4-3v3m4-3v3M3 21h18M3 10h18M3 7l9-4 9 4M4 10h16v11H4V10z" />
      </svg>
      <a href="#" class="text-white text-2xl font-bold tracking-wider uppercase font-serif antialiased">CRM Suite</a>
    </div>

    <!-- Mobile Menu Button (Hamburger) -->
    <div class="md:hidden">
      <button class="text-white hover:text-emerald-200 focus:outline-none focus:ring-2 focus:ring-emerald-300" onclick="this.nextElementSibling.classList.toggle('hidden')">
        <svg class="h-8 w-8" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16m-7 6h7" />
        </svg>
      </button>
    </div>

    <!-- Navigation Links (Desktop) -->
    <div class="hidden md:flex space-x-8 lg:space-x-12 items-center">
      <a href="#" class="text-white text-lg font-medium hover:text-emerald-200 transition duration-300 ease-in-out relative group">
        Dashboard
        <span class="absolute left-0 bottom-0 w-full h-0.5 bg-emerald-300 origin-left scale-x-0 group-hover:scale-x-100 transition-transform duration-300"></span>
      </a>
      <a href="#" class="text-white text-lg font-medium hover:text-emerald-200 transition duration-300 ease-in-out relative group">
        Customers
        <span class="absolute left-0 bottom-0 w-full h-0.5 bg-emerald-300 origin-left scale-x-0 group-hover:scale-x-100 transition-transform duration-300"></span>
      </a>
      <a href="#" class="text-white text-lg font-medium hover:text-emerald-200 transition duration-300 ease-in-out relative group">
        Sales
        <span class="absolute left-0 bottom-0 w-full h-0.5 bg-emerald-300 origin-left scale-x-0 group-hover:scale-x-100 transition-transform duration-300"></span>
      </a>
      <a href="#" class="text-white text-lg font-medium hover:text-emerald-200 transition duration-300 ease-in-out relative group">
        Analytics
        <span class="absolute left-0 bottom-0 w-full h-0.5 bg-emerald-300 origin-left scale-x-0 group-hover:scale-x-100 transition-transform duration-300"></span>
      </a>
      <a href="#" class="text-white text-lg font-medium hover:text-emerald-200 transition duration-300 ease-in-out relative group">
        Settings
        <span class="absolute left-0 bottom-0 w-full h-0.5 bg-emerald-300 origin-left scale-x-0 group-hover:scale-x-100 transition-transform duration-300"></span>
      </a>
    </div>

    <!-- User Actions (Desktop) -->
    <div class="hidden md:flex items-center space-x-6">
      <button class="text-white hover:text-emerald-200 focus:outline-none focus:ring-2 focus:ring-emerald-300 rounded-full p-2 relative group">
        <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9" />
        </svg>
        <span class="absolute -top-1 -right-1 inline-flex items-center justify-center px-2 py-1 text-xs font-semibold leading-none text-red-100 bg-red-600 rounded-full">3</span>
        <span class="absolute left-0 bottom-0 w-full h-0.5 bg-emerald-300 origin-left scale-x-0 group-hover:scale-x-100 transition-transform duration-300"></span>
      </button>
      <div class="relative group">
        <img class="h-9 w-9 rounded-full object-cover cursor-pointer border-2 border-emerald-300 hover:border-emerald-500 transition-colors duration-300" src="https://randomuser.me/api/portraits/women/6.jpg" alt="User Avatar">
        <!-- Dropdown placeholder (can be implemented with JS for full functionality) -->
        <div class="absolute right-0 mt-2 w-48 bg-white dark:bg-gray-800 rounded-lg shadow-lg py-1 hidden group-hover:block transition-all duration-300 ease-out transform scale-95 opacity-0 group-hover:scale-100 group-hover:opacity-100 z-10">
          <a href="#" class="block px-4 py-2 text-gray-800 dark:text-gray-200 hover:bg-emerald-100 dark:hover:bg-gray-700">Profile</a>
          <a href="#" class="block px-4 py-2 text-gray-800 dark:text-gray-200 hover:bg-emerald-100 dark:hover:bg-gray-700">Settings</a>
          <form action="#" method="POST">
            <button type="submit" class="block w-full text-left px-4 py-2 text-red-600 hover:bg-emerald-100 dark:hover:bg-gray-700 dark:text-red-400">Sign Out</button>
          </form>
        </div>
      </div>
    </div>
  </div>

  <!-- Mobile Menu (Collapsed by default) -->
  <div class="hidden md:hidden absolute top-full left-0 w-full bg-gradient-to-b from-emerald-800 to-emerald-900 dark:from-gray-900 dark:to-gray-950 shadow-md pb-4 pt-2 animate-fade-in-down">
    <div class="flex flex-col items-center space-y-4">
      <a href="#" class="block text-white text-lg font-medium hover:text-emerald-200 transition duration-300 ease-in-out">Dashboard</a>
      <a href="#" class="block text-white text-lg font-medium hover:text-emerald-200 transition duration-300 ease-in-out">Customers</a>
      <a href="#" class="block text-white text-lg font-medium hover:text-emerald-200 transition duration-300 ease-in-out">Sales</a>
      <a href="#" class="block text-white text-lg font-medium hover:text-emerald-200 transition duration-300 ease-in-out">Analytics</a>
      <a href="#" class="block text-white text-lg font-medium hover:text-emerald-200 transition duration-300 ease-in-out">Settings</a>
      <button class="text-white hover:text-emerald-200 focus:outline-none focus:ring-2 focus:ring-emerald-300 rounded-full p-2 relative inline-flex items-center">
        <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9" />
        </svg>
        <span class="ml-2 text-white">Notifications <span class="text-red-300">(3)</span></span>
      </button>
      <img class="h-10 w-10 rounded-full object-cover border-2 border-emerald-300" src="https://randomuser.me/api/portraits/women/6.jpg" alt="User Avatar">
    </div>
  </div>
</nav>

<style>
  /* This is a simple animation for the mobile menu. 
     For a real-world scenario, you'd use a JS toggle.
     The 'hidden' class is toggled directly on the element in the HTML for demonstration.
      Tailwind's 'animate-fade-in-down' requires a keyframe definition within a CSS file or style block. 
     For a pure HTML/Tailwind solution, more complex animations might rely on utility classes alone 
     or external configuration, but for 'moderate complexity' with some 'interactive features' (like an expanding menu),
     a small style block for keyframes is practical and doesn't break the 'no JS' rule for the *component display* itself.
  */
  @keyframes fade-in-down {
    from {
      opacity: 0;
      transform: translateY(-10px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  .animate-fade-in-down {
    animation: fade-in-down 0.3s ease-out forwards;
  }
</style>

Luxury_Tabs_Component

A simple, elegant, and responsive tabs component designed for marketplace use, featuring a luxury/premium aesthetic with a complementary color scheme and dark mode support.

Open Preview

                <div class="p-4 dark:bg-gray-900 bg-white min-h-screen font-sans antialiased text-gray-800 dark:text-gray-200">
  <div class="max-w-4xl mx-auto bg-white dark:bg-gray-800 shadow-xl rounded-xl overflow-hidden">
    <div class="flex border-b border-gray-200 dark:border-gray-700 p-2">
      <button class="flex-1 px-4 py-3 text-lg font-medium text-purple-700 dark:text-purple-400 border-b-2 border-purple-700 dark:border-purple-400 transition-colors duration-300 hover:bg-gray-50 dark:hover:bg-gray-700 focus:outline-none">
        <span class="block">New Arrivals</span>
      </button>
      <button class="flex-1 px-4 py-3 text-lg font-medium text-gray-600 dark:text-gray-300 border-b-2 border-transparent transition-colors duration-300 hover:text-purple-700 dark:hover:text-purple-400 hover:border-purple-700/50 dark:hover:border-purple-400/50 focus:outline-none">
        <span class="block">Best Sellers</span>
      </button>
      <button class="flex-1 px-4 py-3 text-lg font-medium text-gray-600 dark:text-gray-300 border-b-2 border-transparent transition-colors duration-300 hover:text-purple-700 dark:hover:text-purple-400 hover:border-purple-700/50 dark:hover:border-purple-400/50 focus:outline-none">
        <span class="block">On Sale</span>
      </button>
    </div>

    <div class="p-6 md:p-8">
      <!-- Tab Content 1: New Arrivals -->
      <div class="space-y-6">
        <h2 class="text-3xl font-serif text-gray-900 dark:text-gray-100 mb-4">Discover Our Latest Collection</h2>
        <p class="text-lg leading-relaxed text-gray-700 dark:text-gray-300">
          Explore hand-picked items from top sellers, meticulously selected for their quality and unique appeal. Elevate your style with our exquisite new arrivals.
        </p>
        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
          <div class="flex flex-col md:flex-row items-center bg-gray-50 dark:bg-gray-700 rounded-lg p-4 shadow-sm">
            <img src="https://picsum.photos/seed/item1/150/150" alt="Product Image" class="w-24 h-24 md:w-32 md:h-32 rounded-lg object-cover flex-shrink-0 mb-4 md:mb-0 md:mr-4">
            <div class="text-center md:text-left">
              <h3 class="text-xl font-semibold text-gray-900 dark:text-gray-100">Elegant Leather Bag</h3>
              <p class="text-purple-700 dark:text-purple-400 font-bold text-lg mt-1">$299.00</p>
              <p class="text-gray-600 dark:text-gray-300 text-sm">Handcrafted with premium leather.</p>
            </div>
          </div>
          <div class="flex flex-col md:flex-row items-center bg-gray-50 dark:bg-gray-700 rounded-lg p-4 shadow-sm">
            <img src="https://picsum.photos/seed/item2/150/150" alt="Product Image" class="w-24 h-24 md:w-32 md:h-32 rounded-lg object-cover flex-shrink-0 mb-4 md:mb-0 md:mr-4">
            <div class="text-center md:text-left">
              <h3 class="text-xl font-semibold text-gray-900 dark:text-gray-100">Artisan Silver Necklace</h3>
              <p class="text-purple-700 dark:text-purple-400 font-bold text-lg mt-1">$149.00</p>
              <p class="text-gray-600 dark:text-gray-300 text-sm">Unique design, pure sterling silver.</p>
            </div>
          </div>
        </div>
        <div class="md:flex items-center justify-between py-4 border-t border-gray-200 dark:border-gray-700 mt-6">
            <div class="flex -space-x-2 overflow-hidden mb-4 md:mb-0 justify-center md:justify-start">
                <img class="inline-block h-10 w-10 rounded-full ring-2 ring-white dark:ring-gray-800" src="https://randomuser.me/api/portraits/women/1.jpg" alt="Customer Avatar">
                <img class="inline-block h-10 w-10 rounded-full ring-2 ring-white dark:ring-gray-800" src="https://randomuser.me/api/portraits/men/2.jpg" alt="Customer Avatar">
                <img class="inline-block h-10 w-10 rounded-full ring-2 ring-white dark:ring-gray-800" src="https://randomuser.me/api/portraits/women/3.jpg" alt="Customer Avatar">
            </div>
            <p class="text-sm text-gray-600 dark:text-gray-400 text-center md:text-right">Trusted by over 10,000 discerning customers.</p>
        </div>
      </div>

      <!-- Tab Content 2: Best Sellers (hidden by default, for demonstration) -->
      <!-- Add 'hidden' class to hide, remove to show -->
      <!-- <div class="hidden space-y-6">
        <h2 class="text-3xl font-serif text-gray-900 dark:text-gray-100 mb-4">Our Most Popular Choices</h2>
        <p class="text-lg leading-relaxed text-gray-700 dark:text-gray-300">
          See what everyone else is loving! These items consistently receive top ratings and fly off our shelves. Don't miss out on these customer favorites.
        </p>
        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
          <div class="flex flex-col md:flex-row items-center bg-gray-50 dark:bg-gray-700 rounded-lg p-4 shadow-sm">
            <img src="https://picsum.photos/seed/best1/150/150" alt="Product Image" class="w-24 h-24 md:w-32 md:h-32 rounded-lg object-cover flex-shrink-0 mb-4 md:mb-0 md:mr-4">
            <div class="text-center md:text-left">
              <h3 class="text-xl font-semibold text-gray-900 dark:text-gray-100">Vintage Swiss Watch</h3>
              <p class="text-purple-700 dark:text-purple-400 font-bold text-lg mt-1">$899.00</p>
              <p class="text-gray-600 dark:text-gray-300 text-sm">Timeless elegance, precise mechanics.</p>
            </div>
          </div>
          <div class="flex flex-col md:flex-row items-center bg-gray-50 dark:bg-gray-700 rounded-lg p-4 shadow-sm">
            <img src="https://picsum.photos/seed/best2/150/150" alt="Product Image" class="w-24 h-24 md:w-32 md:h-32 rounded-lg object-cover flex-shrink-0 mb-4 md:mb-0 md:mr-4">
            <div class="text-center md:text-left">
              <h3 class="text-xl font-semibold text-gray-900 dark:text-gray-100">Silk Scarf Collection</h3>
              <p class="text-purple-700 dark:text-purple-400 font-bold text-lg mt-1">$75.00</p>
              <p class="text-gray-600 dark:text-gray-300 text-sm">Luxurious feel, vibrant patterns.</p>
            </div>
          </div>
        </div>
      </div> -->

      <!-- Tab Content 3: On Sale (hidden by default, for demonstration) -->
      <!-- <div class="hidden space-y-6">
        <h2 class="text-3xl font-serif text-gray-900 dark:text-gray-100 mb-4">Limited-Time Offers</h2>
        <p class="text-lg leading-relaxed text-gray-700 dark:text-gray-300">
          Grab these incredible deals before they're gone! Premium items at unbeatable prices, available for a short period only.
        </p>
        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
          <div class="flex flex-col md:flex-row items-center bg-gray-50 dark:bg-gray-700 rounded-lg p-4 shadow-sm">
            <img src="https://picsum.photos/seed/sale1/150/150" alt="Product Image" class="w-24 h-24 md:w-32 md:h-32 rounded-lg object-cover flex-shrink-0 mb-4 md:mb-0 md:mr-4">
            <div class="text-center md:text-left">
              <h3 class="text-xl font-semibold text-gray-900 dark:text-gray-100">Designer Handbag</h3>
              <p class="text-gray-500 dark:text-gray-400 line-through text-md">$450.00</p>
              <p class="text-purple-700 dark:text-purple-400 font-bold text-lg mt-1">$225.00</p>
              <p class="text-gray-600 dark:text-gray-300 text-sm">50% off! Limited stock.</p>
            </div>
          </div>
          <div class="flex flex-col md:flex-row items-center bg-gray-50 dark:bg-gray-700 rounded-lg p-4 shadow-sm">
            <img src="https://picsum.photos/seed/sale2/150/150" alt="Product Image" class="w-24 h-24 md:w-32 md:h-32 rounded-lg object-cover flex-shrink-0 mb-4 md:mb-0 md:mr-4">
            <div class="text-center md:text-left">
              <h3 class="text-xl font-semibold text-gray-900 dark:text-gray-100">Luxury Scented Candle Set</h3>
              <p class="text-gray-500 dark:text-gray-400 line-through text-md">$90.00</p>
              <p class="text-purple-700 dark:text-purple-400 font-bold text-lg mt-1">$60.00</p>
              <p class="text-gray-600 dark:text-gray-300 text-sm">30% off! Perfect gift.</p>
            </div>
          </div>
        </div>
      </div> -->

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

Healthcare_Form_Gradient_Neon

A complex, responsive healthcare form component with neon/electric color gradients and smooth transitions, supporting dark mode. Designed for medical applications with multiple interactive elements.

Open Preview

                <div class="min-h-screen py-12 px-4 sm:px-6 lg:px-8 bg-gradient-to-br from-purple-900 via-zinc-950 to-blue-900 dark:from-zinc-950 dark:via-blue-950 dark:to-purple-950 text-white font-sans overflow-hidden">
  <div class="max-w-4xl mx-auto bg-gradient-to-br from-purple-700 via-pink-700 to-blue-700 dark:from-zinc-800 dark:via-purple-800 dark:to-blue-800 rounded-3xl shadow-xl p-8 sm:p-10 lg:p-12 border border-purple-500 dark:border-blue-700 transform transition-all duration-500 hover:shadow-2xl hover:scale-[1.01]">
    <h2 class="text-4xl sm:text-5xl font-extrabold text-center mb-10 bg-clip-text text-transparent bg-gradient-to-r from-teal-300 via-pink-300 to-lime-300 dark:from-teal-400 dark:via-pink-400 dark:to-lime-400 drop-shadow-lg animate-pulse-light">
      Patient Registration Form
    </h2>

    <form class="space-y-8">
      <!-- Personal Information Section -->
      <fieldset class="border-t-2 border-b-2 border-indigo-400 dark:border-teal-600 pt-6 pb-8 space-y-6">
        <legend class="text-2xl sm:text-3xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-lime-300 to-pink-300 dark:from-lime-400 dark:to-pink-400 px-3 -mt-6 ml-4 drop-shadow-md">Personal Information</legend>

        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
          <div>
            <label for="full-name" class="block text-sm font-medium text-purple-200 dark:text-zinc-300 mb-2">Full Name</label>
            <input type="text" name="full-name" id="full-name" autocomplete="name" placeholder="John Doe" class="w-full px-4 py-3 rounded-xl bg-purple-900/50 dark:bg-zinc-900/50 border border-purple-500 dark:border-blue-700 focus:ring-2 focus:ring-teal-400 focus:border-teal-400 text-white transition duration-300" required>
          </div>
          <div>
            <label for="dob" class="block text-sm font-medium text-purple-200 dark:text-zinc-300 mb-2">Date of Birth</label>
            <input type="date" name="dob" id="dob" class="w-full px-4 py-3 rounded-xl bg-purple-900/50 dark:bg-zinc-900/50 border border-purple-500 dark:border-blue-700 focus:ring-2 focus:ring-teal-400 focus:border-teal-400 text-white transition duration-300" required>
          </div>
        </div>

        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
          <div>
            <label for="email" class="block text-sm font-medium text-purple-200 dark:text-zinc-300 mb-2">Email Address</label>
            <input type="email" name="email" id="email" autocomplete="email" placeholder="[email protected]" class="w-full px-4 py-3 rounded-xl bg-purple-900/50 dark:bg-zinc-900/50 border border-purple-500 dark:border-blue-700 focus:ring-2 focus:ring-teal-400 focus:border-teal-400 text-white transition duration-300" required>
          </div>
          <div>
            <label for="phone" class="block text-sm font-medium text-purple-200 dark:text-zinc-300 mb-2">Phone Number</label>
            <input type="tel" name="phone" id="phone" autocomplete="tel" placeholder="(123) 456-7890" class="w-full px-4 py-3 rounded-xl bg-purple-900/50 dark:bg-zinc-900/50 border border-purple-500 dark:border-blue-700 focus:ring-2 focus:ring-teal-400 focus:border-teal-400 text-white transition duration-300" required>
          </div>
        </div>

        <div>
          <label for="address" class="block text-sm font-medium text-purple-200 dark:text-zinc-300 mb-2">Street Address</label>
          <input type="text" name="address" id="address" autocomplete="street-address" placeholder="123 Main St" class="w-full px-4 py-3 rounded-xl bg-purple-900/50 dark:bg-zinc-900/50 border border-purple-500 dark:border-blue-700 focus:ring-2 focus:ring-teal-400 focus:border-teal-400 text-white transition duration-300" required>
        </div>
        <div class="grid grid-cols-1 sm:grid-cols-3 gap-6">
          <div>
            <label for="city" class="block text-sm font-medium text-purple-200 dark:text-zinc-300 mb-2">City</label>
            <input type="text" name="city" id="city" autocomplete="address-level2" placeholder="Anytown" class="w-full px-4 py-3 rounded-xl bg-purple-900/50 dark:bg-zinc-900/50 border border-purple-500 dark:border-blue-700 focus:ring-2 focus:ring-teal-400 focus:border-teal-400 text-white transition duration-300" required>
          </div>
          <div>
            <label for="state" class="block text-sm font-medium text-purple-200 dark:text-zinc-300 mb-2">State</label>
            <input type="text" name="state" id="state" autocomplete="address-level1" placeholder="CA" class="w-full px-4 py-3 rounded-xl bg-purple-900/50 dark:bg-zinc-900/50 border border-purple-500 dark:border-blue-700 focus:ring-2 focus:ring-teal-400 focus:border-teal-400 text-white transition duration-300" required>
          </div>
          <div>
            <label for="zip" class="block text-sm font-medium text-purple-200 dark:text-zinc-300 mb-2">ZIP Code</label>
            <input type="text" name="zip" id="zip" autocomplete="postal-code" placeholder="90210" class="w-full px-4 py-3 rounded-xl bg-purple-900/50 dark:bg-zinc-900/50 border border-purple-500 dark:border-blue-700 focus:ring-2 focus:ring-teal-400 focus:border-teal-400 text-white transition duration-300" required>
          </div>
        </div>
      </fieldset>

      <!-- Medical History Section -->
      <fieldset class="border-t-2 border-b-2 border-indigo-400 dark:border-teal-600 pt-6 pb-8 space-y-6">
        <legend class="text-2xl sm:text-3xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-lime-300 to-pink-300 dark:from-lime-400 dark:to-pink-400 px-3 -mt-6 ml-4 drop-shadow-md">Medical History</legend>

        <div>
          <label class="block text-sm font-medium text-purple-200 dark:text-zinc-300 mb-3">Are you currently taking any medications?</label>
          <div class="flex flex-wrap gap-x-6 gap-y-3">
            <div class="flex items-center">
              <input id="meds-yes" name="medications" type="radio" class="h-5 w-5 text-teal-400 dark:text-lime-400 bg-purple-900/50 dark:bg-zinc-900/50 border-purple-500 dark:border-blue-700 focus:ring-teal-400 transition duration-300">
              <label for="meds-yes" class="ml-2 block text-base text-white">Yes</label>
            </div>
            <div class="flex items-center">
              <input id="meds-no" name="medications" type="radio" class="h-5 w-5 text-teal-400 dark:text-lime-400 bg-purple-900/50 dark:bg-zinc-900/50 border-purple-500 dark:border-blue-700 focus:ring-teal-400 transition duration-300">
              <label for="meds-no" class="ml-2 block text-base text-white">No</label>
            </div>
          </div>
        </div>

        <div>
          <label for="past-conditions" class="block text-sm font-medium text-purple-200 dark:text-zinc-300 mb-2">Please list any significant past medical conditions or surgeries:</label>
          <textarea id="past-conditions" name="past-conditions" rows="4" placeholder="e.g., Hypertension, Appendectomy (2010)" class="w-full px-4 py-3 rounded-xl bg-purple-900/50 dark:bg-zinc-900/50 border border-purple-500 dark:border-blue-700 focus:ring-2 focus:ring-teal-400 focus:border-teal-400 text-white transition duration-300"></textarea>
        </div>

        <div>
          <label class="block text-sm font-medium text-purple-200 dark:text-zinc-300 mb-3">Do you have any known allergies?</label>
          <div class="flex flex-wrap gap-x-6 gap-y-3 pb-2">
            <div class="flex items-center">
              <input id="allergies-yes" name="allergies" type="radio" class="h-5 w-5 text-teal-400 dark:text-lime-400 bg-purple-900/50 dark:bg-zinc-900/50 border-purple-500 dark:border-blue-700 focus:ring-teal-400 transition duration-300">
              <label for="allergies-yes" class="ml-2 block text-base text-white">Yes</label>
            </div>
            <div class="flex items-center">
              <input id="allergies-no" name="allergies" type="radio" class="h-5 w-5 text-teal-400 dark:text-lime-400 bg-purple-900/50 dark:bg-zinc-900/50 border-purple-500 dark:border-blue-700 focus:ring-teal-400 transition duration-300">
              <label for="allergies-no" class="ml-2 block text-base text-white">No</label>
            </div>
          </div>
          <textarea id="allergy-details" name="allergy-details" rows="2" placeholder="If yes, please specify (e.g., Penicillin, Peanuts)" class="w-full px-4 py-3 rounded-xl bg-purple-900/50 dark:bg-zinc-900/50 border border-purple-500 dark:border-blue-700 focus:ring-2 focus:ring-teal-400 focus:border-teal-400 text-white transition duration-300"></textarea>
        </div>

        <div>
          <label class="block text-sm font-medium text-purple-200 dark:text-zinc-300 mb-3">Immunization Status (check all that apply):</label>
          <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4">
            <div class="flex items-center">
              <input id="immunization-flu" name="immunizations[]" type="checkbox" value="flu" class="h-5 w-5 text-teal-400 dark:text-lime-400 rounded bg-purple-900/50 dark:bg-zinc-900/50 border-purple-500 dark:border-blue-700 focus:ring-teal-400 transition duration-300">
              <label for="immunization-flu" class="ml-2 block text-base text-white">Annual Flu Shot</label>
            </div>
            <div class="flex items-center">
              <input id="immunization-tetanus" name="immunizations[]" type="checkbox" value="tetanus" class="h-5 w-5 text-teal-400 dark:text-lime-400 rounded bg-purple-900/50 dark:bg-zinc-900/50 border-purple-500 dark:border-blue-700 focus:ring-teal-400 transition duration-300">
              <label for="immunization-tetanus" class="ml-2 block text-base text-white">Tetanus (last 10 yrs)</label>
            </div>
            <div class="flex items-center">
              <input id="immunization-hpv" name="immunizations[]" type="checkbox" value="hpv" class="h-5 w-5 text-teal-400 dark:text-lime-400 rounded bg-purple-900/50 dark:bg-zinc-900/50 border-purple-500 dark:border-blue-700 focus:ring-teal-400 transition duration-300">
              <label for="immunization-hpv" class="ml-2 block text-base text-white">HPV</label>
            </div>
            <div class="flex items-center">
              <input id="immunization-covid" name="immunizations[]" type="checkbox" value="covid" class="h-5 w-5 text-teal-400 dark:text-lime-400 rounded bg-purple-900/50 dark:bg-zinc-900/50 border-purple-500 dark:border-blue-700 focus:ring-teal-400 transition duration-300">
              <label for="immunization-covid" class="ml-2 block text-base text-white">COVID-19</label>
            </div>
            <div class="flex items-center">
              <input id="immunization-mmr" name="immunizations[]" type="checkbox" value="mmr" class="h-5 w-5 text-teal-400 dark:text-lime-400 rounded bg-purple-900/50 dark:bg-zinc-900/50 border-purple-500 dark:border-blue-700 focus:ring-teal-400 transition duration-300">
              <label for="immunization-mmr" class="ml-2 block text-base text-white">MMR</label>
            </div>
            <div class="flex items-center">
              <input id="immunization-other" name="immunizations[]" type="checkbox" value="other" class="h-5 w-5 text-teal-400 dark:text-lime-400 rounded bg-purple-900/50 dark:bg-zinc-900/50 border-purple-500 dark:border-blue-700 focus:ring-teal-400 transition duration-300">
              <label for="immunization-other" class="ml-2 block text-base text-white mb-2">Other (specify below)</label>
            </div>
          </div>
          <textarea id="immunization-details" name="immunization-details" rows="2" placeholder="Specify other immunizations" class="w-full mt-2 px-4 py-3 rounded-xl bg-purple-900/50 dark:bg-zinc-900/50 border border-purple-500 dark:border-blue-700 focus:ring-2 focus:ring-teal-400 focus:border-teal-400 text-white transition duration-300"></textarea>
        </div>
      </fieldset>

      <!-- Emergency Contact Section -->
      <fieldset class="border-t-2 border-b-2 border-emerald-400/50 dark:border-cyan-600/50 pt-6 pb-8 space-y-6">
        <legend class="text-2xl sm:text-3xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-orange-300 to-cyan-300 dark:from-orange-400 dark:to-cyan-400 px-3 -mt-6 ml-4 drop-shadow-md">Emergency Contact</legend>

        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
          <div>
            <label for="ec-name" class="block text-sm font-medium text-purple-200 dark:text-zinc-300 mb-2">Full Name</label>
            <input type="text" name="ec-name" id="ec-name" autocomplete="name" placeholder="Jane Doe" class="w-full px-4 py-3 rounded-xl bg-purple-900/50 dark:bg-zinc-900/50 border border-purple-500 dark:border-blue-700 focus:ring-2 focus:ring-teal-400 focus:border-teal-400 text-white transition duration-300" required>
          </div>
          <div>
            <label for="ec-relationship" class="block text-sm font-medium text-purple-200 dark:text-zinc-300 mb-2">Relationship</label>
            <input type="text" name="ec-relationship" id="ec-relationship" placeholder="Spouse, Parent, Friend" class="w-full px-4 py-3 rounded-xl bg-purple-900/50 dark:bg-zinc-900/50 border border-purple-500 dark:border-blue-700 focus:ring-2 focus:ring-teal-400 focus:border-teal-400 text-white transition duration-300" required>
          </div>
        </div>
        <div>
          <label for="ec-phone" class="block text-sm font-medium text-purple-200 dark:text-zinc-300 mb-2">Phone Number</label>
          <input type="tel" name="ec-phone" id="ec-phone" autocomplete="tel" placeholder="(987) 654-3210" class="w-full px-4 py-3 rounded-xl bg-purple-900/50 dark:bg-zinc-900/50 border border-purple-500 dark:border-blue-700 focus:ring-2 focus:ring-teal-400 focus:border-teal-400 text-white transition duration-300" required>
        </div>
      </fieldset>

      <div class="flex justify-end pt-4">
        <button type="submit" class="w-full sm:w-auto px-8 py-4 rounded-xl font-bold text-lg bg-gradient-to-r from-teal-400 to-lime-400 dark:from-sky-400 dark:to-cyan-400 text-zinc-900 shadow-lg hover:from-teal-300 hover:to-lime-300 dark:hover:from-sky-300 dark:hover:to-cyan-300 focus:outline-none focus:ring-4 focus:ring-teal-500/50 dark:focus:ring-cyan-500/50 transition-all duration-300 ease-in-out transform hover:-translate-y-1 hover:scale-105 active:scale-95 glow-on-hover">
          Submit Registration
        </button>
      </div>
    </form>
  </div>

  <style>
    @keyframes pulse-light {
      0%, 100% { filter: brightness(1); }
      50% { filter: brightness(1.2); }
    }

    .animate-pulse-light {
      animation: pulse-light 3s infinite ease-in-out;
    }

    .glow-on-hover {
      transition: all 0.3s ease;
      position: relative;
      z-index: 1;
    }

    .glow-on-hover::before {
      content: '';
      background: linear-gradient(45deg, #00C9FF, #92FE9D, #00FFC0, #FFD700, #FF4500, #FF0077, #FF00C1, #A020F0, #00C9FF);
      position: absolute;
      top: -2px;
      left: -2px;
      background-size: 400%;
      z-index: -1;
      filter: blur(8px);
      width: calc(100% + 4px);
      height: calc(100% + 4px);
      animation: glowing 20s linear infinite;
      opacity: 0;
      transition: opacity .3s ease-in-out;
      border-radius: 20px;
    }

    .glow-on-hover:active {
      color: #000
    }

    .glow-on-hover:active:after {
      background: transparent;
    }

    .glow-on-hover:hover:before {
      opacity: 1;
    }

    .glow-on-hover::after {
      z-index: -1;
      content: '';
      position: absolute;
      width: 100%;
      height: 100%;
      background: inherit; /* inherit the background of the button */
      left: 0;
      top: 0;
      border-radius: inherit;
    }

    @keyframes glowing {
      0% { background-position: 0 0; }
      50% { background-position: 400% 0; }
      100% { background-position: 0 0; }
    }
  </style>
</div>

Cyberpunk_Timeline_Dating_Social_Component

A responsive timeline component with a cyberpunk aesthetic for dating and social platforms. Features dark backgrounds, warm neon accents, and adaptive layout for desktop, tablet, and mobile, with full dark mode support.

Open Preview

                <div class="font-sans antialiased bg-gray-950 text-gray-200 min-h-screen dark:bg-gray-900 border-t-4 border-indigo-600 dark:border-indigo-500">
  <div class="container mx-auto px-4 py-8 lg:py-16">
    <h2 class="text-4xl lg:text-5xl font-extrabold text-center mb-12 tracking-wide text-indigo-400 dark:text-indigo-300 drop-shadow-lg shadow-indigo-500/50">
      Your Chrono-Log
    </h2>

    <div class="relative before:absolute before:left-2 before:top-0 before:h-full before:w-1 before:bg-gradient-to-b before:from-indigo-600 before:via-pink-500 before:to-orange-400 before:rounded-full dark:before:from-indigo-500 dark:before:via-pink-400 dark:before:to-orange-300 lg:before:left-1/2 lg:before:-translate-x-1/2">

      <!-- Timeline Item 1 -->
      <div class="flex flex-col lg:flex-row lg:justify-start lg:odd:flex-row-reverse w-full mb-12">
        <div class="lg:w-1/2 flex justify-end lg:pr-10 lg:text-right">
          <div class="relative bg-gray-800 dark:bg-gray-900 p-6 rounded-lg shadow-xl dark:shadow-2xl border border-indigo-700 dark:border-indigo-600 w-full ml-8 lg:ml-0 lg:mr-0 ">
            <span class="absolute -left-3 top-6 h-6 w-6 rounded-full bg-indigo-600 dark:bg-indigo-500 border-4 border-gray-950 dark:border-gray-900 flex items-center justify-center text-white text-xs font-bold"></span>
            <div class="absolute hidden lg:block h-3 w-3 bg-indigo-600 dark:bg-indigo-500 rounded-full -right-1.5 top-8"></div>
            <h3 class="text-2xl font-bold text-pink-400 dark:text-pink-300 mb-2">Connection Established</h3>
            <p class="text-lg text-gray-300 dark:text-gray-400 mb-4">You matched with <span class="font-semibold text-lime-400">Ayla_Xenon</span>. Sent an initial holo-greet.</p>
            <div class="flex items-center justify-between text-sm text-gray-400 dark:text-gray-500">
              <span class="flex items-center"><svg class="w-4 h-4 mr-1 text-indigo-500" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z" clip-rule="evenodd"></path></svg> 2077-10-26</span>
              <div class="flex -space-x-2 overflow-hidden">
                <img class="inline-block h-8 w-8 rounded-full ring-2 ring-indigo-500" src="https://randomuser.me/api/portraits/women/1.jpg" alt="Ayla_Xenon">
                <img class="inline-block h-8 w-8 rounded-full ring-2 ring-indigo-500" src="https://randomuser.me/api/portraits/men/1.jpg" alt="You">
              </div>
            </div>
          </div>
        </div>
        <div class="lg:w-1/2 flex items-center justify-start lg:pl-10 lg:text-left invisible lg:visible">
            <img class="w-full lg:max-w-xs xl:max-w-md h-auto rounded-lg shadow-lg border border-indigo-700 dark:border-indigo-600 object-cover" src="https://picsum.photos/400/250?random=1" alt="Match pic">
        </div>
      </div>

      <!-- Timeline Item 2 -->
      <div class="flex flex-col lg:flex-row lg:justify-start lg:even:flex-row w-full mb-12">
        <div class="lg:w-1/2 flex items-center justify-end lg:pr-10 lg:text-right invisible lg:visible">
            <img class="w-full lg:max-w-xs xl:max-w-md h-auto rounded-lg shadow-lg border border-pink-700 dark:border-pink-600 object-cover" src="https://picsum.photos/400/250?random=2" alt="First Chat">
        </div>
        <div class="lg:w-1/2 flex justify-start lg:pl-10">
          <div class="relative bg-gray-800 dark:bg-gray-900 p-6 rounded-lg shadow-xl dark:shadow-2xl border border-pink-700 dark:border-pink-600 w-full ml-8 lg:ml-0 lg:mr-0">
            <span class="absolute -left-3 top-6 h-6 w-6 rounded-full bg-pink-600 dark:bg-pink-500 border-4 border-gray-950 dark:border-gray-900 flex items-center justify-center text-white text-xs font-bold"></span>
            <div class="absolute hidden lg:block h-3 w-3 bg-pink-600 dark:bg-pink-500 rounded-full -left-1.5 top-8"></div>
            <h3 class="text-2xl font-bold text-orange-400 dark:text-orange-300 mb-2">First Data-Exchange</h3>
            <p class="text-lg text-gray-300 dark:text-gray-400 mb-4">Had a deep cyber-chat about singularity and synth-wave music.</p>
            <div class="flex items-center justify-between text-sm text-gray-400 dark:text-gray-500">
              <span class="flex items-center"><svg class="w-4 h-4 mr-1 text-pink-500" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z" clip-rule="evenodd"></path></svg> 2077-10-28</span>
              <div class="flex -space-x-2 overflow-hidden">
                <img class="inline-block h-8 w-8 rounded-full ring-2 ring-pink-500" src="https://randomuser.me/api/portraits/women/1.jpg" alt="Ayla_Xenon">
                <img class="inline-block h-8 w-8 rounded-full ring-2 ring-pink-500" src="https://randomuser.me/api/portraits/men/1.jpg" alt="You">
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- Timeline Item 3 -->
      <div class="flex flex-col lg:flex-row lg:justify-start lg:odd:flex-row-reverse w-full mb-12">
        <div class="lg:w-1/2 flex justify-end lg:pr-10 lg:text-right">
          <div class="relative bg-gray-800 dark:bg-gray-900 p-6 rounded-lg shadow-xl dark:shadow-2xl border border-orange-700 dark:border-orange-600 w-full ml-8 lg:ml-0 lg:mr-0">
            <span class="absolute -left-3 top-6 h-6 w-6 rounded-full bg-orange-600 dark:bg-orange-500 border-4 border-gray-950 dark:border-gray-900 flex items-center justify-center text-white text-xs font-bold"></span>
            <div class="absolute hidden lg:block h-3 w-3 bg-orange-600 dark:bg-orange-500 rounded-full -right-1.5 top-8"></div>
            <h3 class="text-2xl font-bold text-lime-400 dark:text-lime-300 mb-2">First IRL Meet-Up</h3>
            <p class="text-lg text-gray-300 dark:text-gray-400 mb-4">Met at the 'Neon Dreams' club. Had some synthetic sake.</p>
            <div class="flex items-center justify-between text-sm text-gray-400 dark:text-gray-500">
              <span class="flex items-center"><svg class="w-4 h-4 mr-1 text-orange-500" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z" clip-rule="evenodd"></path></svg> 2077-11-03</span>
              <div class="flex -space-x-2 overflow-hidden">
                <img class="inline-block h-8 w-8 rounded-full ring-2 ring-orange-500" src="https://randomuser.me/api/portraits/women/1.jpg" alt="Ayla_Xenon">
                <img class="inline-block h-8 w-8 rounded-full ring-2 ring-orange-500" src="https://randomuser.me/api/portraits/men/1.jpg" alt="You">
              </div>
            </div>
          </div>
        </div>
        <div class="lg:w-1/2 flex items-center justify-start lg:pl-10 lg:text-left invisible lg:visible">
            <img class="w-full lg:max-w-xs xl:max-w-md h-auto rounded-lg shadow-lg border border-orange-700 dark:border-orange-600 object-cover" src="https://picsum.photos/400/250?random=3" alt="Neon Club">
        </div>
      </div>

      <!-- Timeline Item 4 -->
      <div class="flex flex-col lg:flex-row lg:justify-start lg:even:flex-row w-full mb-12">
        <div class="lg:w-1/2 flex items-center justify-end lg:pr-10 lg:text-right invisible lg:visible">
            <img class="w-full lg:max-w-xs xl:max-w-md h-auto rounded-lg shadow-lg border border-lime-700 dark:border-lime-600 object-cover" src="https://picsum.photos/400/250?random=4" alt="Synth Concert">
        </div>
        <div class="lg:w-1/2 flex justify-start lg:pl-10">
          <div class="relative bg-gray-800 dark:bg-gray-900 p-6 rounded-lg shadow-xl dark:shadow-2xl border border-lime-700 dark:border-lime-600 w-full ml-8 lg:ml-0 lg:mr-0">
            <span class="absolute -left-3 top-6 h-6 w-6 rounded-full bg-lime-600 dark:bg-lime-500 border-4 border-gray-950 dark:border-gray-900 flex items-center justify-center text-white text-xs font-bold"></span>
            <div class="absolute hidden lg:block h-3 w-3 bg-lime-600 dark:bg-lime-500 rounded-full -left-1.5 top-8"></div>
            <h3 class="text-2xl font-bold text-indigo-400 dark:text-indigo-300 mb-2">Shared Neural-Link</h3>
            <p class="text-lg text-gray-300 dark:text-gray-400 mb-4">Synchronized neural implants to experience a synth-pop concert.</p>
            <div class="flex items-center justify-between text-sm text-gray-400 dark:text-gray-500">
              <span class="flex items-center"><svg class="w-4 h-4 mr-1 text-lime-500" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z" clip-rule="evenodd"></path></svg> 2077-11-15</span>
              <div class="flex -space-x-2 overflow-hidden">
                <img class="inline-block h-8 w-8 rounded-full ring-2 ring-lime-500" src="https://randomuser.me/api/portraits/women/1.jpg" alt="Ayla_Xenon">
                <img class="inline-block h-8 w-8 rounded-full ring-2 ring-lime-500" src="https://randomuser.me/api/portraits/men/1.jpg" alt="You">
              </div>
            </div>
          </div>
        </div>
      </div>


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

Interactive Components Component

A CRM/Business Tools component with a Memphis design style, featuring a monochromatic color scheme, interactive elements, and dark mode support. Designed for moderate complexity with bold colors, geometric shapes, and playful patterns.

Open Preview

                <div class="min-h-screen bg-gradient-to-br from-purple-100 to-purple-200 dark:from-purple-950 dark:to-purple-800 p-4 sm:p-6 md:p-8 flex items-center justify-center font-sans">
  <div class="relative w-full max-w-5xl bg-white dark:bg-purple-900 rounded-3xl shadow-xl overflow-hidden
    border-4 border-purple-500 dark:border-purple-600
    after:absolute after:inset-0 after:z-0 after:pointer-events-none
    after:bg-gradient-to-tr after:from-purple-300/[0.3] dark:after:from-purple-700/[0.3]
    after:to-yellow-300/[0.1] dark:after:to-teal-700/[0.1]
    after:bg-[length:200%_200%] after:animate-memphis-pattern">

    <!-- Memphis Design elements (absolute positioning for playfulness but behind content) -->
    <div class="absolute top-0 left-0 w-24 h-24 bg-purple-300 dark:bg-purple-700 rounded-br-full -translate-x-8 -translate-y-8 blur-lg opacity-30"></div>
    <div class="absolute bottom-0 right-0 w-32 h-32 bg-yellow-200 dark:bg-amber-600 rounded-tl-full translate-x-8 translate-y-8 blur-lg opacity-30"></div>
    <div class="absolute top-1/4 right-5 w-16 h-16 bg-blue-200 dark:bg-blue-700 rounded-full opacity-20 transform rotate-45"></div>
    <div class="absolute bottom-1/3 left-5 w-20 h-10 bg-pink-200 dark:bg-pink-700 rounded-xl opacity-20 transform -rotate-30"></div>

    <!-- Content Wrapper -->
    <div class="relative z-10 p-6 sm:p-8 md:p-12">
      <div class="flex flex-col md:flex-row gap-8">
        <!-- Left Column: Primary Information & Call to Action -->
        <div class="flex-1 flex flex-col gap-6">
          <h2 class="text-3xl sm:text-4xl md:text-5xl font-extrabold text-purple-800 dark:text-purple-100 leading-tight tracking-tighter">
            Streamline Your <br class="hidden sm:inline"/>Customer Interactions.
          </h2>
          <p class="text-lg text-purple-700 dark:text-purple-200 leading-relaxed">
            Gain clear insights, automate workflows, and build stronger relationships with our intuitive CRM tools.
          </p>

          <div class="flex items-center gap-4 group mt-4">
            <button class="px-6 py-3 bg-purple-600 hover:bg-purple-700 active:scale-95 transition-all duration-200 ease-out
                           text-white font-semibold rounded-lg shadow-lg
                           dark:bg-purple-700 dark:hover:bg-purple-600 dark:text-purple-50
                           group-hover:translate-x-1 group-hover:-translate-y-1 group-hover:shadow-purple-400/[0.5]">
              Get Started Now
            </button>
            <a href="#" class="text-purple-600 hover:text-purple-800 dark:text-purple-300 dark:hover:text-purple-100
                              font-medium flex items-center group-hover:underline transition-colors">
              Learn More
              <svg class="w-5 h-5 ml-1 transition-transform group-hover:translate-x-1" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg>
            </a>
          </div>

          <!-- Featured Customers/Logos -->
          <div class="mt-8">
            <p class="text-sm text-purple-500 dark:text-purple-400 font-medium uppercase tracking-wider mb-3">Trusted by:</p>
            <div class="flex flex-wrap gap-4 items-center">
              <img src="https://picsum.photos/id/237/80/40" alt="Client Logo 1" class="h-6 opacity-70 hover:opacity-100 transition-opacity dark:invert ease-out duration-200">
              <img src="https://picsum.photos/id/238/80/40" alt="Client Logo 2" class="h-7 opacity-70 hover:opacity-100 transition-opacity dark:invert ease-out duration-200">
              <img src="https://picsum.photos/id/239/80/40" alt="Client Logo 3" class="h-6 opacity-70 hover:opacity-100 transition-opacity dark:invert ease-out duration-200">
            </div>
          </div>
        </div>

        <!-- Right Column: Interactive Elements (Tabs/Accordion) -->
        <div class="flex-1 flex flex-col gap-4 bg-purple-50 dark:bg-purple-800 p-5 sm:p-6 rounded-2xl shadow-inner
          border border-dotted border-purple-300 dark:border-purple-700">
          <h3 class="text-xl sm:text-2xl font-bold text-purple-700 dark:text-purple-200 mb-2">Key Features</h3>

          <!-- Feature Item 1 -->
          <div class="group cursor-pointer bg-purple-100 dark:bg-purple-850 p-4 rounded-xl transition-all duration-300 ease-out
                      hover:bg-purple-200 dark:hover:bg-purple-700 hover:shadow-md">
            <div class="flex items-center justify-between">
              <h4 class="text-lg font-semibold text-purple-800 dark:text-purple-100">Unified Dashboard</h4>
              <svg class="w-6 h-6 text-purple-500 dark:text-purple-400 group-hover:text-purple-600 dark:group-hover:text-purple-200 transition-transform group-[.active]:rotate-90" 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 5l7 7-7 7"></path></svg>
            </div>
            <p class="text-purple-600 dark:text-purple-300 text-sm mt-2 opacity-0 max-h-0 overflow-hidden transition-all duration-300 ease-in-out group-[.active]:opacity-100 group-[.active]:max-h-24">
              Get a 360-degree view of your customer interactions, sales pipeline, and marketing efforts in real-time.
            </p>
          </div>

          <!-- Feature Item 2 -->
          <div class="group cursor-pointer bg-purple-100 dark:bg-purple-850 p-4 rounded-xl transition-all duration-300 ease-out
                      hover:bg-purple-200 dark:hover:bg-purple-700 hover:shadow-md">
            <div class="flex items-center justify-between">
              <h4 class="text-lg font-semibold text-purple-800 dark:text-purple-100">Automated Workflows</h4>
              <svg class="w-6 h-6 text-purple-500 dark:text-purple-400 group-hover:text-purple-600 dark:group-hover:text-purple-200 transition-transform group-[.active]:rotate-90" 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 5l7 7-7 7"></path></svg>
            </div>
            <p class="text-purple-600 dark:text-purple-300 text-sm mt-2 opacity-0 max-h-0 overflow-hidden transition-all duration-300 ease-in-out group-[.active]:opacity-100 group-[.active]:max-h-24">
              Set up automated email sequences, task assignments, and lead nurturing processes to save time.
            </p>
          </div>

          <!-- Feature Item 3 -->
          <div class="group cursor-pointer bg-purple-100 dark:bg-purple-850 p-4 rounded-xl transition-all duration-300 ease-out
                      hover:bg-purple-200 dark:hover:bg-purple-700 hover:shadow-md">
            <div class="flex items-center justify-between">
              <h4 class="text-lg font-semibold text-purple-800 dark:text-purple-100">Advanced Analytics</h4>
              <svg class="w-6 h-6 text-purple-500 dark:text-purple-400 group-hover:text-purple-600 dark:group-hover:text-purple-200 transition-transform group-[.active]:rotate-90" 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 5l7 7-7 7"></path></svg>
            </div>
            <p class="text-purple-600 dark:text-purple-300 text-sm mt-2 opacity-0 max-h-0 overflow-hidden transition-all duration-300 ease-in-out group-[.active]:opacity-100 group-[.active]:max-h-24">
              Leverage powerful reporting tools to identify trends, measure campaign effectiveness, and optimize strategies.
            </p>
          </div>

          <!-- Feature Item 4 -->
          <div class="group cursor-pointer bg-purple-100 dark:bg-purple-850 p-4 rounded-xl transition-all duration-300 ease-out
                      hover:bg-purple-200 dark:hover:bg-purple-700 hover:shadow-md">
            <div class="flex items-center justify-between">
              <h4 class="text-lg font-semibold text-purple-800 dark:text-purple-100">Integrated Communication</h4>
              <svg class="w-6 h-6 text-purple-500 dark:text-purple-400 group-hover:text-purple-600 dark:group-hover:text-purple-200 transition-transform group-[.active]:rotate-90" 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 5l7 7-7 7"></path></svg>
            </div>
            <p class="text-purple-600 dark:text-purple-300 text-sm mt-2 opacity-0 max-h-0 overflow-hidden transition-all duration-300 ease-in-out group-[.active]:opacity-100 group-[.active]:max-h-24">
              Communicate seamlessly with customers across multiple channels right from your CRM platform.
            </p>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<!-- To make the accordion-like functionality work without JS, you'd typically need radio buttons/checkboxes or actual JS. -->
<!-- For this example, I'm adding a simple CSS animation with a placeholder '.active' class -->
<!-- Actual implementation requires JavaScript to toggle the 'active' class on click. -->

<style>
/* Animated Memphis Pattern background */
@keyframes memphis-pattern {
  0% { background-position: 0% 0%; }
  50% { background-position: 100% 100%; }
  100% { background-position: 0% 0%; }
}

/* Example of how you'd toggle an active state for accordion-like behavior with JS */
/* This CSS will define the open state, JS adds/removes the 'active' class */
.group.active .max-h-0 {
  max-height: 96px; /* A safe height for the text content */
  opacity: 1;
}
.group.active svg {
    transform: rotate(90deg);
}
</style>

Industrial_3D_Content_Display

A simple, responsive content display component for manufacturing/industrial companies, featuring a subtle 3D design using muted colors and dark mode support.

Open Preview

                <div class="min-h-screen bg-gray-100 dark:bg-gray-900 flex items-center justify-center py-12 px-4 sm:px-6 lg:px-8">
  <div class="max-w-4xl w-full space-y-8 bg-white dark:bg-gray-800 p-8 rounded-lg shadow-xl relative overflow-hidden">
    <!-- Decorative 3D elements (subtle) -->
    <div class="absolute inset-0 pointer-events-none opacity-10 dark:opacity-5">
      <div class="absolute top-0 left-0 w-32 h-32 bg-gradient-to-br from-gray-300 to-gray-400 dark:from-gray-700 dark:to-gray-600 rounded-full mix-blend-multiply filter blur-xl transform -translate-x-1/2 -translate-y-1/2"></div>
      <div class="absolute bottom-0 right-0 w-48 h-48 bg-gradient-to-tl from-gray-200 to-gray-300 dark:from-gray-600 dark:to-gray-700 rounded-full mix-blend-multiply filter blur-xl transform translate-x-1/2 translate-y-1/2"></div>
    </div>

    <div class="relative z-10 text-center">
      <h2 class="text-3xl font-extrabold text-gray-900 dark:text-gray-100 sm:text-4xl">
        Precision Engineering Solutions
      </h2>
      <p class="mt-4 text-lg text-gray-600 dark:text-gray-400">
        Delivering robust and reliable solutions for the modern industrial landscape.
      </p>
    </div>

    <div class="relative z-10 grid grid-cols-1 md:grid-cols-2 gap-8 mt-10">
      <!-- Feature 1 -->
      <div class="bg-gray-50 dark:bg-gray-700 p-6 rounded-lg shadow-md hover:shadow-lg transition-shadow duration-300 transform hover:-translate-y-1 relative group overflow-hidden">
        <div class="absolute inset-0 bg-gradient-to-br from-gray-200 to-gray-300 dark:from-gray-600 dark:to-gray-700 rounded-lg opacity-0 group-hover:opacity-20 transition-opacity duration-300"></div>
        <div class="relative z-10">
          <div class="flex items-center justify-center w-12 h-12 bg-gray-300 dark:bg-gray-600 rounded-full mb-4 mx-auto">
            <svg class="h-6 w-6 text-gray-700 dark:text-gray-200" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1m.364 6.364l-.707-.707M12 20v1m-6.364-1.636l-.707.707M3 12H2m1.636-6.364l.707-.707M19 12a7 7 0 11-14 0 7 7 0 0114 0z"></path>
            </svg>
          </div>
          <h3 class="text-xl font-semibold text-gray-800 dark:text-gray-100 mb-2 text-center">Advanced Robotics</h3>
          <p class="text-gray-600 dark:text-gray-400 text-center">
            Automating manufacturing processes with cutting-edge robotic systems for unmatched efficiency.
          </p>
        </div>
      </div>

      <!-- Feature 2 -->
      <div class="bg-gray-50 dark:bg-gray-700 p-6 rounded-lg shadow-md hover:shadow-lg transition-shadow duration-300 transform hover:-translate-y-1 relative group overflow-hidden">
        <div class="absolute inset-0 bg-gradient-to-br from-gray-200 to-gray-300 dark:from-gray-600 dark:to-gray-700 rounded-lg opacity-0 group-hover:opacity-20 transition-opacity duration-300"></div>
        <div class="relative z-10">
          <div class="flex items-center justify-center w-12 h-12 bg-gray-300 dark:bg-gray-600 rounded-full mb-4 mx-auto">
            <svg class="h-6 w-6 text-gray-700 dark:text-gray-200" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37a1.724 1.724 0 002.572-1.065z" />
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
            </svg>
          </div>
          <h3 class="text-xl font-semibold text-gray-800 dark:text-gray-100 mb-2 text-center">Quality Control</h3>
          <p class="text-gray-600 dark:text-gray-400 text-center">
            Implementing rigorous quality assurance protocols to ensure every product meets global standards.
          </p>
        </div>
      </div>
    </div>

    <div class="relative z-10 pt-8 text-center">
      <a href="#" class="inline-flex items-center px-6 py-3 border border-transparent text-base font-medium rounded-md shadow-sm text-white bg-gray-600 hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500 dark:bg-gray-500 dark:hover:bg-gray-600 dark:focus:ring-gray-400 transition-colors duration-300 transform hover:-translate-y-0.5 hover:scale-105">
        Learn More
        <svg class="ml-3 -mr-1 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="M10.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L12.586 11H5a1 1 0 110-2h7.586l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd" />
        </svg>
      </a>
    </div>
  </div>
</div>

1 ... 35 36 37 38 39 ... 335