CCHub Logo CCHub Tailwind Collection
구성 요소 데이터 테이블 데이터 테이블 구성 요소

데이터 테이블 구성 요소

레트로/빈티지 스타일을 테마로 한 반응형 데이터 테이블 구성 요소로, Tailwind CSS로 디자인되어 다크 모드를 지원하고 80/90년대의 향수를 불러일으키는 디자인 요소를 특징으로 합니다.

미리 보기

HTML 코드 

<div class="overflow-x-auto bg-white dark:bg-gray-800 p-4 rounded-lg shadow-lg">
    <h2 class="text-2xl font-bold text-center mb-4 text-gray-800 dark:text-gray-200">Retro Data Table</h2>
    <table class="min-w-full border-collapse border border-gray-300 dark:border-gray-600">
        <thead class="bg-gray-200 dark:bg-gray-700">
            <tr>
                <th class="border border-gray-300 dark:border-gray-600 p-2 text-left text-gray-800 dark:text-gray-200">#</th>
                <th class="border border-gray-300 dark:border-gray-600 p-2 text-left text-gray-800 dark:text-gray-200">Name</th>
                <th class="border border-gray-300 dark:border-gray-600 p-2 text-left text-gray-800 dark:text-gray-200">Email</th>
                <th class="border border-gray-300 dark:border-gray-600 p-2 text-left text-gray-800 dark:text-gray-200">Avatar</th>
            </tr>
        </thead>
        <tbody class="bg-white dark:bg-gray-800">
            <tr class="border-b border-gray-300 dark:border-gray-600 hover:bg-gray-100 dark:hover:bg-gray-700">
                <td class="border border-gray-300 dark:border-gray-600 p-2">1</td>
                <td class="border border-gray-300 dark:border-gray-600 p-2">John Doe</td>
                <td class="border border-gray-300 dark:border-gray-600 p-2">[email protected]</td>
                <td class="border border-gray-300 dark:border-gray-600 p-2"><img class="rounded-full w-10 h-10" src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar"></td>
            </tr>
            <tr class="border-b border-gray-300 dark:border-gray-600 hover:bg-gray-100 dark:hover:bg-gray-700">
                <td class="border border-gray-300 dark:border-gray-600 p-2">2</td>
                <td class="border border-gray-300 dark:border-gray-600 p-2">Jane Smith</td>
                <td class="border border-gray-300 dark:border-gray-600 p-2">[email protected]</td>
                <td class="border border-gray-300 dark:border-gray-600 p-2"><img class="rounded-full w-10 h-10" src="https://randomuser.me/api/portraits/women/1.jpg" alt="Avatar"></td>
            </tr>
            <tr class="border-b border-gray-300 dark:border-gray-600 hover:bg-gray-100 dark:hover:bg-gray-700">
                <td class="border border-gray-300 dark:border-gray-600 p-2">3</td>
                <td class="border border-gray-300 dark:border-gray-600 p-2">Alice Johnson</td>
                <td class="border border-gray-300 dark:border-gray-600 p-2">[email protected]</td>
                <td class="border border-gray-300 dark:border-gray-600 p-2"><img class="rounded-full w-10 h-10" src="https://randomuser.me/api/portraits/women/2.jpg" alt="Avatar"></td>
            </tr>
            <tr class="border-b border-gray-300 dark:border-gray-600 hover:bg-gray-100 dark:hover:bg-gray-700">
                <td class="border border-gray-300 dark:border-gray-600 p-2">4</td>
                <td class="border border-gray-300 dark:border-gray-600 p-2">Bob Brown</td>
                <td class="border border-gray-300 dark:border-gray-600 p-2">[email protected]</td>
                <td class="border border-gray-300 dark:border-gray-600 p-2"><img class="rounded-full w-10 h-10" src="https://randomuser.me/api/portraits/men/2.jpg" alt="Avatar"></td>
            </tr>
        </tbody>
    </table>
</div>

관련 구성 요소

데이터 테이블 구성 요소

어스 톤 색상, 마이크로 상호 작용 및 다크 모드 지원을 제공하는 간단한 데이터 테이블 구성 요소로, 소셜 미디어 인터페이스에 적합합니다.

열다

Luxury_Premium_Manufacturing_Data_Table

제조/산업용으로 사용되는 복잡하고 반응이 빠른 데이터 테이블 구성 요소로, 흑백 색 구성표와 하나의 밝은 액센트 색상이 있는 고급스러운/프리미엄 디자인이 특징입니다. 다크 모드 지원 및 대화형 요소가 포함됩니다.

열다

Brutalism 데이터 테이블

비즈니스/기업 웹 사이트를 위한 유사한 색상을 가진 단순하고 잔인한 데이터 테이블 구성 요소입니다. 반응형이며 Tailwind CSS를 사용하여 다크 모드를 지원합니다.

열다