CCHub Logo CCHub Tailwind Collection
구성 요소 탭 탭 구성 요소

탭 구성 요소

Tailwind CSS 및 HTML을 사용하여 구현된 적당한 복잡성, 반응형 디자인 및 어두운 테마 지원을 갖춘 전자 상거래를 위한 미니멀하고 생생한 탭 구성 요소입니다.

미리 보기

HTML 코드 

<div class="w-full max-w-md mx-auto">
  <div class="flex border-b border-gray-200 dark:border-gray-700">
    <button class="flex-1 py-4 px-6 text-center text-gray-500 dark:text-gray-400 hover:text-blue-600 dark:hover:text-blue-400 focus:outline-none">
      Description
    </button>
    <button class="flex-1 py-4 px-6 text-center text-gray-500 dark:text-gray-400 hover:text-blue-600 dark:hover:text-blue-400 focus:outline-none border-b-2 border-blue-600 dark:border-blue-400">
      Reviews
    </button>
    <button class="flex-1 py-4 px-6 text-center text-gray-500 dark:text-gray-400 hover:text-blue-600 dark:hover:text-blue-400 focus:outline-none">
      Shipping
    </button>
  </div>
  <div class="mt-8">
    <!-- Content goes here based on the active tab -->
    <div class="text-gray-700 dark:text-gray-300">
      <!-- Reviews Content (Example) -->
      <h2 class="text-xl font-bold mb-4">Customer Reviews</h2>
      <div class="space-y-6">
        <div class="flex items-start space-x-4">
          <img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/men/32.jpg" alt="Avatar">
          <div>
            <p class="font-semibold">John Doe</p>
            <p class="text-sm text-gray-500 dark:text-gray-400">2 days ago</p>
            <p class="mt-2">This product is amazing! I highly recommend it.</p>
          </div>
        </div>
        <div class="flex items-start space-x-4">
          <img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/women/44.jpg" alt="Avatar">
          <div>
            <p class="font-semibold">Jane Smith</p>
            <p class="text-sm text-gray-500 dark:text-gray-400">4 days ago</p>
            <p class="mt-2">Great quality and fast shipping.</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

관련 구성 요소

탭 구성 요소

스큐어모픽 디자인, 아날로그 색 구성표 및 어두운 테마 지원을 갖춘 반응형 탭 구성 요소는 전문 비즈니스 웹사이트에 적합합니다. 구성 요소는 스타일링을 위해 Tailwind CSS를 사용하며 JavaScript를 포함하지 않습니다.

열다

Manufacturing_Industrial_Grayscale_Paper_Tabs

종이/인쇄에서 영감을 받은 디자인과 회색조 색 구성표를 갖춘 간단하고 반응이 빠른 탭 구성 요소로 제조 및 산업 응용 분야에 적합합니다. 다크 모드 지원이 포함됩니다.

열다

Skeuomorphic Tabs 컴포넌트

스큐어모피즘으로 스타일링된 반응형 탭 구성 요소로, Tailwind CSS를 활용하여 실제 디자인 요소를 모방합니다. 여기에는 어두운 테마 지원 및 자리 표시자 이미지가 포함됩니다.

열다