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

탭 구성 요소

전자 상거래 애플리케이션을 위한 스큐어모픽 스타일로 설계된 반응형 탭 구성 요소로, 파스텔 색 구성표와 Tailwind CSS를 사용합니다.

미리 보기

HTML 코드 

<div class="max-w-3xl mx-auto p-4">
    <h2 class="text-2xl font-semibold mb-4">Product Categories</h2>
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg border border-gray-300 dark:border-gray-700">
        <div class="flex border-b border-gray-200 dark:border-gray-600">
            <button class="flex-1 py-3 text-center text-gray-700 dark:text-gray-200 font-semibold rounded-t-lg focus:outline-none focus:ring-2 focus:ring-indigo-500 dark:focus:ring-indigo-400">
                <span>Electronics</span>
            </button>
            <button class="flex-1 py-3 text-center text-gray-700 dark:text-gray-200 font-semibold rounded-t-lg focus:outline-none focus:ring-2 focus:ring-indigo-500 dark:focus:ring-indigo-400">
                <span>Clothing</span>
            </button>
            <button class="flex-1 py-3 text-center text-gray-700 dark:text-gray-200 font-semibold rounded-t-lg focus:outline-none focus:ring-2 focus:ring-indigo-500 dark:focus:ring-indigo-400">
                <span>Home & Kitchen</span>
            </button>
        </div>
        <div class="p-4">
            <div class="tab-content hidden">
                <h3 class="text-xl font-semibold">Electronics</h3>
                <img src="https://picsum.photos/300/200?random=1" alt="Electronics" class="rounded-lg mb-4">
                <p class="text-gray-600 dark:text-gray-400">Latest gadgets and devices for your tech needs.</p>
            </div>
            <div class="tab-content hidden">
                <h3 class="text-xl font-semibold">Clothing</h3>
                <img src="https://picsum.photos/300/200?random=2" alt="Clothing" class="rounded-lg mb-4">
                <p class="text-gray-600 dark:text-gray-400">Trendy and comfortable apparel for all occasions.</p>
            </div>
            <div class="tab-content hidden">
                <h3 class="text-xl font-semibold">Home & Kitchen</h3>
                <img src="https://picsum.photos/300/200?random=3" alt="Home & Kitchen" class="rounded-lg mb-4">
                <p class="text-gray-600 dark:text-gray-400">Quality products to enhance your living spaces.</p>
            </div>
        </div>
    </div>
</div>

관련 구성 요소

산업VibrantTabs

복잡하고 생동감 넘치는 산업 테마의 탭 구성 요소로, 다중 공급업체 마켓플레이스에 적합하며, 노출된 요소, 원료 미학 및 높은 채도의 색상을 특징으로 합니다. 다크 모드 지원으로 완벽하게 반응합니다.

열다

GlassyGrayscale탭

Glassmorphism Grayscale Simple Dashboard Tabs 다크 모드를 지원하는 구성 요소

열다

Manufacturing_Industrial_Grayscale_Paper_Tabs

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

열다