CCHub Logo CCHub Tailwind Collection
コンポーネント データテーブル データテーブルコンポーネント

データテーブルコンポーネント

Skeuomorphic スタイルでデザインされたレスポンシブ データ テーブル コンポーネントで、Tailwind CSS を使用したダーク テーマのサポートを備えています。

プレビュー

HTMLコード 

<div class="bg-gray-100 dark:bg-gray-800 p-6 rounded-lg shadow-md max-w-3xl mx-auto mt-10">
    <h2 class="text-2xl font-bold mb-4 text-gray-800 dark:text-white">User Data Table</h2>
    <div class="overflow-x-auto">
        <table class="min-w-full bg-white dark:bg-gray-900 shadow-lg rounded-lg">
            <thead class="bg-gray-200 dark:bg-gray-700">
                <tr>
                    <th class="py-3 px-4 text-left text-sm font-medium text-gray-600 dark:text-gray-300">Avatar</th>
                    <th class="py-3 px-4 text-left text-sm font-medium text-gray-600 dark:text-gray-300">Name</th>
                    <th class="py-3 px-4 text-left text-sm font-medium text-gray-600 dark:text-gray-300">Email</th>
                    <th class="py-3 px-4 text-left text-sm font-medium text-gray-600 dark:text-gray-300">Status</th>
                </tr>
            </thead>
            <tbody class="bg-white dark:bg-gray-800">
                <tr class="hover:bg-gray-100 dark:hover:bg-gray-700">
                    <td class="py-3 px-4"><img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/men/32.jpg" alt="Avatar"></td>
                    <td class="py-3 px-4 text-gray-800 dark:text-gray-200">John Doe</td>
                    <td class="py-3 px-4 text-gray-600 dark:text-gray-400">[email protected]</td>
                    <td class="py-3 px-4"><span class="bg-green-500 text-white py-1 px-2 rounded-full text-xs">Active</span></td>
                </tr>
                <tr class="hover:bg-gray-100 dark:hover:bg-gray-700">
                    <td class="py-3 px-4"><img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/women/44.jpg" alt="Avatar"></td>
                    <td class="py-3 px-4 text-gray-800 dark:text-gray-200">Jane Smith</td>
                    <td class="py-3 px-4 text-gray-600 dark:text-gray-400">[email protected]</td>
                    <td class="py-3 px-4"><span class="bg-red-500 text-white py-1 px-2 rounded-full text-xs">Inactive</span></td>
                </tr>
                <tr class="hover:bg-gray-100 dark:hover:bg-gray-700">
                    <td class="py-3 px-4"><img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar"></td>
                    <td class="py-3 px-4 text-gray-800 dark:text-gray-200">Bob Johnson</td>
                    <td class="py-3 px-4 text-gray-600 dark:text-gray-400">[email protected]</td>
                    <td class="py-3 px-4"><span class="bg-green-500 text-white py-1 px-2 rounded-full text-xs">Active</span></td>
                </tr>
            </tbody>
        </table>
    </div>
    <div class="mt-4 text-center">
        <img class="mx-auto" src="https://picsum.photos/600/200" alt="Random placeholder">
    </div>
</div>

関連コンポーネント

Cyberpunk_Fashion_Data_Table

サイバーパンクの美学、落ち着いた配色、ネオンのアクセントを備えたレスポンシブデータテーブルで、ファッションや美容製品のリスティングに適しており、ダークモードのサポートとインタラクティブなホバー効果が特徴です。

開ける

Brutalist_ECommerce_Table

eコマース向けのブルータリズムスタイルのレスポンシブデータテーブルコンポーネントで、ハイコントラスト、補色スキーム(イエロー/パープル)、ダークモードのサポートを特長としています。商品リストや注文管理用に設計されています。

開ける

データテーブルコンポーネント

Glassmorphismデータテーブルコンポーネントは、ポートフォリオの鮮やかな色で、ダークモードのサポートで応答性があります。JavaScriptは必要なく、Tailwind CSSを使用したHTMLのみ。

開ける