캐러셀 슬라이더

Carousel Slider 구성 요소

다크 모드를 지원하는 반응형 캐러셀 슬라이더 구성 요소입니다. 이 구성 요소는 JavaScript 없이 HTML 및 Tailwind CSS만 사용합니다. 활성 슬라이드를 위한 생생한 색상의 간단한 레이아웃이 특징이며 블로그 또는 콘텐츠 소비에 적합합니다.

미리보기 열기

                <div class="relative w-full max-w-3xl mx-auto bg-gray-900 rounded-lg shadow-xl overflow-hidden">
  <!-- Carousel wrapper -->
  <div class="relative h-64 md:h-80 lg:h-96 overflow-hidden rounded-lg">
    <!-- Item 1 -->
    <div id="carousel-item-1" class="duration-700 ease-in-out absolute inset-0 transition-all transform translate-x-0">
      <img src="https://picsum.photos/seed/1/800/400" class="block w-full h-full object-cover" alt="...">
      <div class="absolute inset-x-0 bottom-0 bg-gradient-to-t from-black to-transparent p-4 text-white">
        <h3 class="text-xl md:text-2xl font-bold">Simple Dark Mode Carousel</h3>
        <p class="text-sm md:text-base">A clean and vibrant carousel for your blog.</p>
      </div>
    </div>
    <!-- Item 2 -->
    <div id="carousel-item-2" class="duration-700 ease-in-out absolute inset-0 transition-all transform translate-x-full">
      <img src="https://picsum.photos/seed/2/800/400" class="block w-full h-full object-cover" alt="...">
      <div class="absolute inset-x-0 bottom-0 bg-gradient-to-t from-black to-transparent p-4 text-white">
        <h3 class="text-xl md:text-2xl font-bold">Engaging Content Display</h3>
        <p class="text-sm md:text-base">Showcase your articles with vibrant highlights.</p>
      </div>
    </div>
    <!-- Item 3 -->
    <div id="carousel-item-3" class="duration-700 ease-in-out absolute inset-0 transition-all transform translate-x-full">
      <img src="https://picsum.photos/seed/3/800/400" class="block w-full h-full object-cover" alt="...">
      <div class="absolute inset-x-0 bottom-0 bg-gradient-to-t from-black to-transparent p-4 text-white">
        <h3 class="text-xl md:text-2xl font-bold">Responsive Across Devices</h3>
        <p class="text-sm md:text-base">Looks great on desktop, tablet, and mobile.</p>
      </div>
    </div>
  </div>
  <!-- Slider indicators (Dots) -->
  <div class="absolute z-30 flex space-x-3 -translate-x-1/2 bottom-5 left-1/2 rtl:space-x-reverse">
    <button type="button" class="w-3 h-3 rounded-full bg-indigo-500 dark:bg-indigo-600" aria-current="true" aria-label="Slide 1"></button>
    <button type="button" class="w-3 h-3 rounded-full bg-gray-400 dark:bg-gray-700" aria-current="false" aria-label="Slide 2"></button>
    <button type="button" class="w-3 h-3 rounded-full bg-gray-400 dark:bg-gray-700" aria-current="false" aria-label="Slide 3"></button>
  </div>
  <!-- Slider controls -->
  <button type="button" class="absolute top-0 start-0 z-30 flex items-center justify-center h-full px-4 cursor-pointer group focus:outline-none">
    <span class="inline-flex items-center justify-center w-10 h-10 rounded-full bg-white/30 dark:bg-gray-800/30 group-hover:bg-white/50 dark:group-hover:bg-gray-800/60 group-focus:ring-4 group-focus:ring-white dark:group-focus:ring-gray-800/70 group-focus:outline-none">
      <svg class="w-4 h-4 text-white dark:text-gray-800 rtl:rotate-180" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 6 10">
        <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 1 1 5l4 4"/>
      </svg>
      <span class="sr-only">Previous</span>
    </span>
  </button>
  <button type="button" class="absolute top-0 end-0 z-30 flex items-center justify-center h-full px-4 cursor-pointer group focus:outline-none">
    <span class="inline-flex items-center justify-center w-10 h-10 rounded-full bg-white/30 dark:bg-gray-800/30 group-hover:bg-white/50 dark:group-hover:bg-gray-800/60 group-focus:ring-4 group-focus:ring-white dark:group-focus:ring-gray-800/70 group-focus:outline-none">
      <svg class="w-4 h-4 text-white dark:text-gray-800 rtl:rotate-180" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 6 10">
        <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 9 4-4-4-4"/>
      </svg>
      <span class="sr-only">Next</span>
    </span>
  </button>
</div>

Carousel Slider 구성 요소

다크 모드를 지원하는 전자 상거래를 위한 반응형 Carousel Slider 구성 요소입니다. 제품 이미지, 이름, 가격 및 장바구니에 담기 버튼이 있습니다. 이 디자인은 다크 모드에 적합한 보색 구성표를 사용하여 시각적 편안함과 제품 프레젠테이션을 향상시킵니다.

미리보기 열기

                <div class="dark:bg-gray-900 bg-white py-8">
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
    <h2 class="text-3xl font-extrabold dark:text-white text-gray-900 mb-6">Featured Products</h2>
    <div class="relative">
      <div class="carousel-container relative overflow-hidden">
        <div class="carousel-track flex transition-transform duration-500 ease-in-out">
          <!-- Product Card 1 -->
          <div class="carousel-item flex-shrink-0 w-full sm:w-1/2 lg:w-1/3 px-4">
            <div class="bg-gray-100 dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden">
              <img class="w-full h-48 object-cover" src="https://picsum.photos/seed/product1/600/400" alt="Product Image">
              <div class="p-6">
                <h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-2">Stylish Headphones</h3>
                <p class="text-gray-700 dark:text-gray-300 text-sm mb-4">Experience immersive sound with these premium headphones.</p>
                <div class="flex items-center justify-between">
                  <span class="text-xl font-bold text-gray-900 dark:text-white">$120.00</span>
                  <button class="bg-indigo-600 hover:bg-indigo-700 text-white font-bold py-2 px-4 rounded-full transition duration-300">
                    Add to Cart
                  </button>
                </div>
              </div>
            </div>
          </div>

          <!-- Product Card 2 -->
          <div class="carousel-item flex-shrink-0 w-full sm:w-1/2 lg:w-1/3 px-4">
            <div class="bg-gray-100 dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden">
              <img class="w-full h-48 object-cover" src="https://picsum.photos/seed/product2/600/400" alt="Product Image">
              <div class="p-6">
                <h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-2">Smartwatch Pro</h3>
                <p class="text-gray-700 dark:text-gray-300 text-sm mb-4">Stay connected and track your fitness with this advanced smartwatch.</p>
                <div class="flex items-center justify-between">
                  <span class="text-xl font-bold text-gray-900 dark:text-white">$199.00</span>
                  <button class="bg-indigo-600 hover:bg-indigo-700 text-white font-bold py-2 px-4 rounded-full transition duration-300">
                    Add to Cart
                  </button>
                </div>
              </div>
            </div>
          </div>

          <!-- Product Card 3 -->
          <div class="carousel-item flex-shrink-0 w-full sm:w-1/2 lg:w-1/3 px-4">
            <div class="bg-gray-100 dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden">
              <img class="w-full h-48 object-cover" src="https://picsum.photos/seed/product3/600/400" alt="Product Image">
              <div class="p-6">
                <h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-2">Portable Bluetooth Speaker</h3>
                <p class="text-gray-700 dark:text-gray-300 text-sm mb-4">Enjoy your music anywhere with this powerful and compact speaker.</p>
                <div class="flex items-center justify-between">
                  <span class="text-xl font-bold text-gray-900 dark:text-white">$75.00</span>
                  <button class="bg-indigo-600 hover:bg-indigo-700 text-white font-bold py-2 px-4 rounded-full transition duration-300">
                    Add to Cart
                  </button>
                </div>
              </div>
            </div>
          </div>

          <!-- Product Card 4 -->
          <div class="carousel-item flex-shrink-0 w-full sm:w-1/2 lg:w-1/3 px-4">
            <div class="bg-gray-100 dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden">
              <img class="w-full h-48 object-cover" src="https://picsum.photos/seed/product4/600/400" alt="Product Image">
              <div class="p-6">
                <h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-2">Ergonomic Office Chair</h3>
                <p class="text-gray-700 dark:text-gray-300 text-sm mb-4">Work in comfort and style with this adjustable office chair.</p>
                <div class="flex items-center justify-between">
                  <span class="text-xl font-bold text-gray-900 dark:text-white">$250.00</span>
                  <button class="bg-indigo-600 hover:bg-indigo-700 text-white font-bold py-2 px-4 rounded-full transition duration-300">
                    Add to Cart
                  </button>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- Navigation Buttons (Optional - can be styled with Tailwind) -->
      <button class="carousel-prev absolute top-1/2 left-0 transform -translate-y-1/2 bg-gray-700 dark:bg-gray-800 text-white p-2 rounded-full shadow-lg z-10">
        &#10094;
      </button>
      <button class="carousel-next absolute top-1/2 right-0 transform -translate-y-1/2 bg-gray-700 dark:bg-gray-800 text-white p-2 rounded-full shadow-lg z-10">
        &#10095;
      </button>
    </div>
  </div>
</div>

<style>
  .carousel-track {
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch; /* For smoother scrolling on iOS */
  }

  .carousel-item {
    scroll-snap-align: start;
  }

  .carousel-container {
    overflow-x: scroll;
    scrollbar-width: none; /* Hide scrollbar for Firefox */
    -ms-overflow-style: none;  /* Hide scrollbar for IE and Edge */
  }

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

Carousel Slider 구성 요소

Tailwind CSS를 사용하여 다크 모드에서 전자 상거래를 위해 설계된 간단한 캐러셀 슬라이더 구성 요소입니다.

미리보기 열기

                <div class="relative w-full max-w-lg mx-auto">
    <div class="overflow-hidden rounded-lg shadow-lg">
        <div class="carousel-inner dark:bg-gray-800 bg-gray-100">
            <div class="carousel-item active">
                <img src="https://picsum.photos/800/400?1" alt="Product 1" class="w-full h-auto">
                <div class="p-4">
                    <h2 class="text-lg font-semibold text-white dark:text-gray-200">Product 1</h2>
                    <p class="text-sm text-gray-700 dark:text-gray-300">Description of product 1</p>
                    <button class="mt-2 px-4 py-2 bg-teal-500 dark:bg-teal-700 text-white rounded hover:bg-teal-600 dark:hover:bg-teal-800">Buy Now</button>
                </div>
            </div>
            <div class="carousel-item">
                <img src="https://picsum.photos/800/400?2" alt="Product 2" class="w-full h-auto">
                <div class="p-4">
                    <h2 class="text-lg font-semibold text-white dark:text-gray-200">Product 2</h2>
                    <p class="text-sm text-gray-700 dark:text-gray-300">Description of product 2</p>
                    <button class="mt-2 px-4 py-2 bg-teal-500 dark:bg-teal-700 text-white rounded hover:bg-teal-600 dark:hover:bg-teal-800">Buy Now</button>
                </div>
            </div>
            <div class="carousel-item">
                <img src="https://picsum.photos/800/400?3" alt="Product 3" class="w-full h-auto">
                <div class="p-4">
                    <h2 class="text-lg font-semibold text-white dark:text-gray-200">Product 3</h2>
                    <p class="text-sm text-gray-700 dark:text-gray-300">Description of product 3</p>
                    <button class="mt-2 px-4 py-2 bg-teal-500 dark:bg-teal-700 text-white rounded hover:bg-teal-600 dark:hover:bg-teal-800">Buy Now</button>
                </div>
            </div>
        </div>

        <!-- Carousel controls (optional) -->
        <button class="absolute top-1/2 left-0 transform -translate-y-1/2 bg-gray-600 dark:bg-gray-700 rounded-full p-2 text-white">
            &#10094;
        </button>
        <button class="absolute top-1/2 right-0 transform -translate-y-1/2 bg-gray-600 dark:bg-gray-700 rounded-full p-2 text-white">
            &#10095;
        </button>
    </div>
</div>

<style>
.carousel-inner {
    display: flex;
    transition: transform 0.5s ease;
}

.carousel-item {
    min-width: 100%;
    box-sizing: border-box;
}
</style>

Carousel Slider 구성 요소

블로그 및 콘텐츠 소비를 위해 설계된 미니멀한 캐러셀 슬라이더 구성 요소로, 트라이어딕 색 구성표와 어두운 테마를 지원하는 반응형 디자인이 특징입니다.

미리보기 열기

                <div class="carousel w-full relative">
  <div class="carousel-inner relative w-full overflow-hidden">
    <!-- Slide 1 -->
    <div class="carousel-item active relative float-left w-full">
      <div class="bg-gray-200 dark:bg-gray-800 p-6 rounded-md shadow-md">
        <img src="https://picsum.photos/800/400?random=1" alt="Slide 1" class="w-full h-48 object-cover rounded-md mb-4" />
        <h2 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Title 1</h2>
        <p class="text-gray-600 dark:text-gray-400">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio.</p>
      </div>
    </div>
    <!-- Slide 2 -->
    <div class="carousel-item relative float-left w-full">
      <div class="bg-gray-200 dark:bg-gray-800 p-6 rounded-md shadow-md">
        <img src="https://picsum.photos/800/400?random=2" alt="Slide 2" class="w-full h-48 object-cover rounded-md mb-4" />
        <h2 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Title 2</h2>
        <p class="text-gray-600 dark:text-gray-400">Suspendisse potenti. Praesent dapibus, neque id vestibulum.</p>
      </div>
    </div>
    <!-- Slide 3 -->
    <div class="carousel-item relative float-left w-full">
      <div class="bg-gray-200 dark:bg-gray-800 p-6 rounded-md shadow-md">
        <img src="https://picsum.photos/800/400?random=3" alt="Slide 3" class="w-full h-48 object-cover rounded-md mb-4" />
        <h2 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Title 3</h2>
        <p class="text-gray-600 dark:text-gray-400">Curabitur blandit tempus porttitor. Maecenas sed diam eget risus varius blandit.</p>
      </div>
    </div>
  </div>
  <a class="carousel-control-prev absolute top-1/2 left-0 transform -translate-y-1/2 z-10" href="#" role="button" aria-label="Previous">
    <span class="inline-block bg-gray-600 dark:bg-gray-400 p-2 rounded-full"><</span>
  </a>
  <a class="carousel-control-next absolute top-1/2 right-0 transform -translate-y-1/2 z-10" href="#" role="button" aria-label="Next">
    <span class="inline-block bg-gray-600 dark:bg-gray-400 p-2 rounded-full">></span>
  </a>
</div>

Neumorphism 캐러셀 슬라이더

Tailwind CSS를 사용하여 Neumorphism 스타일, 파스텔 색 구성표, 중간 정도의 복잡성, 소셜 미디어 목적 및 어두운 테마를 지원하는 반응형 캐러셀 슬라이더 구성 요소입니다.

미리보기 열기

                <div class="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900">
  <div class="w-full max-w-md p-6 bg-gray-200 dark:bg-gray-800 rounded-xl shadow-xl neumorphism-light dark:neumorphism-dark">
    <div class="text-center text-gray-700 dark:text-gray-300 mb-6">
      <h2 class="text-2xl font-semibold">Social Media Carousel</h2>
    </div>
    <div class="relative">
      <div class="overflow-hidden rounded-lg">
        <div class="flex transition-transform duration-500 ease-in-out">
          <!-- Carousel Item 1 -->
          <div class="w-full flex-shrink-0">
            <img src="https://picsum.photos/400/250?random=1" alt="Carousel Image 1" class="w-full h-48 object-cover rounded-t-lg">
            <div class="p-4 bg-gray-300 dark:bg-gray-700 rounded-b-lg">
              <div class="flex items-center mb-3">
                <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-10 h-10 rounded-full mr-3 border-2 border-pink-300 dark:border-pink-700">
                <div>
                  <p class="font-semibold text-gray-800 dark:text-gray-200">John Doe</p>
                  <p class="text-sm text-gray-600 dark:text-gray-400">@johndoe</p>
                </div>
              </div>
              <p class="text-gray-700 dark:text-gray-300">This is a great social media post! #tailwind #neumorphism</p>
            </div>
          </div>
          <!-- Carousel Item 2 -->
          <div class="w-full flex-shrink-0">
            <img src="https://picsum.photos/400/250?random=2" alt="Carousel Image 2" class="w-full h-48 object-cover rounded-t-lg">
            <div class="p-4 bg-gray-300 dark:bg-gray-700 rounded-b-lg">
              <div class="flex items-center mb-3">
                <img src="https://randomuser.me/api/portraits/women/2.jpg" alt="Avatar" class="w-10 h-10 rounded-full mr-3 border-2 border-purple-300 dark:border-purple-700">
                <div>
                  <p class="font-semibold text-gray-800 dark:text-gray-200">Jane Smith</p>
                  <p class="text-sm text-gray-600 dark:text-gray-400">@janesmith</p>
                </div>
              </div>
              <p class="text-gray-700 dark:text-gray-300">Enjoying the pastel vibes! ✨ #pastelaesthetic</p>
            </div>
          </div>
           <!-- Carousel Item 3 -->
          <div class="w-full flex-shrink-0">
            <img src="https://picsum.photos/400/250?random=3" alt="Carousel Image 3" class="w-full h-48 object-cover rounded-t-lg">
            <div class="p-4 bg-gray-300 dark:bg-gray-700 rounded-b-lg">
              <div class="flex items-center mb-3">
                <img src="https://randomuser.me/api/portraits/men/3.jpg" alt="Avatar" class="w-10 h-10 rounded-full mr-3 border-2 border-green-300 dark:border-green-700">
                <div>
                  <p class="font-semibold text-gray-800 dark:text-gray-200">Peter Jones</p>
                  <p class="text-sm text-gray-600 dark:text-gray-400">@peterjones</p>
                </div>
              </div>
              <p class="text-gray-700 dark:text-gray-300">Learning about Neumorphism. So cool! #uidesign</p>
            </div>
          </div>
        </div>
      </div>
      <!-- Navigation Dots (optional, requires JS for full functionality) -->
      <div class="flex justify-center mt-4 space-x-2">
        <span class="block w-3 h-3 rounded-full bg-gray-400 dark:bg-gray-600"></span>
        <span class="block w-3 h-3 rounded-full bg-gray-400 dark:bg-gray-600"></span>
        <span class="block w-3 h-3 rounded-full bg-gray-400 dark:bg-gray-600"></span>
      </div>
    </div>
  </div>
</div>

<style>
.neumorphism-light {
  box-shadow: 7px 7px 15px #bebebe, -7px -7px 15px #ffffff;
}

.dark .neumorphism-dark {
  box-shadow: 7px 7px 15px #1a1a1a, -7px -7px 15px #2e2e2e;
}
</style>

Glassmorphism 캐러셀 슬라이더

블로그 및 컨텐츠 소비에 적합한 glassmorphism 스타일을 가진 반응형 캐러셀 슬라이더 구성 요소입니다. 여러 콘텐츠 슬라이드, 젖빛 유리와 같은 요소를 특징으로 하며 밝은 테마와 어두운 테마 모두에 맞게 설계되었습니다.

미리보기 열기

                <div class="relative w-full max-w-4xl mx-auto mt-10">
  <div class="flex overflow-hidden rounded-lg shadow-lg">
    <div class="flex-shrink-0 w-full h-64 bg-white bg-opacity-30 backdrop-blur-md border border-transparent rounded-lg dark:bg-gray-800">
      <img class="w-full h-full object-cover rounded-lg" src="https://picsum.photos/800/400?random=1" alt="Carousel Slide 1">
      <div class="absolute inset-0 flex items-center justify-center text-white opacity-80 text-2xl">Slide 1</div>
    </div>
    <div class="flex-shrink-0 w-full h-64 bg-white bg-opacity-30 backdrop-blur-md border border-transparent rounded-lg dark:bg-gray-800">
      <img class="w-full h-full object-cover rounded-lg" src="https://picsum.photos/800/400?random=2" alt="Carousel Slide 2">
      <div class="absolute inset-0 flex items-center justify-center text-white opacity-80 text-2xl">Slide 2</div>
    </div>
    <div class="flex-shrink-0 w-full h-64 bg-white bg-opacity-30 backdrop-blur-md border border-transparent rounded-lg dark:bg-gray-800">
      <img class="w-full h-full object-cover rounded-lg" src="https://picsum.photos/800/400?random=3" alt="Carousel Slide 3">
      <div class="absolute inset-0 flex items-center justify-center text-white opacity-80 text-2xl">Slide 3</div>
    </div>
  </div>
  <div class="flex justify-center mt-4">
    <button class="px-4 py-2 mx-1 text-sm font-semibold text-white bg-blue-500 rounded-full hover:bg-blue-600 dark:bg-blue-700 dark:hover:bg-blue-600">Previous</button>
    <button class="px-4 py-2 mx-1 text-sm font-semibold text-white bg-blue-500 rounded-full hover:bg-blue-600 dark:bg-blue-700 dark:hover:bg-blue-600">Next</button>
  </div>
  <div class="mt-4 flex justify-around">
    <div class="p-4 bg-white bg-opacity-30 backdrop-blur-md border border-transparent rounded-lg dark:bg-gray-800">
      <img class="h-12 w-12 rounded-full" src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar 1">
      <p class="text-center text-white mt-2">Author 1</p>
    </div>
    <div class="p-4 bg-white bg-opacity-30 backdrop-blur-md border border-transparent rounded-lg dark:bg-gray-800">
      <img class="h-12 w-12 rounded-full" src="https://randomuser.me/api/portraits/women/1.jpg" alt="Avatar 2">
      <p class="text-center text-white mt-2">Author 2</p>
    </div>
    <div class="p-4 bg-white bg-opacity-30 backdrop-blur-md border border-transparent rounded-lg dark:bg-gray-800">
      <img class="h-12 w-12 rounded-full" src="https://randomuser.me/api/portraits/men/2.jpg" alt="Avatar 3">
      <p class="text-center text-white mt-2">Author 3</p>
    </div>
  </div>
</div>

3D 캐러셀 슬라이더

소셜 미디어 인터페이스를 위한 3D 디자인 스타일과 파스텔 색 구성표가 있는 간단하고 반응이 빠른 캐러셀 슬라이더로 다크 모드를 지원합니다.

미리보기 열기

                <div class="relative w-full max-w-2xl mx-auto mt-10">
    <!-- Carousel container -->
    <div class="overflow-hidden rounded-lg shadow-2xl">
        <div class="flex transition-transform duration-300 ease-in-out transform perspective-1000">
            <!-- Carousel item 1 -->
            <div class="w-full flex-shrink-0 transition-all duration-500 transform hover:scale-105 dark:bg-gray-800 bg-pastel-blue rounded-lg">
                <img class="w-full h-full object-cover" src="https://picsum.photos/600/300?random=1" alt="Carousel Image 1">
                <div class="p-4">
                    <h2 class="text-lg font-semibold text-gray-700 dark:text-gray-200">Image Title 1</h2>
                    <p class="text-sm text-gray-600 dark:text-gray-400">Description for image 1.</p>
                </div>
            </div>
            <!-- Carousel item 2 -->
            <div class="w-full flex-shrink-0 transition-all duration-500 transform hover:scale-105 dark:bg-gray-800 bg-pastel-green rounded-lg">
                <img class="w-full h-full object-cover" src="https://picsum.photos/600/300?random=2" alt="Carousel Image 2">
                <div class="p-4">
                    <h2 class="text-lg font-semibold text-gray-700 dark:text-gray-200">Image Title 2</h2>
                    <p class="text-sm text-gray-600 dark:text-gray-400">Description for image 2.</p>
                </div>
            </div>
            <!-- Carousel item 3 -->
            <div class="w-full flex-shrink-0 transition-all duration-500 transform hover:scale-105 dark:bg-gray-800 bg-pastel-yellow rounded-lg">
                <img class="w-full h-full object-cover" src="https://picsum.photos/600/300?random=3" alt="Carousel Image 3">
                <div class="p-4">
                    <h2 class="text-lg font-semibold text-gray-700 dark:text-gray-200">Image Title 3</h2>
                    <p class="text-sm text-gray-600 dark:text-gray-400">Description for image 3.</p>
                </div>
            </div>
        </div>
    </div>
    <!-- Navigation buttons -->
    <button class="absolute top-1/2 left-0 z-10 p-2 text-white bg-blue-500 rounded-full hover:bg-blue-700 dark:bg-blue-700 dark:hover:bg-blue-600">
        &#10094;
    </button>
    <button class="absolute top-1/2 right-0 z-10 p-2 text-white bg-blue-500 rounded-full hover:bg-blue-700 dark:bg-blue-700 dark:hover:bg-blue-600">
        &#10095;
    </button>
    <!-- Avatar section -->
    <div class="flex justify-center mt-4">
        <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-16 h-16 rounded-full shadow-lg">
        <span class="text-lg font-medium text-gray-800 dark:text-gray-200 ml-2">User Name</span>
    </div>
</div>

Tailwind CSS를 사용하여 "포트폴리오 - 작업 또는 제품 전시"를 위해 "보색 - 색상환에서 서로 반대편에 있는 색상" 및 복잡성 수준 "복잡함 - 여러 대화형 요소가 있는 풍부한 인터페이스"를 사용하여 디자인 스타일 "Neumorphism - 미묘한 그림자를 사용하여 배경에서 돌출되는 것처럼 보이는 요소를 만드는 소프트 UI 스타일"로 웹 구성 요소 Carousel Slider Component를 구현합니다. 어두운 테마를 지원하는 반응형 디자인을 만들 수 있습니다. JavaScript 코드가 필요하지 않으며 Tailwind 클래스가 있는 HTML만 필요합니다. 다크 모드의 경우 스타일링을 위해 Tailwind의 dark: 접두사를 사용합니다. 이미지가 필요한 경우 이미지에는 picsum.photos를 사용하고 아바타에는 randomuser.me 를 사용합니다.

미리보기 열기

                <section class="flex items-center justify-center w-screen min-h-screen py-10 text-gray-800 bg-gray-100 dark:text-gray-200 dark:bg-gray-900">
    <div class="flex flex-col items-center justify-center max-w-screen-lg">
        <div class="flex items-center justify-center w-full h-auto">
            <div class="w-full h-full carousel">
                <div class="carousel-inner">
                    <input class="carousel-open" type="radio" id="carousel-1" name="carousel" aria-hidden="true" hidden="" checked="checked">
                    <div class="items-center justify-center block h-full carousel-item">
                        <div class="relative flex flex-col items-center justify-center w-full mx-auto shadow-xl lg:flex-row lg:max-w-4xl rounded-xl bg-gray-100 dark:bg-gray-800">
                            <div class="w-full lg:w-1/2">
                                <img class="w-full h-full bg-center bg-cover object-cover rounded-lg" src="https://picsum.photos/seed/picsum/1920/1080">
                            </div>
                            <div class="w-full px-6 py-12 lg:w-1/2">
                                <h2 class="text-gray-800 dark:text-gray-200 text-3xl font-semibold">Heading</h2>
                                <p class="mt-4 text-gray-600 dark:text-gray-400 text-sm leading-relaxed">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nesciunt illo earum quod iste illum nobis.</p>
                                <div class="mt-8">
                                    <button class="text-indigo-500 dark:text-indigo-400 font-medium">Read More</button>
                                </div>
                            </div>
                        </div>
                    </div>
                    <input class="carousel-open" type="radio" id="carousel-2" name="carousel" aria-hidden="true" hidden="">
                    <div class="items-center justify-center block h-full carousel-item">
                        <div class="relative flex flex-col items-center justify-center w-full mx-auto shadow-xl lg:flex-row lg:max-w-4xl rounded-xl bg-gray-100 dark:bg-gray-800">
                            <div class="w-full lg:w-1/2">
                                <img class="w-full h-full bg-center bg-cover object-cover rounded-lg" src="https://picsum.photos/seed/picsum/1920/1080">
                            </div>
                            <div class="w-full px-6 py-12 lg:w-1/2">
                                <h2 class="text-gray-800 dark:text-gray-200 text-3xl font-semibold">Heading</h2>
                                <p class="mt-4 text-gray-600 dark:text-gray-400 text-sm leading-relaxed">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nesciunt illo earum quod iste illum nobis.</p>
                                <div class="mt-8">
                                    <button class="text-indigo-500 dark:text-indigo-400 font-medium">Read More</button>
                                </div>
                            </div>
                        </div>
                    </div>
                    <input class="carousel-open" type="radio" id="carousel-3" name="carousel" aria-hidden="true" hidden="">
                    <div class="items-center justify-center block h-full carousel-item">
                        <div class="relative flex flex-col items-center justify-center w-full mx-auto shadow-xl lg:flex-row lg:max-w-4xl rounded-xl bg-gray-100 dark:bg-gray-800">
                            <div class="w-full lg:w-1/2">
                                <img class="w-full h-full bg-center bg-cover object-cover rounded-lg" src="https://picsum.photos/seed/picsum/1920/1080">
                            </div>
                            <div class="w-full px-6 py-12 lg:w-1/2">
                                <h2 class="text-gray-800 dark:text-gray-200 text-3xl font-semibold">Heading</h2>
                                <p class="mt-4 text-gray-600 dark:text-gray-400 text-sm leading-relaxed">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nesciunt illo earum quod iste illum nobis.</p>
                                <div class="mt-8">
                                    <button class="text-indigo-500 dark:text-indigo-400 font-medium">Read More</button>
                                </div>
                            </div>
                        </div>
                    </div>
                    <label for="carousel-3" class="carousel-control prev control-1">
                        <button class="p-2 text-gray-800 rounded-full shadow dark:text-gray-300 bg-gray-100 dark:bg-gray-700 focus:outline-none">
                          <svg class="w-5 h-5" fill="none" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"></path>
                          </svg>
                        </button>
                    </label>
                    <label for="carousel-2" class="carousel-control next control-1">
                        <button class="p-2 text-gray-800 rounded-full shadow dark:text-gray-300 bg-gray-100 dark:bg-gray-700 focus:outline-none">
                          
                            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg>
                        </button>
                    </label>
                    <label for="carousel-1" class="carousel-control prev control-2">
                         <button class="p-2 text-gray-800 rounded-full shadow dark:text-gray-300 bg-gray-100 dark:bg-gray-700 focus:outline-none">
                          <svg class="w-5 h-5" fill="none" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"></path>
                          </svg>
                        </button>
                    </label>
                    <label for="carousel-3" class="carousel-control next control-2">
                        <button class="p-2 text-gray-800 rounded-full shadow dark:text-gray-300 bg-gray-100 dark:bg-gray-700 focus:outline-none">
                          
                            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg>
                        </button>
                    </label>
                    <label for="carousel-2" class="carousel-control prev control-3">
                         <button class="p-2 text-gray-800 rounded-full shadow dark:text-gray-300 bg-gray-100 dark:bg-gray-700 focus:outline-none">
                          <svg class="w-5 h-5" fill="none" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"></path>
                          </svg>
                        </button>
                    </label>
                    <label for="carousel-1" class="carousel-control next control-3">
                        <button class="p-2 text-gray-800 rounded-full shadow dark:text-gray-300 bg-gray-100 dark:bg-gray-700 focus:outline-none">
                          
                            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg>
                        </button>
                    </label>
                </div>
            </div>
        </div>
    </div>
  <style>
    .carousel-open:checked + .carousel-item {
      position: static;
      opacity: 100;
    }

    .carousel-item {
      -webkit-transition: opacity 0.6s ease-out;
      transition: opacity 0.6s ease-out;
      visibility: hidden;
      opacity: 0;
      position: absolute;
      width: 100%;
      height: 100%;
      z-index: 0;
    }

    .carousel-open:checked ~ .carousel-item:not(.carousel-item) {
      opacity: 0;
    }


    .carousel-open:checked ~ .control-1,
    .carousel-open:checked ~ .control-2,
    .carousel-open:checked ~ .control-3 {
      display: flex;
    }

    .carousel-control {
      z-index: 1;      
      display: none;
      align-items: center;
      justify-content: center;
      position: absolute;
      top: 0;
      bottom: 0;
      width: 10%;
      cursor: pointer;
      opacity: 50%;
      transition: opacity 150ms ease-in-out;
    }


    .carousel-control:hover {
      opacity: 100%;
    }

    .control-1,
    .control-2,
    .control-3 {
      width: 5vh;
      height: 5vh;
      border-radius: 50%;
      position: absolute;
    }
  
     .control-1 {
        top: 45%;
        left: 5%;
      }

      .control-2 {
        top: 45%;
        right: 5%;
      }
  
      .control-3 {
        top: 45%;
        left: 5%;
    }
  </style>
</section>

Carousel Slider 구성 요소

대시보드용으로 설계된 반응형 캐러셀 슬라이더 구성 요소로, 다크 모드를 지원하는 마이크로 인터랙션과 생생한 색상을 제공합니다.

미리보기 열기

                <div class="relative w-full max-w-screen-lg mx-auto">
    <div class="overflow-hidden">
        <div class="flex transition-transform duration-300 ease-in-out" style="transform: translateX(0);"><!-- Previous Transform: translateX(-100%) -->
            <div class="flex-shrink-0 w-full">
                <img src="https://picsum.photos/800/400?random=1" alt="Slide 1" class="w-full h-auto rounded-lg" />
                <div class="p-4 text-center bg-white dark:bg-gray-800 rounded-b-lg">
                    <h3 class="text-xl font-semibold text-blue-600 dark:text-blue-400">Slide 1 Title</h3>
                    <p class="text-gray-800 dark:text-gray-300">Description for slide 1.</p>
                </div>
            </div>
            <div class="flex-shrink-0 w-full">
                <img src="https://picsum.photos/800/400?random=2" alt="Slide 2" class="w-full h-auto rounded-lg" />
                <div class="p-4 text-center bg-white dark:bg-gray-800 rounded-b-lg">
                    <h3 class="text-xl font-semibold text-blue-600 dark:text-blue-400">Slide 2 Title</h3>
                    <p class="text-gray-800 dark:text-gray-300">Description for slide 2.</p>
                </div>
            </div>
            <div class="flex-shrink-0 w-full">
                <img src="https://picsum.photos/800/400?random=3" alt="Slide 3" class="w-full h-auto rounded-lg" />
                <div class="p-4 text-center bg-white dark:bg-gray-800 rounded-b-lg">
                    <h3 class="text-xl font-semibold text-blue-600 dark:text-blue-400">Slide 3 Title</h3>
                    <p class="text-gray-800 dark:text-gray-300">Description for slide 3.</p>
                </div>
            </div>
        </div>
    </div>
    <div class="absolute top-1/2 left-0 transform -translate-y-1/2">
        <button class="bg-white text-blue-600 dark:bg-gray-800 dark:text-blue-400 hover:scale-110 transition-transform duration-200 rounded-full p-2 shadow-md">
            &#10094;
        </button>
    </div>
    <div class="absolute top-1/2 right-0 transform -translate-y-1/2">
        <button class="bg-white text-blue-600 dark:bg-gray-800 dark:text-blue-400 hover:scale-110 transition-transform duration-200 rounded-full p-2 shadow-md">
            &#10095;
        </button>
    </div>
    <div class="flex justify-center mt-4 space-x-2">
        <button class="h-2 w-2 bg-blue-600 dark:bg-blue-400 rounded-full hover:animate-pulse"></button>
        <button class="h-2 w-2 bg-blue-600 dark:bg-blue-400 rounded-full hover:animate-pulse"></button>
        <button class="h-2 w-2 bg-blue-600 dark:bg-blue-400 rounded-full hover:animate-pulse"></button>
    </div>
</div>

Neumorphism E-commerce 캐러셀 슬라이더

Tailwind CSS를 사용하여 전자 상거래를 위한 어두운 테마를 지원하는 반응형 Neumorphic Carousel Slider Component입니다. 보색이 특징인 이 건물은 조화를 이룹니다. JavaScript는 사용되지 않습니다.

미리보기 열기

                <div class="flex items-center justify-center w-full h-full py-24 sm:py-8 px-4">
    <div class="w-full relative flex items-center justify-center">
        <button aria-label="slide backward" class="absolute z-30 left-0 ml-10 focus:outline-none focus:bg-gray-400 focus:ring-2 focus:ring-offset-2 focus:ring-gray-400 cursor-pointer" id="prev">
            <svg width="8" height="14" viewBox="0 0 8 14" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M7 1L1 7L7 13" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
            </svg>
        </button>
        <div class="w-full h-full mx-auto overflow-x-hidden overflow-y-hidden">
            <div id="slider" class="h-full flex lg:gap-8 md:gap-6 gap-14 items-center justify-start transition ease-out duration-700">
                <div class="flex flex-shrink-0 relative w-full sm:w-auto">
                    <img src="https://picsum.photos/500/500" alt="black chair and white table" class="object-cover object-center w-full" />
                    <div class="bg-gray-800 bg-opacity-30 absolute w-full h-full p-6">
                        <h2 class="lg:text-xl leading-4 text-base lg:leading-5 text-white">Casual Collection</h2>
                        <div class="flex h-full items-end pb-6">
                            <h3 class="text-xl lg:text-2xl font-semibold leading-5 lg:leading-6 text-white">20% off</h3>
                        </div>
                    </div>
                </div>
                <div class="flex flex-shrink-0 relative w-full sm:w-auto">
                    <img src="https://picsum.photos/500/500" alt="black chair and white table" class="object-cover object-center w-full" />
                    <div class="bg-gray-800 bg-opacity-30 absolute w-full h-full p-6">
                        <h2 class="lg:text-xl leading-4 text-base lg:leading-5 text-white">Casual Collection</h2>
                        <div class="flex h-full items-end pb-6">
                            <h3 class="text-xl lg:text-2xl font-semibold leading-5 lg:leading-6 text-white">20% off</h3>
                        </div>
                    </div>
                </div>
                <div class="flex flex-shrink-0 relative w-full sm:w-auto">
                    <img src="https://picsum.photos/500/500" alt="black chair and white table" class="object-cover object-center w-full" />
                    <div class="bg-gray-800 bg-opacity-30 absolute w-full h-full p-6">
                        <h2 class="lg:text-xl leading-4 text-base lg:leading-5 text-white">Casual Collection</h2>
                        <div class="flex h-full items-end pb-6">
                            <h3 class="text-xl lg:text-2xl font-semibold leading-5 lg:leading-6 text-white">20% off</h3>
                        </div>
                    </div>
                </div>
                <div class="flex flex-shrink-0 relative w-full sm:w-auto">
                    <img src="https://picsum.photos/500/500" alt="black chair and white table" class="object-cover object-center w-full" />
                    <div class="bg-gray-800 bg-opacity-30 absolute w-full h-full p-6">
                        <h2 class="lg:text-xl leading-4 text-base lg:leading-5 text-white">Casual Collection</h2>
                        <div class="flex h-full items-end pb-6">
                            <h3 class="text-xl lg:text-2xl font-semibold leading-5 lg:leading-6 text-white">20% off</h3>
                        </div>
                    </div>
                </div>
                 <div class="flex flex-shrink-0 relative w-full sm:w-auto">
                    <img src="https://picsum.photos/500/500" alt="black chair and white table" class="object-cover object-center w-full" />
                    <div class="bg-gray-800 bg-opacity-30 absolute w-full h-full p-6">
                        <h2 class="lg:text-xl leading-4 text-base lg:leading-5 text-white">Casual Collection</h2>
                        <div class="flex h-full items-end pb-6">
                            <h3 class="text-xl lg:text-2xl font-semibold leading-5 lg:leading-6 text-white">20% off</h3>
                        </div>
                    </div>
                </div>
                <div class="flex flex-shrink-0 relative w-full sm:w-auto">
                    <img src="https://picsum.photos/500/500" alt="black chair and white table" class="object-cover object-center w-full" />
                    <div class="bg-gray-800 bg-opacity-30 absolute w-full h-full p-6">
                        <h2 class="lg:text-xl leading-4 text-base lg:leading-5 text-white">Casual Collection</h2>
                        <div class="flex h-full items-end pb-6">
                            <h3 class="text-xl lg:text-2xl font-semibold leading-5 lg:leading-6 text-white">20% off</h3>
                        </div>
                    </div>
                </div>
                <div class="flex flex-shrink-0 relative w-full sm:w-auto">
                    <img src="https://picsum.photos/500/500" alt="black chair and white table" class="object-cover object-center w-full" />
                    <div class="bg-gray-800 bg-opacity-30 absolute w-full h-full p-6">
                        <h2 class="lg:text-xl leading-4 text-base lg:leading-5 text-white">Casual Collection</h2>
                        <div class="flex h-full items-end pb-6">
                            <h3 class="text-xl lg:text-2xl font-semibold leading-5 lg:leading-6 text-white">20% off</h3>
                        </div>
                    </div>
                </div>
                <div class="flex flex-shrink-0 relative w-full sm:w-auto">
                    <img src="https://picsum.photos/500/500" alt="black chair and white table" class="object-cover object-center w-full" />
                    <div class="bg-gray-800 bg-opacity-30 absolute w-full h-full p-6">
                        <h2 class="lg:text-xl leading-4 text-base lg:leading-5 text-white">Casual Collection</h2>
                        <div class="flex h-full items-end pb-6">
                            <h3 class="text-xl lg:text-2xl font-semibold leading-5 lg:leading-6 text-white">20% off</h3>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <button aria-label="slide forward" class="absolute z-30 right-0 mr-10 focus:outline-none focus:bg-gray-400 focus:ring-2 focus:ring-offset-2 focus:ring-gray-400" id="next">
            <svg width="8" height="14" viewBox="0 0 8 14" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M1 1L7 7L1 13" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
            </svg>
        </button>
    </div>
</div>

카테고리