Search Components

Carousel Slider

Cycles through multiple images or content pieces

Carousel Slider Component

A responsive carousel slider component with gradient color transitions, designed for fashion and beauty brands. Features dark mode support and a sleek, modern look.

Open Preview

                <section class="relative w-full overflow-hidden py-12 bg-gradient-to-r from-purple-100 to-indigo-100 dark:from-gray-900 dark:to-gray-800">
  <div class="container mx-auto px-4">
    <h2 class="text-center text-4xl sm:text-5xl font-extrabold text-transparent bg-clip-text bg-gradient-to-r from-purple-600 to-indigo-600 dark:from-purple-400 dark:to-indigo-400 mb-12">
      Featured Collections
    </h2>

    <div class="relative">
      <!-- Slider wrapper (emulated for static HTML, ideally managed by JS) -->
      <div class="flex flex-col md:flex-row items-center justify-center space-y-8 md:space-y-0 md:space-x-8 lg:space-x-12 animate-fade-in-up">

        <!-- Card 1 -->
        <div class="relative w-full max-w-sm rounded-3xl overflow-hidden shadow-xl transform transition-all duration-500 hover:scale-[1.03] hover:shadow-2xl
                    bg-gradient-to-br from-purple-500 to-pink-500 dark:from-purple-800 dark:to-pink-800">
          <img class="w-full h-72 object-cover transition-transform duration-500 hover:scale-105" src="https://picsum.photos/id/1015/400/300" alt="Model wearing modern fashion">
          <div class="p-6 text-white text-center">
            <h3 class="text-2xl font-bold mb-2">Urban Chic</h3>
            <p class="text-sm opacity-90 mb-4">Effortless style meets city sophistication. Discover your new favorite looks.</p>
            <a href="#" class="inline-block px-6 py-3 rounded-full text-sm font-semibold
                         bg-white text-pink-600 shadow-md transform transition-all duration-300 hover:scale-105 hover:bg-gray-100
                         dark:bg-indigo-700 dark:text-white dark:hover:bg-indigo-600">
              Shop Now
            </a>
          </div>
        </div>

        <!-- Card 2 -->
        <div class="relative w-full max-w-sm rounded-3xl overflow-hidden shadow-xl transform transition-all duration-500 hover:scale-[1.03] hover:shadow-2xl
                    bg-gradient-to-br from-yellow-400 to-orange-500 dark:from-orange-700 dark:to-red-700">
          <img class="w-full h-72 object-cover transition-transform duration-500 hover:scale-105" src="https://picsum.photos/id/1025/400/300" alt="Beauty product display">
          <div class="p-6 text-white text-center">
            <h3 class="text-2xl font-bold mb-2">Radiant Glow</h3>
            <p class="text-sm opacity-90 mb-4">Illuminate your beauty with our premium skincare essentials.</p>
            <a href="#" class="inline-block px-6 py-3 rounded-full text-sm font-semibold
                         bg-white text-orange-600 shadow-md transform transition-all duration-300 hover:scale-105 hover:bg-gray-100
                         dark:bg-indigo-700 dark:text-white dark:hover:bg-indigo-600">
              Explore More
            </a>
          </div>
        </div>

        <!-- Card 3 -->
        <div class="relative w-full max-w-sm rounded-3xl overflow-hidden shadow-xl transform transition-all duration-500 hover:scale-[1.03] hover:shadow-2xl
                    bg-gradient-to-br from-green-400 to-blue-500 dark:from-teal-700 dark:to-blue-700">
          <img class="w-full h-72 object-cover transition-transform duration-500 hover:scale-105" src="https://picsum.photos/id/1069/400/300" alt="Ethereal fashion shot">
          <div class="p-6 text-white text-center">
            <h3 class="text-2xl font-bold mb-2">Ethereal Dreams</h3>
            <p class="text-sm opacity-90 mb-4">Dive into a world of enchanting designs and luxurious fabrics.</p>
            <a href="#" class="inline-block px-6 py-3 rounded-full text-sm font-semibold
                         bg-white text-blue-600 shadow-md transform transition-all duration-300 hover:scale-105 hover:bg-gray-100
                         dark:bg-indigo-700 dark:text-white dark:hover:bg-indigo-600">
              View Collection
            </a>
          </div>
        </div>

      </div>

      <!-- Navigation arrows (emulated for static HTML, ideally managed by JS) -->
      <button aria-label="Previous slide" class="hidden md:block absolute top-1/2 -left-8 transform -translate-y-1/2 p-3 rounded-full
                              bg-white/70 text-gray-800 shadow-lg transition-all duration-300 hover:bg-white hover:scale-110
                              dark:bg-gray-700/70 dark:text-white dark:hover:bg-gray-700 z-10">
        <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"></path></svg>
      </button>
      <button aria-label="Next slide" class="hidden md:block absolute top-1/2 -right-8 transform -translate-y-1/2 p-3 rounded-full
                             bg-white/70 text-gray-800 shadow-lg transition-all duration-300 hover:bg-white hover:scale-110
                             dark:bg-gray-700/70 dark:text-white dark:hover:bg-gray-700 z-10">
        <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg>
      </button>

    </div>

    <!-- Pagination dots (emulated for static HTML, ideally managed by JS) -->
    <div class="flex justify-center space-x-3 mt-12">
      <span class="block w-3 h-3 rounded-full bg-purple-500 dark:bg-purple-400"></span>
      <span class="block w-3 h-3 rounded-full bg-gray-300 dark:bg-gray-600 hover:bg-gray-400 dark:hover:bg-gray-500 transition-colors duration-200"></span>
      <span class="block w-3 h-3 rounded-full bg-gray-300 dark:bg-gray-600 hover:bg-gray-400 dark:hover:bg-gray-500 transition-colors duration-200"></span>
    </div>

  </div>

  <style>
    /* Basic fade-in-up animation for content inside the 'animate-fade-in-up' class */
    @keyframes fadeInUp {
      from {
        opacity: 0;
        transform: translateY(20px);
      }
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    .animate-fade-in-up {
      animation: fadeInUp 1s ease-out forwards;
    }
  </style>
</section>

Carousel Slider Component

A complex, responsive carousel slider component with a corporate/professional triadic color scheme, designed for weather/climate data showcasing. Includes dark mode support and uses semantic HTML.

Open Preview

                <div class="relative w-full max-w-7xl mx-auto py-8 px-4 sm:px-6 lg:px-8 bg-gray-50 dark:bg-gray-900 overflow-hidden">
  <h2 class="text-3xl font-extrabold text-center text-gray-900 dark:text-white mb-10">Global Climate Insights</h2>

  <div class="relative flex items-center justify-center">
    <button aria-label="Previous slide" class="absolute left-0 z-10 p-3 bg-white dark:bg-gray-800 rounded-full shadow-lg transition-transform transform -translate-x-1/2 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-cyan-500 hover:scale-105 group">
      <svg class="h-6 w-6 text-cyan-600 dark:text-cyan-400 group-hover:text-cyan-700 dark:group-hover:text-cyan-300" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"></path>
      </svg>
    </button>

    <div class="w-full overflow-hidden">
      <div class="flex transition-transform duration-500 ease-in-out" style="transform: translateX(0%);">
        <!-- Slide 1 -->
        <div class="flex-shrink-0 w-full md:w-1/2 lg:w-1/3 p-4">
          <div class="bg-white dark:bg-gray-800 rounded-lg shadow-xl overflow-hidden transform hover:scale-105 transition-transform duration-300 group">
            <div class="relative">
              <img src="https://picsum.photos/id/1025/600/400" alt="Rainfall Pattern" class="w-full h-48 object-cover">
              <div class="absolute inset-0 bg-gradient-to-t from-gray-900 via-transparent to-transparent opacity-60"></div>
              <span class="absolute top-3 right-3 bg-amber-500 text-white text-xs font-semibold px-2.5 py-1 rounded-full">HOT TOPIC</span>
            </div>
            <div class="p-6">
              <h3 class="text-xl font-semibold text-gray-900 dark:text-white mb-2">Global Rainfall Patterns</h3>
              <p class="text-sm text-gray-600 dark:text-gray-300 leading-relaxed mb-4">Analyzes the shifts in precipitation, highlighting regions susceptible to drought and flooding due to climate change.</p>
              <div class="flex items-center text-gray-500 dark:text-gray-400 text-sm mb-4">
                <svg class="w-4 h-4 mr-1 text-teal-600 dark:text-teal-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M10 12a2 2 0 100-4 2 2 0 000 4z"></path><path fill-rule="evenodd" d="M.458 10C1.732 5.943 5.522 3 10 3s8.268 2.943 9.542 7c-1.274 4.057-5.064 7-9.542 7S1.732 14.057.458 10zM14 10a4 4 0 11-8 0 4 4 0 018 0z" clip-rule="evenodd"></path></svg>
                <span>3,200 views</span>
                <span class="mx-2">•</span>
                <svg class="w-4 h-4 mr-1 text-teal-600 dark:text-teal-400" 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>
                <span>March 15, 2023</span>
              </div>
              <div class="flex items-center border-t border-gray-100 dark:border-gray-700 pt-4">
                <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Author" class="w-8 h-8 rounded-full mr-3 border-2 border-cyan-500 dark:border-cyan-400">
                <div>
                  <p class="text-sm font-medium text-gray-900 dark:text-white">Dr. Leo Thompson</p>
                  <p class="text-xs text-gray-500 dark:text-gray-400">Climatologist</p>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- Slide 2 -->
        <div class="flex-shrink-0 w-full md:w-1/2 lg:w-1/3 p-4">
          <div class="bg-white dark:bg-gray-800 rounded-lg shadow-xl overflow-hidden transform hover:scale-105 transition-transform duration-300 group">
            <div class="relative">
              <img src="https://picsum.photos/id/1018/600/400" alt="Temperature Trends" class="w-full h-48 object-cover">
              <div class="absolute inset-0 bg-gradient-to-t from-gray-900 via-transparent to-transparent opacity-60"></div>
              <span class="absolute top-3 right-3 bg-teal-500 text-white text-xs font-semibold px-2.5 py-1 rounded-full">NEW RESEARCH</span>
            </div>
            <div class="p-6">
              <h3 class="text-xl font-semibold text-gray-900 dark:text-white mb-2">Arctic Ice Melt Projections</h3>
              <p class="text-sm text-gray-600 dark:text-gray-300 leading-relaxed mb-4">Examines the rapid melting of polar ice caps and its significant implications for global sea levels and ecosystems.</p>
              <div class="flex items-center text-gray-500 dark:text-gray-400 text-sm mb-4">
                <svg class="w-4 h-4 mr-1 text-cyan-600 dark:text-cyan-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M10 12a2 2 0 100-4 2 2 0 000 4z"></path><path fill-rule="evenodd" d="M.458 10C1.732 5.943 5.522 3 10 3s8.268 2.943 9.542 7c-1.274 4.057-5.064 7-9.542 7S1.732 14.057.458 10zM14 10a4 4 0 11-8 0 4 4 0 018 0z" clip-rule="evenodd"></path></svg>
                <span>5,100 views</span>
                <span class="mx-2">•</span>
                <svg class="w-4 h-4 mr-1 text-cyan-600 dark:text-cyan-400" 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>
                <span>Feb. 28, 2023</span>
              </div>
              <div class="flex items-center border-t border-gray-100 dark:border-gray-700 pt-4">
                <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Author" class="w-8 h-8 rounded-full mr-3 border-2 border-cyan-500 dark:border-cyan-400">
                <div>
                  <p class="text-sm font-medium text-gray-900 dark:text-white">Dr. Sofia Rossi</p>
                  <p class="text-xs text-gray-500 dark:text-gray-400">Oceanographer</p>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- Slide 3 -->
        <div class="flex-shrink-0 w-full md:w-1/2 lg:w-1/3 p-4">
          <div class="bg-white dark:bg-gray-800 rounded-lg shadow-xl overflow-hidden transform hover:scale-105 transition-transform duration-300 group">
            <div class="relative">
              <img src="https://picsum.photos/id/1060/600/400" alt="Extreme Weather Events" class="w-full h-48 object-cover">
              <div class="absolute inset-0 bg-gradient-to-t from-gray-900 via-transparent to-transparent opacity-60"></div>
              <span class="absolute top-3 right-3 bg-cyan-500 text-white text-xs font-semibold px-2.5 py-1 rounded-full">FEATURED</span>
            </div>
            <div class="p-6">
              <h3 class="text-xl font-semibold text-gray-900 dark:text-white mb-2">Frequency of Extreme Weather</h3>
              <p class="text-sm text-gray-600 dark:text-gray-300 leading-relaxed mb-4">Investigates the rising occurrence of severe storms, heatwaves, and wildfires globally, linking them to changing climate.</p>
              <div class="flex items-center text-gray-500 dark:text-gray-400 text-sm mb-4">
                <svg class="w-4 h-4 mr-1 text-amber-600 dark:text-amber-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M10 12a2 2 0 100-4 2 2 0 000 4z"></path><path fill-rule="evenodd" d="M.458 10C1.732 5.943 5.522 3 10 3s8.268 2.943 9.542 7c-1.274 4.057-5.064 7-9.542 7S1.732 14.057.458 10zM14 10a4 4 0 11-8 0 4 4 0 018 0z" clip-rule="evenodd"></path></svg>
                <span>4,500 views</span>
                <span class="mx-2">•</span>
                <svg class="w-4 h-4 mr-1 text-amber-600 dark:text-amber-400" 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>
                <span>Jan. 20, 2023</span>
              </div>
              <div class="flex items-center border-t border-gray-100 dark:border-gray-700 pt-4">
                <img src="https://randomuser.me/api/portraits/women/52.jpg" alt="Author" class="w-8 h-8 rounded-full mr-3 border-2 border-cyan-500 dark:border-cyan-400">
                <div>
                  <p class="text-sm font-medium text-gray-900 dark:text-white">Prof. Clara Davies</p>
                  <p class="text-xs text-gray-500 dark:text-gray-400">Meteorologist</p>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- Slide 4 -->
        <div class="flex-shrink-0 w-full md:w-1/2 lg:w-1/3 p-4">
          <div class="bg-white dark:bg-gray-800 rounded-lg shadow-xl overflow-hidden transform hover:scale-105 transition-transform duration-300 group">
            <div class="relative">
              <img src="https://picsum.photos/id/1029/600/400" alt="Ocean Acidification" class="w-full h-48 object-cover">
              <div class="absolute inset-0 bg-gradient-to-t from-gray-900 via-transparent to-transparent opacity-60"></div>
              <span class="absolute top-3 right-3 bg-amber-500 text-white text-xs font-semibold px-2.5 py-1 rounded-full">URGENT</span>
            </div>
            <div class="p-6">
              <h3 class="text-xl font-semibold text-gray-900 dark:text-white mb-2">Ocean Acidification Impacts</h3>
              <p class="text-sm text-gray-600 dark:text-gray-300 leading-relaxed mb-4">Details the increasing acidity of oceans due to CO2 absorption and its devastating effects on marine life and coral reefs.</p>
              <div class="flex items-center text-gray-500 dark:text-gray-400 text-sm mb-4">
                <svg class="w-4 h-4 mr-1 text-teal-600 dark:text-teal-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M10 12a2 2 0 100-4 2 2 0 000 4z"></path><path fill-rule="evenodd" d="M.458 10C1.732 5.943 5.522 3 10 3s8.268 2.943 9.542 7c-1.274 4.057-5.064 7-9.542 7S1.732 14.057.458 10zM14 10a4 4 0 11-8 0 4 4 0 018 0z" clip-rule="evenodd"></path></svg>
                <span>6,800 views</span>
                <span class="mx-2">•</span>
                <svg class="w-4 h-4 mr-1 text-teal-600 dark:text-teal-400" 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>
                <span>Dec. 5, 2022</span>
              </div>
              <div class="flex items-center border-t border-gray-100 dark:border-gray-700 pt-4">
                <img src="https://randomuser.me/api/portraits/men/21.jpg" alt="Author" class="w-8 h-8 rounded-full mr-3 border-2 border-cyan-500 dark:border-cyan-400">
                <div>
                  <p class="text-sm font-medium text-gray-900 dark:text-white">Dr. James Chen</p>
                  <p class="text-xs text-gray-500 dark:text-gray-400">Marine Biologist</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <button aria-label="Next slide" class="absolute right-0 z-10 p-3 bg-white dark:bg-gray-800 rounded-full shadow-lg transition-transform transform translate-x-1/2 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-cyan-500 hover:scale-105 group">
      <svg class="h-6 w-6 text-cyan-600 dark:text-cyan-400 group-hover:text-cyan-700 dark:group-hover:text-cyan-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 5l7 7-7 7"></path>
      </svg>
    </button>
  </div>

  <div role="tablist" aria-label="Carousel pagination" class="flex justify-center mt-8 space-x-2">
    <button role="tab" aria-selected="true" aria-controls="slide-1" class="w-3 h-3 bg-cyan-600 dark:bg-cyan-400 rounded-full focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-cyan-500"></button>
    <button role="tab" aria-selected="false" aria-controls="slide-2" class="w-3 h-3 bg-gray-300 dark:bg-gray-600 rounded-full focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-cyan-500 hover:bg-gray-400 dark:hover:bg-gray-500"></button>
    <button role="tab" aria-selected="false" aria-controls="slide-3" class="w-3 h-3 bg-gray-300 dark:bg-gray-600 rounded-full focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-cyan-500 hover:bg-gray-400 dark:hover:bg-gray-500"></button>
    <button role="tab" aria-selected="false" aria-controls="slide-4" class="w-3 h-3 bg-gray-300 dark:bg-gray-600 rounded-full focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-cyan-500 hover:bg-gray-400 dark:hover:bg-gray-500"></button>
  </div>
</div>

A simple, responsive carousel slider component with Material Design aesthetics, sepia/brown tones, and dark mode support, suitable for a portfolio. Uses no JavaScript, making it a purely CSS-driven component.

Open Preview

                <div class="relative w-full overflow-hidden bg-orange-50 dark:bg-zinc-800 py-12 sm:py-16 md:py-20 lg:py-24 font-sans">
  <div class="relative container mx-auto px-4 sm:px-6 lg:px-8">
    <!-- Hidden radio inputs for carousel functionality (CSS only) -->
    <input type="radio" name="carousel-material" id="slide-1-material" class="hidden" checked>
    <input type="radio" name="carousel-material" id="slide-2-material" class="hidden">
    <input type="radio" name="carousel-material" id="slide-3-material" class="hidden">

    <div class="carousel-inner relative w-full flex transition-transform duration-500 ease-in-out" style="transform: translateX(calc(var(--carousel-translate-x, 0) * 100%));">
      <!-- Slide 1 -->
      <div class="carousel-item w-full flex-shrink-0">
        <div class="bg-amber-100 dark:bg-zinc-700 rounded-lg shadow-xl p-6 sm:p-8 md:p-10 flex flex-col md:flex-row items-center space-y-6 md:space-y-0 md:space-x-8 lg:space-x-12">
          <div class="flex-shrink-0 w-full md:w-1/2 lg:w-2/5">
            <img src="https://picsum.photos/seed/material1/600/400" alt="Project 1 Image" class="w-full h-auto rounded-lg shadow-md object-cover transform transition-transform duration-300 hover:scale-[1.02]">
          </div>
          <div class="flex-grow text-brown-800 dark:text-zinc-200 text-center md:text-left">
            <h3 class="text-2xl sm:text-3xl lg:text-4xl font-bold mb-3 md:mb-4 text-chocolate-900 dark:text-orange-200">Elegant Web Design</h3>
            <p class="text-md sm:text-lg lg:text-xl leading-relaxed mb-4 md:mb-6">Crafting beautiful and functional websites with a focus on user experience and modern aesthetics. This project showcases a sophisticated approach to digital presence.</p>
            <a href="#" class="inline-block px-5 py-2.5 sm:px-6 sm:py-3 bg-amber-700 hover:bg-amber-800 dark:bg-orange-600 dark:hover:bg-orange-700 text-white rounded-md shadow-md transition duration-300 transform hover:scale-105">
              View Project
            </a>
          </div>
        </div>
      </div>

      <!-- Slide 2 -->
      <div class="carousel-item w-full flex-shrink-0">
        <div class="bg-amber-100 dark:bg-zinc-700 rounded-lg shadow-xl p-6 sm:p-8 md:p-10 flex flex-col md:flex-row items-center space-y-6 md:space-y-0 md:space-x-8 lg:space-x-12">
          <div class="flex-shrink-0 w-full md:w-1/2 lg:w-2/5">
            <img src="https://picsum.photos/seed/material2/600/400" alt="Project 2 Image" class="w-full h-auto rounded-lg shadow-md object-cover transform transition-transform duration-300 hover:scale-[1.02]">
          </div>
          <div class="flex-grow text-brown-800 dark:text-zinc-200 text-center md:text-left">
            <h3 class="text-2xl sm:text-3xl lg:text-4xl font-bold mb-3 md:mb-4 text-chocolate-900 dark:text-orange-200">Mobile App Development</h3>
            <p class="text-md sm:text-lg lg:text-xl leading-relaxed mb-4 md:mb-6">Building intuitive and high-performing mobile applications for iOS and Android, ensuring seamless user interaction and robust functionality.</p>
            <a href="#" class="inline-block px-5 py-2.5 sm:px-6 sm:py-3 bg-amber-700 hover:bg-amber-800 dark:bg-orange-600 dark:hover:bg-orange-700 text-white rounded-md shadow-md transition duration-300 transform hover:scale-105">
              Discover More
            </a>
          </div>
        </div>
      </div>

      <!-- Slide 3 -->
      <div class="carousel-item w-full flex-shrink-0">
        <div class="bg-amber-100 dark:bg-zinc-700 rounded-lg shadow-xl p-6 sm:p-8 md:p-10 flex flex-col md:flex-row items-center space-y-6 md:space-y-0 md:space-x-8 lg:space-x-12">
          <div class="flex-shrink-0 w-full md:w-1/2 lg:w-2/5">
            <img src="https://picsum.photos/seed/material3/600/400" alt="Project 3 Image" class="w-full h-auto rounded-lg shadow-md object-cover transform transition-transform duration-300 hover:scale-[1.02]">
          </div>
          <div class="flex-grow text-brown-800 dark:text-zinc-200 text-center md:text-left">
            <h3 class="text-2xl sm:text-3xl lg:text-4xl font-bold mb-3 md:mb-4 text-chocolate-900 dark:text-orange-200">Brand Identity Creation</h3>
            <p class="text-md sm:text-lg lg:text-xl leading-relaxed mb-4 md:mb-6">Developing strong and recognizable brand identities through comprehensive logo design, brand guidelines, and visual communication strategies.</p>
            <a href="#" class="inline-block px-5 py-2.5 sm:px-6 sm:py-3 bg-amber-700 hover:bg-amber-800 dark:bg-orange-600 dark:hover:bg-orange-700 text-white rounded-md shadow-md transition duration-300 transform hover:scale-105">
              See Case Study
            </a>
          </div>
        </div>
      </div>
    </div>

    <!-- Navigation Dots -->
    <div class="absolute bottom-0 left-0 right-0 p-4 flex justify-center space-x-3 mt-6 sm:mt-8">
      <label for="slide-1-material" class="w-3 h-3 sm:w-4 sm:h-4 bg-amber-400 dark:bg-zinc-500 rounded-full cursor-pointer shadow-md transition-colors duration-300 hover:bg-amber-500 dark:hover:bg-zinc-400"></label>
      <label for="slide-2-material" class="w-3 h-3 sm:w-4 sm:h-4 bg-amber-400 dark:bg-zinc-500 rounded-full cursor-pointer shadow-md transition-colors duration-300 hover:bg-amber-500 dark:hover:bg-zinc-400"></label>
      <label for="slide-3-material" class="w-3 h-3 sm:w-4 sm:h-4 bg-amber-400 dark:bg-zinc-500 rounded-full cursor-pointer shadow-md transition-colors duration-300 hover:bg-amber-500 dark:hover:bg-zinc-400"> </label>
    </div>

    <!-- CSS for Carousel functionality (embed Tailwind custom classes or use external CSS) -->
    <style>
      /* Base styles for the carousel -- if not using a build tool, this would be in a style tag or separate CSS file */
      .carousel-inner {
        display: flex;
      }
      .carousel-item {
        flex-shrink: 0;
        width: 100%;
      }
      
      /* Carousel navigation using hidden radio inputs */
      #slide-1-material:checked ~ .carousel-inner {
        --carousel-translate-x: 0;
      }
      #slide-2-material:checked ~ .carousel-inner {
        --carousel-translate-x: -1;
      }
      #slide-3-material:checked ~ .carousel-inner {
        --carousel-translate-x: -2;
      }

      /* Navigation dot active state */
      #slide-1-material:checked ~ .bottom-0 > label:nth-child(1),
      #slide-2-material:checked ~ .bottom-0 > label:nth-child(2),
      #slide-3-material:checked ~ .bottom-0 > label:nth-child(3) {
        background-color: #92400e; /* amber-800 */
        transform: scale(1.2);
        box-shadow: 0 0px 8px rgba(0,0,0,0.3);
      }
      /* Dark mode active state */
      .dark #slide-1-material:checked ~ .bottom-0 > label:nth-child(1),
      .dark #slide-2-material:checked ~ .bottom-0 > label:nth-child(2),
      .dark #slide-3-material:checked ~ .bottom-0 > label:nth-child(3) {
        background-color: #ea580c; /* orange-600 */
      }
    </style>
  </div>
</div>

Carousel Slider Component

A complex, responsive carousel slider component for news/journalism websites, featuring a dark mode UI with a grayscale color scheme. It displays news articles with images, titles, descriptions, and categories, and is designed to reduce eye strain.

Open Preview

                <div class="relative w-full max-w-7xl mx-auto py-8 px-4 dark:bg-gray-900 bg-white sm:px-6 lg:px-8">
  <!-- Carousel Header -->
  <div class="flex items-center justify-between mb-8">
    <h2 class="text-3xl font-extrabold tracking-tight text-gray-900 dark:text-white sm:text-4xl">
      Latest Headlines
    </h2>
    <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-gray-800 hover:bg-gray-700 dark:bg-gray-100 dark:text-gray-900 dark:hover:bg-gray-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500">
      View All
      <svg class="ml-2 -mr-1 h-5 w-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3" />
      </svg>
    </a>
  </div>

  <!-- Carousel Container (Simplified for static HTML, requires JS for actual carousel functionality) -->
  <!-- In a real scenario, this would be a JS-controlled carousel. For this HTML-only component, we'll show a responsive grid layout that implies a carousel structure. -->
  <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">

    <!-- Carousel Item 1 -->
    <div class="group relative rounded-lg shadow-lg dark:shadow-xl overflow-hidden transform transition-all duration-300 hover:scale-105 dark:bg-gray-800 bg-white border border-gray-200 dark:border-gray-700">
      <div class="aspect-w-16 aspect-h-9 w-full overflow-hidden">
        <img src="https://picsum.photos/600/400?random=1" alt="News Article 1" class="w-full h-full object-cover object-center group-hover:scale-110 transition-transform duration-300">
      </div>
      <div class="p-6">
        <div class="flex items-center mb-2">
          <span class="inline-flex items-center px-3 py-0.5 rounded-full text-sm font-medium bg-gray-100 text-gray-800 dark:bg-gray-700 dark:text-gray-200">
            Technology
          </span>
          <span class="ml-auto text-sm text-gray-500 dark:text-gray-400">2 hours ago</span>
        </div>
        <h3 class="text-xl font-semibold text-gray-900 dark:text-white mt-1 mb-2 leading-tight">
          <a href="#" class="hover:text-gray-700 dark:hover:text-gray-300">
            <span class="absolute inset-0"></span>
            Breakthrough in AI Research Announced
          </a>
        </h3>
        <p class="mt-3 text-base text-gray-600 dark:text-gray-300 line-clamp-3">
          Researchers at the leading global institute have unveiled a groundbreaking development in artificial intelligence, promising to revolutionize several industries.
        </p>
        <div class="mt-6 flex items-center justify-between">
          <div class="flex items-center font-medium text-gray-900 dark:text-white">
            <img class="h-8 w-8 rounded-full bg-gray-50 dark:bg-gray-600 mr-2" src="https://randomuser.me/api/portraits/women/1.jpg" alt="Author Avatar">
            Jane Doe
            <span class="ml-2 text-sm text-gray-500 dark:text-gray-400">Editor</span>
          </div>
          <a href="#" class="text-sm font-medium text-gray-800 dark:text-gray-100 hover:text-gray-600 dark:hover:text-gray-300">
            Read More
          </a>
        </div>
      </div>
    </div>

    <!-- Carousel Item 2 -->
    <div class="group relative rounded-lg shadow-lg dark:shadow-xl overflow-hidden transform transition-all duration-300 hover:scale-105 dark:bg-gray-800 bg-white border border-gray-200 dark:border-gray-700">
      <div class="aspect-w-16 aspect-h-9 w-full overflow-hidden">
        <img src="https://picsum.photos/600/400?random=2" alt="News Article 2" class="w-full h-full object-cover object-center group-hover:scale-110 transition-transform duration-300">
      </div>
      <div class="p-6">
        <div class="flex items-center mb-2">
          <span class="inline-flex items-center px-3 py-0.5 rounded-full text-sm font-medium bg-gray-100 text-gray-800 dark:bg-gray-700 dark:text-gray-200">
            Politics
          </span>
          <span class="ml-auto text-sm text-gray-500 dark:text-gray-400">5 hours ago</span>
        </div>
        <h3 class="text-xl font-semibold text-gray-900 dark:text-white mt-1 mb-2 leading-tight">
          <a href="#" class="hover:text-gray-700 dark:hover:text-gray-300">
            <span class="absolute inset-0"></span>
            Global Leaders Discuss Climate Change at Summit
          </a>
        </h3>
        <p class="mt-3 text-base text-gray-600 dark:text-gray-300 line-clamp-3">
          Heads of state convened today for a critical summit to address the escalating climate crisis and pledge new initiatives.
        </p>
        <div class="mt-6 flex items-center justify-between">
          <div class="flex items-center font-medium text-gray-900 dark:text-white">
            <img class="h-8 w-8 rounded-full bg-gray-50 dark:bg-gray-600 mr-2" src="https://randomuser.me/api/portraits/men/2.jpg" alt="Author Avatar">
            John Smith
            <span class="ml-2 text-sm text-gray-500 dark:text-gray-400">Reporter</span>
          </div>
          <a href="#" class="text-sm font-medium text-gray-800 dark:text-gray-100 hover:text-gray-600 dark:hover:text-gray-300">
            Read More
          </a>
        </div>
      </div>
    </div>

    <!-- Carousel Item 3 -->
    <div class="group relative rounded-lg shadow-lg dark:shadow-xl overflow-hidden transform transition-all duration-300 hover:scale-105 dark:bg-gray-800 bg-white border border-gray-200 dark:border-gray-700">
      <div class="aspect-w-16 aspect-h-9 w-full overflow-hidden">
        <img src="https://picsum.photos/600/400?random=3" alt="News Article 3" class="w-full h-full object-cover object-center group-hover:scale-110 transition-transform duration-300">
      </div>
      <div class="p-6">
        <div class="flex items-center mb-2">
          <span class="inline-flex items-center px-3 py-0.5 rounded-full text-sm font-medium bg-gray-100 text-gray-800 dark:bg-gray-700 dark:text-gray-200">
            Health
          </span>
          <span class="ml-auto text-sm text-gray-500 dark:text-gray-400">1 day ago</span>
        </div>
        <h3 class="text-xl font-semibold text-gray-900 dark:text-white mt-1 mb-2 leading-tight">
          <a href="#" class="hover:text-gray-700 dark:hover:text-gray-300">
            <span class="absolute inset-0"></span>
            New Study Reveals Benefits of Mediterranean Diet
          </a>
        </h3>
        <p class="mt-3 text-base text-gray-600 dark:text-gray-300 line-clamp-3">
          A comprehensive new study has provided compelling evidence regarding the significant health benefits associated with adhering to a Mediterranean diet.
        </p>
        <div class="mt-6 flex items-center justify-between">
          <div class="flex items-center font-medium text-gray-900 dark:text-white">
            <img class="h-8 w-8 rounded-full bg-gray-50 dark:bg-gray-600 mr-2" src="https://randomuser.me/api/portraits/men/3.jpg" alt="Author Avatar">
            David Lee
            <span class="ml-2 text-sm text-gray-500 dark:text-gray-400">Correspondent</span>
          </div>
          <a href="#" class="text-sm font-medium text-gray-800 dark:text-gray-100 hover:text-gray-600 dark:hover:text-gray-300">
            Read More
          </a>
        </div>
      </div>
    </div>

  </div>

  <!-- Pagination/Navigation (Placeholder for a real carousel) -->
  <div class="mt-12 flex justify-center space-x-2">
    <button aria-label="Previous slide" class="p-3 rounded-full bg-gray-200 dark:bg-gray-700 text-gray-800 dark:text-gray-100 hover:bg-gray-300 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500">
      <svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" />
      </svg>
    </button>
    <span class="sr-only">Current slide: 1</span>
    <button aria-label="Slide 1" class="w-3 h-3 rounded-full bg-gray-800 dark:bg-gray-100 ring-2 ring-transparent ring-offset-2 ring-offset-gray-900 focus:outline-none focus:ring-gray-500"></button>
    <button aria-label="Slide 2" class="w-3 h-3 rounded-full bg-gray-400 dark:bg-gray-500 hover:bg-gray-500 dark:hover:bg-gray-400 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500"></button>
    <button aria-label="Slide 3" class="w-3 h-3 rounded-full bg-gray-400 dark:bg-gray-500 hover:bg-gray-500 dark:hover:bg-gray-400 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500"></button>
    <button aria-label="Next slide" class="p-3 rounded-full bg-gray-200 dark:bg-gray-700 text-gray-800 dark:text-gray-100 hover:bg-gray-300 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500">
      <svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
      </svg>
    </button>
  </div>
</div>

Playful Autumn Fashion Carousel

A playful and fun carousel slider component for fashion and beauty brands, featuring cheerful aesthetics, rounded elements, and an autumn color scheme. Supports responsiveness and dark mode.

Open Preview

                <section class="bg-orange-50 dark:bg-gray-900 py-12 sm:py-16 lg:py-20">
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
    <h2 class="text-4xl font-extrabold text-orange-900 dark:text-orange-200 text-center mb-10 sm:mb-12 lg:mb-16 font-serif tracking-tight leading-tight">
      Autumn Trends on Repeat!
    </h2>
    
    <!-- Carousel Container -->
    <div class="relative flex items-center justify-center">
      <!-- Navigation Buttons (hidden, for illustrative purposes of interactivity) -->
      <button aria-label="Previous Slide" class="absolute left-0 top-1/2 -translate-y-1/2 bg-white/70 dark:bg-gray-800/70 p-3 rounded-full shadow-lg z-10 hidden md:block focus:outline-none focus:ring-4 focus:ring-orange-300 dark:focus:ring-orange-600 transition duration-300 transform hover:scale-105">
        <svg class="h-6 w-6 text-orange-700 dark:text-orange-300 transform rotate-180" 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>
      </button>
      <button aria-label="Next Slide" class="absolute right-0 top-1/2 -translate-y-1/2 bg-white/70 dark:bg-gray-800/70 p-3 rounded-full shadow-lg z-10 hidden md:block focus:outline-none focus:ring-4 focus:ring-orange-300 dark:focus:ring-orange-600 transition duration-300 transform hover:scale-105">
        <svg class="h-6 w-6 text-orange-700 dark:text-orange-300" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg>
      </button>

      <!-- Carousel Slides (Illustrative - In a real scenario, this would be JS-driven) -->
      <div class="relative w-full overflow-hidden">
        <div class="flex space-x-6 lg:space-x-8 px-4 sm:px-0 snap-x snap-mandatory overflow-x-auto pb-4 scrollbar-hide">
          <!-- Slide 1 -->
          <div class="flex-none w-full sm:w-1/2 lg:w-1/3 snap-center">
            <div class="bg-white dark:bg-gray-800 rounded-3xl overflow-hidden shadow-xl p-4 sm:p-6 transform transition duration-500 hover:scale-105 hover:shadow-2xl ring-4 ring-orange-200 dark:ring-orange-700/50">
              <img class="w-full h-64 object-cover object-center rounded-2xl mb-4 shadow" src="https://picsum.photos/id/1015/600/400" alt="Cozy Autumn Sweater">
              <div class="p-2">
                <h3 class="text-2xl font-bold text-orange-800 dark:text-orange-100 mb-2 font-serif">Sunset Comfort Sweater</h3>
                <p class="text-sm text-gray-600 dark:text-gray-300 mb-4">Wrap yourself in warmth and style. Perfect for chilly evenings.</p>
                <span class="inline-block bg-orange-100 dark:bg-orange-900 text-orange-700 dark:text-orange-200 text-xs font-semibold px-3 py-1 rounded-full mb-4">New Collection</span>
                <div class="flex justify-between items-center">
                  <span class="text-3xl font-extrabold text-burgundy-700 dark:text-burgundy-200">$79.99</span>
                  <button class="bg-orange-500 hover:bg-orange-600 dark:bg-orange-600 dark:hover:bg-orange-700 text-white font-semibold py-2 px-6 rounded-full shadow-md transition duration-300 transform hover:-translate-y-1 ring-4 ring-transparent hover:ring-orange-300 dark:hover:ring-orange-800">
                    Snag Yours!
                  </button>
                </div>
              </div>
            </div>
          </div>

          <!-- Slide 2 -->
          <div class="flex-none w-full sm:w-1/2 lg:w-1/3 snap-center">
            <div class="bg-white dark:bg-gray-800 rounded-3xl overflow-hidden shadow-xl p-4 sm:p-6 transform transition duration-500 hover:scale-105 hover:shadow-2xl ring-4 ring-orange-200 dark:ring-orange-700/50">
              <img class="w-full h-64 object-cover object-center rounded-2xl mb-4 shadow" src="https://picsum.photos/id/1018/600/400" alt="Autumn Forest Boots">
              <div class="p-2">
                <h3 class="text-2xl font-bold text-orange-800 dark:text-orange-100 mb-2 font-serif">Wanderlust Trail Boots</h3>
                <p class="text-sm text-gray-600 dark:text-gray-300 mb-4">Adventure awaits with these durable and stylish boots.</p>
                <span class="inline-block bg-brown-100 dark:bg-brown-900 text-brown-700 dark:text-brown-200 text-xs font-semibold px-3 py-1 rounded-full mb-4">Best Seller</span>
                <div class="flex justify-between items-center">
                  <span class="text-3xl font-extrabold text-burgundy-700 dark:text-burgundy-200">$120.00</span>
                  <button class="bg-orange-500 hover:bg-orange-600 dark:bg-orange-600 dark:hover:bg-orange-700 text-white font-semibold py-2 px-6 rounded-full shadow-md transition duration-300 transform hover:-translate-y-1 ring-4 ring-transparent hover:ring-orange-300 dark:hover:ring-orange-800">
                    Grab a Pair!
                  </button>
                </div>
              </div>
            </div>
          </div>

          <!-- Slide 3 -->
          <div class="flex-none w-full sm:w-1/2 lg:w-1/3 snap-center">
            <div class="bg-white dark:bg-gray-800 rounded-3xl overflow-hidden shadow-xl p-4 sm:p-6 transform transition duration-500 hover:scale-105 hover:shadow-2xl ring-4 ring-orange-200 dark:ring-orange-700/50">
              <img class="w-full h-64 object-cover object-center rounded-2xl mb-4 shadow" src="https://picsum.photos/id/1020/600/400" alt="Autumn Scarf">
              <div class="p-2">
                <h3 class="text-2xl font-bold text-orange-800 dark:text-orange-100 mb-2 font-serif">Fireside Plaid Scarf</h3>
                <p class="text-sm text-gray-600 dark:text-gray-300 mb-4">A touch of tartan charm for your autumn ensemble.</p>
                <span class="inline-block bg-burgundy-100 dark:bg-burgundy-900 text-burgundy-700 dark:text-burgundy-200 text-xs font-semibold px-3 py-1 rounded-full mb-4">Limited Edition</span>
                <div class="flex justify-between items-center">
                  <span class="text-3xl font-extrabold text-burgundy-700 dark:text-burgundy-200">$45.50</span>
                  <button class="bg-orange-500 hover:bg-orange-600 dark:bg-orange-600 dark:hover:bg-orange-700 text-white font-semibold py-2 px-6 rounded-full shadow-md transition duration-300 transform hover:-translate-y-1 ring-4 ring-transparent hover:ring-orange-300 dark:hover:ring-orange-800">
                    Wrap it Up!
                  </button>
                </div>
              </div>
            </div>
          </div>

          <!-- Slide 4 -->
          <div class="flex-none w-full sm:w-1/2 lg:w-1/3 snap-center">
            <div class="bg-white dark:bg-gray-800 rounded-3xl overflow-hidden shadow-xl p-4 sm:p-6 transform transition duration-500 hover:scale-105 hover:shadow-2xl ring-4 ring-orange-200 dark:ring-orange-700/50">
              <img class="w-full h-64 object-cover object-center rounded-2xl mb-4 shadow" src="https://picsum.photos/id/1025/600/400" alt="Autumn Handbag">
              <div class="p-2">
                <h3 class="text-2xl font-bold text-orange-800 dark:text-orange-100 mb-2 font-serif">Harvest Moon Handbag</h3>
                <p class="text-sm text-gray-600 dark:text-gray-300 mb-4">Carry your essentials in elegant seasonal style.</p>
                <span class="inline-block bg-orange-100 dark:bg-orange-900 text-orange-700 dark:text-orange-200 text-xs font-semibold px-3 py-1 rounded-full mb-4">New Arrival</span>
                <div class="flex justify-between items-center">
                  <span class="text-3xl font-extrabold text-burgundy-700 dark:text-burgundy-200">$95.00</span>
                  <button class="bg-orange-500 hover:bg-orange-600 dark:bg-orange-600 dark:hover:bg-orange-700 text-white font-semibold py-2 px-6 rounded-full shadow-md transition duration-300 transform hover:-translate-y-1 ring-4 ring-transparent hover:ring-orange-300 dark:hover:ring-orange-800">
                    Add to Cart!
                  </button>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- Indicator Dots (Illustrative) -->
      <div class="absolute bottom-0 translate-y-full flex space-x-2 pt-4 sm:pt-6">
        <span class="block w-3 h-3 rounded-full bg-orange-400 dark:bg-orange-500 opacity-75"></span>
        <span class="block w-3 h-3 rounded-full bg-orange-300 dark:bg-orange-600 opacity-50"></span>
        <span class="block w-3 h-3 rounded-full bg-orange-300 dark:bg-orange-600 opacity-50"></span>
        <span class="block w-3 h-3 rounded-full bg-orange-300 dark:bg-orange-600 opacity-50"></span>
      </div>
    </div>
  </div>
</section>

<style>
  /* Hide scrollbar for Chrome, Safari and Opera */
  .scrollbar-hide::-webkit-scrollbar {
    display: none;
  }

  /* Hide scrollbar for IE, Edge and Firefox */
  .scrollbar-hide {
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
  }
</style>

Skeuomorphic_Dating_Carousel

A simple, responsive carousel slider component with skeuomorphic design elements and an analogous color scheme, suitable for dating or social platforms. Includes dark mode support.

Open Preview

                <div class="flex items-center justify-center min-h-screen bg-gradient-to-br from-purple-300 via-pink-300 to-red-300 dark:from-purple-900 dark:via-pink-900 dark:to-red-900 p-4 font-sans">
  <div class="relative w-full max-w-sm sm:max-w-md md:max-w-lg lg:max-w-xl xl:max-w-2xl bg-gradient-to-br from-white to-gray-100 dark:from-gray-800 dark:to-gray-900 rounded-3xl shadow-xl border-4 border-gray-200 dark:border-gray-700 overflow-hidden" style="box-shadow: inset 0px 4px 8px rgba(0,0,0,0.1), inset 0px -4px 8px rgba(255,255,255,0.7), 0px 10px 20px rgba(0,0,0,0.2);">
    <div class="p-6 sm:p-8 md:p-10">
      <h2 class="text-3xl sm:text-4xl font-extrabold text-gray-800 dark:text-gray-100 mb-6 text-center tracking-tight" style="text-shadow: 1px 1px 2px rgba(255,255,255,0.6), -1px -1px 2px rgba(0,0,0,0.2);">
        Find Your Match
      </h2>

      <!-- Carousel Item (static for this HTML-only example, would be dynamic with JS) -->
      <div class="flex flex-col items-center text-center">
        <div class="relative w-48 h-48 sm:w-64 sm:h-64 md:w-72 md:h-72 rounded-full overflow-hidden mb-6 filter drop-shadow-lg" style="box-shadow: inset 0px 2px 4px rgba(0,0,0,0.1), inset 0px -2px 4px rgba(255,255,255,0.7), 0px 6px 12px rgba(0,0,0,0.2);">
          <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Profile Picture" class="w-full h-full object-cover border-4 border-white dark:border-gray-800 rounded-full grayscale hover:grayscale-0 transition-all duration-300 ease-in-out">
          <div class="absolute inset-0 rounded-full border-4 border-purple-400 dark:border-purple-600 animate-pulse" style="filter: blur(2px);"></div>
        </div>
        <h3 class="text-2xl sm:text-3xl font-bold text-gray-900 dark:text-gray-50 mb-2" style="text-shadow: 1px 1px 2px rgba(255,255,255,0.4), -1px -1px 2px rgba(0,0,0,0.1);">
          Jessica, 28
        </h3>
        <p class="text-base sm:text-lg text-gray-700 dark:text-gray-300 mb-4 px-4">
          Passionate traveler, dog lover, and always up for an adventure! Looking for someone to share laughs with.
        </p>
      </div>

      <!-- Navigation Buttons (skeuomorphic design) -->
      <div class="flex justify-between items-center mt-8 px-4" role="group" aria-label="Carousel Navigation">
        <button class="relative p-3 rounded-full bg-gradient-to-br from-gray-200 to-gray-300 dark:from-gray-700 dark:to-gray-800 text-gray-700 dark:text-gray-200 shadow-lg transform active:scale-95 transition-all duration-150 ease-in-out focus:outline-none focus:ring-4 focus:ring-purple-300 dark:focus:ring-purple-700" style="box-shadow: inset 0px 2px 4px rgba(255,255,255,0.7), inset 0px -2px 4px rgba(0,0,0,0.15), 0px 4px 8px rgba(0,0,0,0.15);">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-7 w-7 sm:h-8 sm:w-8" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
            <path stroke-linecap="round" stroke-linejoin="round" d="M15 19l-7-7 7-7" />
          </svg>
          <span class="sr-only">Previous Profile</span>
        </button>

        <button class="relative p-3 rounded-full bg-gradient-to-br from-green-300 to-green-500 dark:from-green-600 dark:to-green-800 text-white shadow-lg transform active:scale-95 transition-all duration-150 ease-in-out focus:outline-none focus:ring-4 focus:ring-green-300 dark:focus:ring-green-700" style="box-shadow: inset 0px 2px 4px rgba(255,255,255,0.7), inset 0px -2px 4px rgba(0,0,0,0.15), 0px 4px 8px rgba(0,0,0,0.15);">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 sm:h-9 sm:w-9" viewBox="0 0 20 20" fill="currentColor">
            <path d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-11a1 1 0 10-2 0v2H7a1 1 0 100 2h2v2a1 1 0 102 0v-2h2a1 1 0 100-2h-2V7z" />
          </svg>
          <span class="sr-only">Add to Favorites</span>
        </button>

        <button class="relative p-3 rounded-full bg-gradient-to-br from-gray-200 to-gray-300 dark:from-gray-700 dark:to-gray-800 text-gray-700 dark:text-gray-200 shadow-lg transform active:scale-95 transition-all duration-150 ease-in-out focus:outline-none focus:ring-4 focus:ring-red-300 dark:focus:ring-red-700" style="box-shadow: inset 0px 2px 4px rgba(255,255,255,0.7), inset 0px -2px 4px rgba(0,0,0,0.15), 0px 4px 8px rgba(0,0,0,0.15);">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-7 w-7 sm:h-8 sm:w-8" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
            <path stroke-linecap="round" stroke-linejoin="round" d="M9 5l7 7-7 7" />
          </svg>
          <span class="sr-only">Next Profile</span>
        </button>
      </div>

      <!-- Indicators (Skeuomorphic dots) -->
      <div class="flex justify-center space-x-2 mt-8">
        <div class="w-3 h-3 rounded-full bg-purple-500 dark:bg-purple-700 shadow-md" style="box-shadow: inset 0px 1px 2px rgba(0,0,0,0.1), inset 0px -1px 2px rgba(255,255,255,0.4);"></div>
        <div class="w-3 h-3 rounded-full bg-gray-300 dark:bg-gray-600 shadow-md" style="box-shadow: inset 0px 1px 2px rgba(0,0,0,0.1), inset 0px -1px 2px rgba(255,255,255,0.4);"></div>
        <div class="w-3 h-3 rounded-full bg-gray-300 dark:bg-gray-600 shadow-md" style="box-shadow: inset 0px 1px 2px rgba(0,0,0,0.1), inset 0px -1px 2px rgba(255,255,255,0.4);"></div>
      </div>
    </div>
  </div>
</div>

Brutalism_News_Carousel

A simple, brutalist-style carousel slider component for news and journalism websites, featuring high contrast, cool neutrals, and full responsiveness with dark mode support. Uses placeholder images and emphasizes raw visual elements.

Open Preview

                <div class="w-full mx-auto p-4 md:p-8 bg-neutral-100 dark:bg-neutral-900 font-mono text-neutral-900 dark:text-neutral-100 border-t-4 border-b-4 border-neutral-900 dark:border-neutral-100">
  <div class="max-w-7xl mx-auto overflow-hidden relative">
    <!-- Hidden but accessible labels for screen readers -->
    <h2 class="sr-only">News Carousel</h2>

    <!-- Carousel Wrapper (using scroll-snap for simplicity, can be replaced with JS for full carousel functionality) -->
    <div class="flex w-full snap-x snap-mandatory overflow-x-scroll scrollbar-hide space-x-4 md:space-x-8 lg:space-x-12 pb-4">

      <!-- Slide 1 -->
      <div class="flex-none w-full md:w-1/2 lg:w-1/3 snap-center border-4 border-neutral-900 dark:border-neutral-100 p-4 md:p-6 bg-neutral-200 dark:bg-neutral-800">
        <img src="https://picsum.photos/600/400?random=1" alt="Image for news article 1" class="w-full h-48 md:h-64 object-cover object-center border-2 border-neutral-900 dark:border-neutral-100 mb-4">
        <a href="#" class="block text-xl md:text-2xl lg:text-3xl font-bold uppercase leading-tight tracking-tighter hover:underline text-neutral-900 dark:text-neutral-100 mb-2">
          Breaking News: Headline One Exposes New Details
        </a>
        <p class="text-sm md:text-base leading-snug mb-4 text-neutral-700 dark:text-neutral-300">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam...
        </p>
        <span class="block text-xs md:text-sm font-semibold uppercase text-neutral-600 dark:text-neutral-400">Category 1 // October 26, 2023</span>
      </div>

      <!-- Slide 2 -->
      <div class="flex-none w-full md:w-1/2 lg:w-1/3 snap-center border-4 border-neutral-900 dark:border-neutral-100 p-4 md:p-6 bg-neutral-200 dark:bg-neutral-800">
        <img src="https://picsum.photos/600/400?random=2" alt="Image for news article 2" class="w-full h-48 md:h-64 object-cover object-center border-2 border-neutral-900 dark:border-neutral-100 mb-4">
        <a href="#" class="block text-xl md:text-2xl lg:text-3xl font-bold uppercase leading-tight tracking-tighter hover:underline text-neutral-900 dark:text-neutral-100 mb-2">
          In-Depth Report: The Impact of Global Warming Escalates
        </a>
        <p class="text-sm md:text-base leading-snug mb-4 text-neutral-700 dark:text-neutral-300">
          Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident...
        </p>
        <span class="block text-xs md:text-sm font-semibold uppercase text-neutral-600 dark:text-neutral-400">Environment // October 25, 2023</span>
      </div>

      <!-- Slide 3 -->
      <div class="flex-none w-full md:w-1/2 lg:w-1/3 snap-center border-4 border-neutral-900 dark:border-neutral-100 p-4 md:p-6 bg-neutral-200 dark:bg-neutral-800">
        <img src="https://picsum.photos/600/400?random=3" alt="Image for news article 3" class="w-full h-48 md:h-64 object-cover object-center border-2 border-neutral-900 dark:border-neutral-100 mb-4">
        <a href="#" class="block text-xl md:text-2xl lg:text-3xl font-bold uppercase leading-tight tracking-tighter hover:underline text-neutral-900 dark:text-neutral-100 mb-2">
          Local Story: Community Rallies Despite New Challenges
        </a>
        <p class="text-sm md:text-base leading-snug mb-4 text-neutral-700 dark:text-neutral-300">
          Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt...
        </p>
        <span class="block text-xs md:text-sm font-semibold uppercase text-neutral-600 dark:text-neutral-400">Community // October 24, 2023</span>
      </div>

      <!-- Slide 4 -->
      <div class="flex-none w-full md:w-1/2 lg:w-1/3 snap-center border-4 border-neutral-900 dark:border-neutral-100 p-4 md:p-6 bg-neutral-200 dark:bg-neutral-800">
        <img src="https://picsum.photos/600/400?random=4" alt="Image for news article 4" class="w-full h-48 md:h-64 object-cover object-center border-2 border-neutral-900 dark:border-neutral-100 mb-4">
        <a href="#" class="block text-xl md:text-2xl lg:text-3xl font-bold uppercase leading-tight tracking-tighter hover:underline text-neutral-900 dark:text-neutral-100 mb-2">
          Opinion: Rethinking Modern Economics for Sustainable Growth
        </a>
        <p class="text-sm md:text-base leading-snug mb-4 text-neutral-700 dark:text-neutral-300">
          At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias...
        </p>
        <span class="block text-xs md:text-sm font-semibold uppercase text-neutral-600 dark:text-neutral-400">Opinion // October 23, 2023</span>
      </div>

    </div>
  </div>

  <!-- Simple Scroll Indicator / Navigation - can be replaced with JS for full carousel controls -->
  <div class="flex justify-center mt-6 space-x-2">
    <span class="block w-4 h-4 md:w-5 md:h-5 bg-neutral-900 dark:bg-neutral-100 border-2 border-neutral-900 dark:border-neutral-100"></span>
    <span class="block w-4 h-4 md:w-5 md:h-5 border-2 border-neutral-900 dark:border-neutral-100"></span>
    <span class="block w-4 h-4 md:w-5 md:h-5 border-2 border-neutral-900 dark:border-neutral-100"></span>
  </div>

  <!-- Custom Scrollbar Hide - add this to your CSS or a style tag if not using a utility class -->
  <style>
  .scrollbar-hide::-webkit-scrollbar {
    display: none;
  }
  .scrollbar-hide {
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
  }
  </style>
</div>

Carousel Slider Component

A complex, responsive carousel slider component with candy/sweet color scheme, microinteractions, and dark mode support, suitable for event and conference websites.

Open Preview

                <div class="relative w-full overflow-hidden bg-pink-100 dark:bg-gray-900 group">
  <!-- Carousel Wrapper - This will ideally be controlled by JS for actual sliding, but for pure HTML, we show multiple states -->
  <div class="flex transition-transform duration-700 ease-in-out" style="transform: translateX(0%);">

    <!-- Slide 1 -->
    <div class="flex-none w-full p-8 md:p-12 lg:p-16 flex flex-col md:flex-row items-center justify-center gap-8 md:gap-12 lg:gap-16">
      <div class="w-full md:w-1/2 lg:w-2/5">
        <img src="https://picsum.photos/600/400?random=1" alt="Event Highlight" class="rounded-2xl shadow-lg ring-4 ring-pink-300 dark:ring-pink-700 group-hover:ring-pink-400 dark:group-hover:ring-pink-600 transition-all duration-300 transform group-hover:scale-105">
      </div>
      <div class="w-full md:w-1/2 lg:w-3/5 text-center md:text-left">
        <h2 class="text-3xl sm:text-4xl lg:text-5xl font-extrabold text-pink-600 dark:text-pink-400 mb-4 lg:mb-6 leading-tight group-hover:text-pink-700 dark:group-hover:text-pink-300 transition-colors duration-300">
          Sweet Dreams Conference 2024
        </h2>
        <p class="text-lg sm:text-xl text-gray-700 dark:text-gray-300 mb-6 lg:mb-8">
          Dive into the world of confectionery arts and business. Join us for inspiring talks, workshops, and networking opportunities.
        </p>
        <div class="flex flex-wrap gap-4 justify-center md:justify-start">
          <a href="#" class="bg-pink-500 hover:bg-pink-600 active:bg-pink-700 dark:bg-pink-600 dark:hover:bg-pink-700 dark:active:bg-pink-800 text-white font-bold py-3 px-6 rounded-full shadow-lg transform transition-all duration-300 hover:-translate-y-1 hover:scale-105 focus:outline-none focus:ring-4 focus:ring-pink-300 dark:focus:ring-pink-800">
            Register Now
          </a>
          <a href="#" class="bg-mint-400 hover:bg-mint-500 active:bg-mint-600 dark:bg-mint-500 dark:hover:bg-mint-600 dark:active:bg-mint-700 text-gray-800 dark:text-gray-200 font-bold py-3 px-6 rounded-full shadow-lg transform transition-all duration-300 hover:-translate-y-1 hover:scale-105 focus:outline-none focus:ring-4 focus:ring-mint-300 dark:focus:ring-mint-800">
            Learn More
          </a>
        </div>
        <div class="mt-8 flex flex-wrap justify-center md:justify-start -space-x-2 overflow-hidden">
          <img class="inline-block h-10 w-10 rounded-full ring-2 ring-white dark:ring-gray-900 transform transition-transform duration-200 hover:scale-125" src="https://randomuser.me/api/portraits/women/44.jpg" alt="Attendee 1">
          <img class="inline-block h-10 w-10 rounded-full ring-2 ring-white dark:ring-gray-900 transform transition-transform duration-200 hover:scale-125" src="https://randomuser.me/api/portraits/men/32.jpg" alt="Attendee 2">
          <img class="inline-block h-10 w-10 rounded-full ring-2 ring-white dark:ring-gray-900 transform transition-transform duration-200 hover:scale-125" src="https://randomuser.me/api/portraits/women/12.jpg" alt="Attendee 3">
          <span class="flex h-10 w-10 rounded-full bg-pink-300 dark:bg-pink-700 items-center justify-center text-sm font-medium text-pink-700 dark:text-pink-300 ring-2 ring-white dark:ring-gray-900 transform transition-transform duration-200 hover:scale-125">+99</span>
        </div>
      </div>
    </div>

    <!-- Slide 2 -->
    <div class="flex-none w-full p-8 md:p-12 lg:p-16 flex flex-col md:flex-row items-center justify-center gap-8 md:gap-12 lg:gap-16">
      <div class="w-full md:w-1/2 lg:w-2/5 order-2 md:order-1">
        <img src="https://picsum.photos/600/400?random=2" alt="Speaker Panel" class="rounded-2xl shadow-lg ring-4 ring-mint-300 dark:ring-mint-700 group-hover:ring-mint-400 dark:group-hover:ring-mint-600 transition-all duration-300 transform group-hover:scale-105">
      </div>
      <div class="w-full md:w-1/2 lg:w-3/5 text-center md:text-left order-1 md:order-2">
        <h2 class="text-3xl sm:text-4xl lg:text-5xl font-extrabold text-mint-600 dark:text-mint-400 mb-4 lg:mb-6 leading-tight group-hover:text-mint-700 dark:group-hover:text-mint-300 transition-colors duration-300">
          Meet Our Star Speakers
        </h2>
        <p class="text-lg sm:text-xl text-gray-700 dark:text-gray-300 mb-6 lg:mb-8">
          Learn from the industry's best! Our lineup features world-renowned chocolatiers and confectionary entrepreneurs.
        </p>
        <ul class="list-none p-0 space-y-3 mb-6 lg:mb-8 text-gray-700 dark:text-gray-300">
          <li class="flex items-center group-hover:translate-x-1 transition-transform duration-200">
            <svg class="w-6 h-6 text-mint-500 dark:text-mint-400 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
            Chef Isabella "Sugar Plum" Rossi
          </li>
          <li class="flex items-center group-hover:translate-x-1 transition-transform duration-200">
            <svg class="w-6 h-6 text-mint-500 dark:text-mint-400 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
            Dr. Alan "Cocoa" Bean
          </li>
          <li class="flex items-center group-hover:translate-x-1 transition-transform duration-200">
            <svg class="w-6 h-6 text-mint-500 dark:text-mint-400 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
            Ms. Candice "Candy" Cane, CEO
          </li>
        </ul>
        <a href="#" class="bg-mint-500 hover:bg-mint-600 active:bg-mint-700 dark:bg-mint-600 dark:hover:bg-mint-700 dark:active:bg-mint-800 text-white font-bold py-3 px-6 rounded-full shadow-lg transform transition-all duration-300 hover:-translate-y-1 hover:scale-105 focus:outline-none focus:ring-4 focus:ring-mint-300 dark:focus:ring-mint-800">
          View All Speakers
        </a>
      </div>
    </div>

  </div>

  <!-- Navigation Dots (Pure HTML, so they just stand for visual indication) -->
  <div class="absolute bottom-8 left-1/2 transform -translate-x-1/2 flex space-x-3">
    <span class="block w-3 h-3 rounded-full bg-pink-500 dark:bg-pink-400 ring-2 ring-pink-700 dark:ring-pink-200 transform transition-all duration-300 group-hover:scale-125"></span>
    <span class="block w-3 h-3 rounded-full bg-gray-300 dark:bg-gray-600 ring-2 ring-gray-400 dark:ring-gray-500 transform transition-all duration-300 group-hover:scale-125"></span>
    <span class="block w-3 h-3 rounded-full bg-gray-300 dark:bg-gray-600 ring-2 ring-gray-400 dark:ring-gray-500 transform transition-all duration-300 group-hover:scale-125 hidden sm:block"></span>
  </div>

  <!-- Navigation Arrows (Pure HTML, so they just stand for visual indication) -->
  <button class="absolute top-1/2 left-4 md:left-8 -translate-y-1/2 bg-white/70 dark:bg-gray-800/70 p-3 rounded-full shadow-lg ring-2 ring-pink-300 dark:ring-pink-700 
                 text-pink-600 dark:text-pink-400 hover:bg-white dark:hover:bg-gray-700 transform transition-all duration-300 hover:scale-110 focus:outline-none focus:ring-4 focus:ring-pink-200 dark:focus:ring-pink-800">
    <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"></path></svg>
  </button>
  <button class="absolute top-1/2 right-4 md:right-8 -translate-y-1/2 bg-white/70 dark:bg-gray-800/70 p-3 rounded-full shadow-lg ring-2 ring-pink-300 dark:ring-pink-700 
                 text-pink-600 dark:text-pink-400 hover:bg-white dark:hover:bg-gray-700 transform transition-all duration-300 hover:scale-110 focus:outline-none focus:ring-4 focus:ring-pink-200 dark:focus:ring-pink-800">
    <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg>
  </button>

</div>


<style>
  /* This is just to illustrate the effect for a single-page HTML. */
  /* In a real scenario, the 'transform: translateX' on .flex would be controlled by JavaScript. */
  /* If you want to show a specific slide, you'd apply a style like transform: translateX(-100%) for the second slide */
  /* Or, you can just duplicate the carousel wrapper and show one slide at a time for static display */
  /* For this specific requirement, I am demonstrating two possible slide contents within the single carousel wrapper div, */
  /* implying that JS would handle the `translateX` for actual sliding. */
  /* The 'group' utility on the parent div is used for hover effects that propagate to children. */

  :root {
    --color-mint-400: #99F6E4; /* Tailwind mint-400 */
    --color-mint-500: #4FC0B2; 
    --color-mint-600: #2BB6AB;
    --color-mint-700: #1B8C86; /* Tailwind mint-700 */
  }

  .bg-mint-400 { background-color: var(--color-mint-400); }
  .hover\:bg-mint-500:hover { background-color: var(--color-mint-500); }
  .active\:bg-mint-600:active { background-color: var(--color-mint-600); }
  .dark\:bg-mint-500 { background-color: var(--color-mint-500); }
  .dark\:hover\:bg-mint-600:hover { background-color: var(--color-mint-600); }
  .dark\:active\:bg-mint-700:active { background-color: var(--color-mint-700); }

  .focus\:ring-mint-300:focus { box-shadow: 0 0 0 4px var(--color-mint-400) !important; }
  .dark\:focus\:ring-mint-800:focus { box-shadow: 0 0 0 4px var(--color-mint-700) !important; }

  .text-mint-600 { color: var(--color-mint-600); }
  .dark\:text-mint-400 { color: var(--color-mint-400); }
  .group-hover\:text-mint-700:hover { color: var(--color-mint-700); }
  .dark\:group-hover\:text-mint-300:hover { color: var(--color-mint-400); }

  .ring-mint-300 { border-color: var(--color-mint-400); }
  .dark\:ring-mint-700 { border-color: var(--color-mint-700); }
  .group-hover\:ring-mint-400:hover { border-color: var(--color-mint-500); }
  .dark\:group-hover\:ring-mint-600:hover { border-color: var(--color-mint-600); }
  .text-mint-500 { color: var(--color-mint-500); }
  .dark\:text-mint-400 { color: var(--color-mint-400); }

</style>

Retro_Vintage_Sunset_Carousel_Slider_Component

A complex, responsive carousel slider component with a retro/vintage aesthetic, warm sunset color scheme, designed for dashboard use cases. Includes navigation arrows, dots, and dark mode support.

Open Preview

                <div class="relative w-full max-w-7xl mx-auto py-8 px-4 font-mono dark:bg-gray-900 bg-gradient-to-br from-yellow-100 via-orange-200 to-red-100 rounded-lg shadow-xl dark:shadow-2xl dark:shadow-orange-900 overflow-hidden">
  <h2 class="text-4xl md:text-5xl lg:text-6xl font-extrabold text-center mb-10 tracking-wider uppercase text-red-800 dark:text-orange-300 drop-shadow-lg leading-tight">
    <span class="block">Data Flux</span>
    <span class="block text-2xl md:text-3xl text-orange-600 dark:text-yellow-500 normal-case">Analysis Center</span>
  </h2>

  <div class="relative w-full overflow-hidden group">
    <!-- Carousel Wrapper -->
    <div class="flex transition-transform duration-700 ease-in-out" style="transform: translateX(0%);">
      <!-- Slide 1 -->
      <div class="w-full flex-shrink-0 p-4 md:p-8 lg:p-12 bg-yellow-50 dark:bg-gray-800 rounded-xl shadow-inner dark:shadow-orange-900/50 border-4 border-dashed border-red-300 dark:border-orange-700/70">
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
          <div class="bg-white dark:bg-gray-700 p-6 rounded-lg shadow-md border border-orange-200 dark:border-gray-600 transform hover:scale-105 transition-transform duration-300">
            <img src="https://picsum.photos/400/250?random=1" alt="Chart 1" class="w-full h-40 object-cover rounded mb-4 border-2 border-orange-300 dark:border-orange-600">
            <h3 class="text-2xl font-bold text-orange-700 dark:text-orange-300 mb-2">Sales Overview</h3>
            <p class="text-gray-700 dark:text-gray-300 text-sm">Quarterly sales performance with year-over-year comparison. Up 12% from last quarter.</p>
            <span class="inline-block bg-teal-400 dark:bg-teal-700 text-white text-xs px-3 py-1 rounded-full mt-3 font-semibold">+12% Growth</span>
          </div>
          <div class="bg-white dark:bg-gray-700 p-6 rounded-lg shadow-md border border-orange-200 dark:border-gray-600 transform hover:scale-105 transition-transform duration-300">
            <img src="https://picsum.photos/400/250?random=2" alt="Chart 2" class="w-full h-40 object-cover rounded mb-4 border-2 border-orange-300 dark:border-orange-600">
            <h3 class="text-2xl font-bold text-orange-700 dark:text-orange-300 mb-2">User Activity</h3>
            <p class="text-gray-700 dark:text-gray-300 text-sm">Daily unique visitors and engagement rates. Hovered around 1.5M average.</p>
            <span class="inline-block bg-blue-400 dark:bg-blue-700 text-white text-xs px-3 py-1 rounded-full mt-3 font-semibold">1.5M Users</span>
          </div>
          <div class="bg-white dark:bg-gray-700 p-6 rounded-lg shadow-md border border-orange-200 dark:border-gray-600 transform hover:scale-105 transition-transform duration-300">
            <img src="https://picsum.photos/400/250?random=3" alt="Chart 3" class="w-full h-40 object-cover rounded mb-4 border-2 border-orange-300 dark:border-orange-600">
            <h3 class="text-2xl font-bold text-orange-700 dark:text-orange-300 mb-2">Inventory Status</h3>
            <p class="text-gray-700 dark:text-gray-300 text-sm">Current stock levels and reorder points for key products. Stock levels critical for item C.</p>
            <span class="inline-block bg-red-400 dark:bg-red-700 text-white text-xs px-3 py-1 rounded-full mt-3 font-semibold">Critical Stock</span>
          </div>
        </div>
      </div>

      <!-- Slide 2 -->
      <div class="w-full flex-shrink-0 p-4 md:p-8 lg:p-12 bg-yellow-50 dark:bg-gray-800 rounded-xl shadow-inner dark:shadow-orange-900/50 border-4 border-dashed border-red-300 dark:border-orange-700/70">
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
          <div class="bg-white dark:bg-gray-700 p-6 rounded-lg shadow-md border border-orange-200 dark:border-gray-600 transform hover:scale-105 transition-transform duration-300">
            <img src="https://picsum.photos/400/250?random=4" alt="Chart 4" class="w-full h-40 object-cover rounded mb-4 border-2 border-orange-300 dark:border-orange-600">
            <h3 class="text-2xl font-bold text-orange-700 dark:text-orange-300 mb-2">Customer Feedback</h3>
            <p class="text-gray-700 dark:text-gray-300 text-sm">Sentiment analysis from recent surveys. Overall positive, minor issues reported.</p>
            <span class="inline-block bg-green-400 dark:bg-green-700 text-white text-xs px-3 py-1 rounded-full mt-3 font-semibold">92% Positive</span>
          </div>
          <div class="bg-white dark:bg-gray-700 p-6 rounded-lg shadow-md border border-orange-200 dark:border-gray-600 transform hover:scale-105 transition-transform duration-300">
            <img src="https://picsum.photos/400/250?random=5" alt="Chart 5" class="w-full h-40 object-cover rounded mb-4 border-2 border-orange-300 dark:border-orange-600">
            <h3 class="text-2xl font-bold text-orange-700 dark:text-orange-300 mb-2">Website Traffic</h3>
            <p class="text-gray-700 dark:text-gray-300 text-sm">Geographic distribution of website visitors. Peak traffic from North America.</p>
            <span class="inline-block bg-purple-400 dark:bg-purple-700 text-white text-xs px-3 py-1 rounded-full mt-3 font-semibold">Global Reach</span>
          </div>
          <div class="bg-white dark:bg-gray-700 p-6 rounded-lg shadow-md border border-orange-200 dark:border-gray-600 transform hover:scale-105 transition-transform duration-300">
            <img src="https://picsum.photos/400/250?random=6" alt="Chart 6" class="w-full h-40 object-cover rounded mb-4 border-2 border-orange-300 dark:border-orange-600">
            <h3 class="text-2xl font-bold text-orange-700 dark:text-orange-300 mb-2">Team Performance</h3>
            <p class="text-gray-700 dark:text-gray-300 text-sm">Average task completion time per team. Team Alpha leading with efficiency.</p>
            <span class="inline-block bg-indigo-400 dark:bg-indigo-700 text-white text-xs px-3 py-1 rounded-full mt-3 font-semibold">Team Alpha</span>
          </div>
        </div>
      </div>
    </div>

    <!-- Navigation Buttons - Hidden by default, shown on hover/focus -->
    <button aria-label="Previous slide" class="absolute top-1/2 left-4 transform -translate-y-1/2 bg-gradient-to-r from-red-600 to-orange-500 dark:from-orange-700 dark:to-orange-500 text-white p-3 rounded-full shadow-lg opacity-80 hover:opacity-100 transition-opacity duration-300 z-10 focus:outline-none focus:ring-4 focus:ring-orange-300 dark:focus:ring-orange-700 border-2 border-white dark:border-gray-900 group-hover:opacity-100 lg:scale-125">
      <svg class="h-6 w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M15 19l-7-7 7-7"></path></svg>
    </button>
    <button aria-label="Next slide" class="absolute top-1/2 right-4 transform -translate-y-1/2 bg-gradient-to-r from-orange-500 to-red-600 dark:from-orange-500 dark:to-orange-700 text-white p-3 rounded-full shadow-lg opacity-80 hover:opacity-100 transition-opacity duration-300 z-10 focus:outline-none focus:ring-4 focus:ring-orange-300 dark:focus:ring-orange-700 border-2 border-white dark:border-gray-900 group-hover:opacity-100 lg:scale-125">
      <svg class="h-6 w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M9 5l7 7-7 7"></path></svg>
    </button>
  </div>

  <!-- Pagination Dots -->
  <div class="flex justify-center items-center space-x-3 mt-8">
    <button aria-label="Go to slide 1" class="h-4 w-4 rounded-full bg-red-500 dark:bg-orange-400 border-2 border-white dark:border-gray-900 shadow-md focus:outline-none focus:ring-4 focus:ring-orange-300 dark:focus:ring-orange-700 transition-all duration-300 transform hover:scale-125 focus:scale-125"></button>
    <button aria-label="Go to slide 2" class="h-3 w-3 rounded-full bg-orange-400 dark:bg-red-500 border-2 border-white dark:border-gray-900 shadow-md focus:outline-none focus:ring-4 focus:ring-orange-300 dark:focus:ring-orange-700 transition-all duration-300 transform hover:scale-125 focus:scale-125"></button>
  </div>

  <!-- Retro Footer Accent -->
  <div class="mt-12 text-center text-orange-700 dark:text-orange-300 text-sm opacity-75">
    <p>&copy; 1988 - <span class="font-bold">ANALOG ANALYTICS CORP.</span> - All Rights Reserved</p>
    <p class="mt-2 text-xs">SYSTEM STATUS: <span class="text-lime-500 dark:text-lime-400">OPERATIONAL</span></p>
  </div>

  <!-- Retro Scanline Overlay (Visual only, no interaction) -->
  <div class="pointer-events-none absolute inset-0 z-20 opacity-5 dark:opacity-10" style="background: repeating-linear-gradient(rgba(0,0,0,0) 0px, rgba(0,0,0,.05) 1px, rgba(0,0,0,0) 2px);">
  </div>

  <!-- Retro Vignette Overlay -->
  <div class="pointer-events-none absolute inset-0 z-20" style="box-shadow: inset 0 0 100px rgba(0,0,0,.4);">
  </div>
</div>

Playful_Forest_Agriculture_Carousel

A playful and fun carousel slider component designed for agriculture and farming websites, featuring a forest/green color palette, rounded elements, and full responsiveness with dark mode support.

Open Preview

                <section class="py-12 bg-lime-50 dark:bg-emerald-900 rounded-xl shadow-lg m-4">
  <div class="container mx-auto px-4">
    <h2 class="text-4xl md:text-5xl font-extrabold text-center text-emerald-800 dark:text-lime-200 mb-12 font-sans leading-tight">
      Harvesting Joy, Cultivating Growth
    </h2>

    <div class="relative flex items-center justify-center">
      <!-- Navigation Buttons (for display purposes, actual JS for functionality) -->
      <button aria-label="Previous slide" class="absolute left-0 z-10 p-3 bg-emerald-600 rounded-full shadow-lg text-white hover:bg-emerald-700 focus:outline-none focus:ring-4 focus:ring-emerald-400 focus:ring-opacity-75 transition duration-300 ease-in-out -left-4 md:-left-8 dark:bg-lime-600 dark:hover:bg-lime-700 dark:focus:ring-lime-400">
        <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"></path></svg>
      </button>
      <button aria-label="Next slide" class="absolute right-0 z-10 p-3 bg-emerald-600 rounded-full shadow-lg text-white hover:bg-emerald-700 focus:outline-none focus:ring-4 focus:ring-emerald-400 focus:ring-opacity-75 transition duration-300 ease-in-out -right-4 md:-right-8 dark:bg-lime-600 dark:hover:bg-lime-700 dark:focus:ring-lime-400">
        <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg>
      </button>

      <!-- Carousel Track (Conceptual - assumes JS for dynamic sliding) -->
      <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 w-full overflow-hidden">
        <!-- Slide 1 -->
        <div class="bg-white dark:bg-emerald-800 rounded-3xl p-6 shadow-xl transform transition duration-500 ease-in-out hover:scale-105 hover:shadow-2xl border-4 border-emerald-200 dark:border-emerald-700">
          <img class="w-full h-48 object-cover rounded-2xl mb-6 shadow-md border-2 border-emerald-300" src="https://picsum.photos/seed/agriculture1/600/400" alt="Freshly Harvested Produce">
          <h3 class="text-2xl font-bold text-emerald-700 dark:text-lime-300 mb-3">Bountiful Harvests</h3>
          <p class="text-emerald-600 dark:text-lime-400 text-lg leading-relaxed">Discover the freshest, organically grown produce straight from our fields to your table. Sustainable practices for a healthier planet.</p>
          <div class="mt-6 flex items-center justify-between">
            <div class="flex items-center space-x-3">
              <img class="w-12 h-12 rounded-full border-4 border-emerald-400 dark:border-lime-500 shadow-md" src="https://randomuser.me/api/portraits/men/32.jpg" alt="Farmer John">
              <span class="text-emerald-700 dark:text-lime-300 font-semibold">Farmer John</span>
            </div>
            <a href="#" class="inline-flex items-center px-5 py-2 font-semibold text-white bg-emerald-500 rounded-md hover:bg-emerald-600 focus:outline-none focus:ring-4 focus:ring-emerald-300 transition duration-300 dark:bg-lime-500 dark:hover:bg-lime-600 dark:focus:ring-lime-300 shadow-md">
              Learn More
              <svg class="w-4 h-4 ml-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3"></path></svg>
            </a>
          </div>
        </div>

        <!-- Slide 2 -->
        <div class="bg-white dark:bg-emerald-800 rounded-3xl p-6 shadow-xl transform transition duration-500 ease-in-out hover:scale-105 hover:shadow-2xl border-4 border-emerald-200 dark:border-emerald-700">
          <img class="w-full h-48 object-cover rounded-2xl mb-6 shadow-md border-2 border-emerald-300" src="https://picsum.photos/seed/agriculture2/600/400" alt="Modern Farming Technology">
          <h3 class="text-2xl font-bold text-emerald-700 dark:text-lime-300 mb-3">Smart Farming Solutions</h3>
          <p class="text-emerald-600 dark:text-lime-400 text-lg leading-relaxed">Embrace the future with our innovative farming technologies. Maximizing yields with minimal impact on nature.</p>
          <div class="mt-6 flex items-center justify-between">
            <div class="flex items-center space-x-3">
              <img class="w-12 h-12 rounded-full border-4 border-emerald-400 dark:border-lime-500 shadow-md" src="https://randomuser.me/api/portraits/women/45.jpg" alt="Agri-Tech Anya">
              <span class="text-emerald-700 dark:text-lime-300 font-semibold">Agri-Tech Anya</span>
            </div>
            <a href="#" class="inline-flex items-center px-5 py-2 font-semibold text-white bg-emerald-500 rounded-md hover:bg-emerald-600 focus:outline-none focus:ring-4 focus:ring-emerald-300 transition duration-300 dark:bg-lime-500 dark:hover:bg-lime-600 dark:focus:ring-lime-300 shadow-md">
              Discover
              <svg class="w-4 h-4 ml-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3"></path></svg>
            </a>
          </div>
        </div>

        <!-- Slide 3 -->
        <div class="bg-white dark:bg-emerald-800 rounded-3xl p-6 shadow-xl transform transition duration-500 ease-in-out hover:scale-105 hover:shadow-2xl border-4 border-emerald-200 dark:border-emerald-700">
          <img class="w-full h-48 object-cover rounded-2xl mb-6 shadow-md border-2 border-emerald-300" src="https://picsum.photos/seed/agriculture3/600/400" alt="Community Farming">
          <h3 class="text-2xl font-bold text-emerald-700 dark:text-lime-300 mb-3">Community and Care</h3>
          <p class="text-emerald-600 dark:text-lime-400 text-lg leading-relaxed">Join our vibrant farming community. Share knowledge, grow together, and nurture the earth with love and dedication.</p>
          <div class="mt-6 flex items-center justify-between">
            <div class="flex items-center space-x-3">
              <img class="w-12 h-12 rounded-full border-4 border-emerald-400 dark:border-lime-500 shadow-md" src="https://randomuser.me/api/portraits/men/21.jpg" alt="Community Leader Chris">
              <span class="text-emerald-700 dark:text-lime-300 font-semibold">Community Chris</span>
            </div>
            <a href="#" class="inline-flex items-center px-5 py-2 font-semibold text-white bg-emerald-500 rounded-md hover:bg-emerald-600 focus:outline-none focus:ring-4 focus:ring-emerald-300 transition duration-300 dark:bg-lime-500 dark:hover:bg-lime-600 dark:focus:ring-lime-300 shadow-md">
              Join Us
              <svg class="w-4 h-4 ml-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3"></path></svg>
            </a>
          </div>
        </div>
      </div>
    </div>

    <!-- Dot Indicators (Conceptual - assumes JS for dynamic navigation) -->
    <div class="flex justify-center mt-12 space-x-4">
      <button aria-label="Go to slide 1" class="w-4 h-4 bg-emerald-600 dark:bg-lime-500 rounded-full focus:outline-none focus:ring-4 focus:ring-emerald-400 focus:ring-opacity-75 transition duration-300"></button>
      <button aria-label="Go to slide 2" class="w-4 h-4 bg-emerald-300 dark:bg-emerald-600 rounded-full hover:bg-emerald-400 dark:hover:bg-lime-400 focus:outline-none focus:ring-4 focus:ring-emerald-400 focus:ring-opacity-75 transition duration-300"></button>
      <button aria-label="Go to slide 3" class="w-4 h-4 bg-emerald-300 dark:bg-emerald-600 rounded-full hover:bg-emerald-400 dark:hover:bg-lime-400 focus:outline-none focus:ring-4 focus:ring-emerald-400 focus:ring-opacity-75 transition duration-300"></button>
    </div>
  </div>
</section>

Search Components

Categories

Carousel Slider