CCHub Logo CCHub Tailwind Collection
구성 요소 캐러셀 슬라이더 다크 모드 캐러셀 슬라이더 구성 요소

다크 모드 캐러셀 슬라이더 구성 요소

다크 모드 캐러셀 슬라이더 컴포넌트는 Tailwind CSS를 사용하여 반응형 효과와 어두운 테마를 지원합니다.

미리 보기

HTML 코드 

<section class="dark:bg-gray-900">
  <div class="container px-6 py-10 mx-auto">
    <div class="mt-8 lg:-mx-6 lg:flex lg:items-center">
      <img class="object-cover w-full lg:mx-6 lg:w-1/2 rounded-xl h-72 lg:h-96" src="https://images.unsplash.com/photo-1590283603385-17ffb3a7f29f?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxwaG90by1yZWxhdGVkfDV8fHxlbnwwfHx8&auto=format&fit=crop&w=500&q=60" alt="">

      <div class="mt-6 lg:w-1/2 lg:mt-0 lg:mx-6">
        <p class="text-sm text-blue-500 uppercase">category</p>

        <a href="#" class="block mt-4 text-2xl font-semibold text-gray-800 dark:text-white md:text-3xl">
          All the features you want to know
        </a>

        <p class="mt-3 text-sm text-gray-500 dark:text-gray-300 md:text-sm">
          Lorem ipsum dolor sir amet consectetur adipisicing elit. Beatae labore, praesentium excepturi. Distinctio nostrum perferendis consectetur eligendi, maiores ipsum fastidius, non sequi.
        </p>

        <a href="#" class="inline-block mt-2 text-blue-500 dark:text-blue-400 underline">
          Read more
        </a>

        <div class="flex items-center mt-6">
          <img class="object-cover object-center rounded-full w-10 h-10" src="https://randomuser.me/api/portraits/men/54.jpg" alt="">

          <div class="mx-4">
            <h1 class="text-sm text-gray-700 dark:text-gray-200">Robert John</h1>
            <p class="text-sm text-gray-500 ">Lead Developer</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

관련 구성 요소

Neumorphism E-commerce 캐러셀 슬라이더

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

열다

Carousel Slider 구성 요소

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

열다

Carousel Slider 구성 요소

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

열다