搜索组件

类别

组件轮播滑块

轮播滑块

带有相关信息的矩形容器

轮播滑块组件

具有渐变颜色过渡的响应式轮播滑块组件，专为时尚和美容品牌设计。具有深色模式支持和时尚、现代的外观。

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

轮播滑块组件

一个复杂的响应式轮播滑块组件，具有企业/专业三色配色方案，专为天气/气候数据展示而设计。包括深色模式支持并使用语义 HTML。

打开预览

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

轮播滑块组件

一个简单、响应式轮播滑块组件，具有 Material Design 美学、棕褐色/棕色调和深色模式支持，适用于投资组合。不使用 JavaScript，使其成为纯粹的 CSS 驱动组件。

打开预览

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

轮播滑块组件

一个复杂的响应式轮播滑块组件，适用于新闻/新闻网站，具有深色模式 UI 和灰度配色方案。它显示带有图像、标题、描述和类别的新闻文章，旨在减少眼睛疲劳。

打开预览

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

俙皮的秋季时尚旋转木马

时尚和美容品牌的俏皮有趣的旋转木马滑块组件，具有欢快的美学、圆润的元素和秋天的配色方案。支持响应能力和深色模式。

打开预览

                <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

一个简单、响应式的轮播滑块组件，具有拟物化设计元素和类似的配色方案，适用于约会或社交平台。包括深色模式支持。

打开预览

                <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

一个简单的野兽派风格轮播滑块组件，适用于新闻和新闻网站，具有高对比度、酷炫的中性色和完全响应能力，并支持深色模式。使用占位符图像并强调原始视觉元素。

打开预览

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

轮播滑块组件

一个复杂的响应式轮播滑块组件，具有糖果/甜蜜的配色方案、微交互和深色模式支持，适用于活动和会议网站。

打开预览

                <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

一个复杂的响应式轮播滑块组件，具有复古/复古美感、温暖的日落配色方案，专为仪表板使用案例而设计。包括导航箭头、圆点和深色模式支持。

打开预览

                <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

一个俏皮有趣的轮播滑块组件，专为农业和农业网站设计，具有森林/绿色调色板、圆形元素和完全响应能力，支持深色模式。

打开预览

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