탭 구성 요소
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>