データテーブルコンポーネント
Tailwind CSS を使用して Neumorphism スタイルで設計されたレスポンシブ データ テーブル コンポーネントで、ダーク テーマのサポートとランダムなプレースホルダー イメージが特徴です。
HTMLコード
<div class="container mx-auto p-4">
<div class="bg-white dark:bg-gray-800 shadow-2xl rounded-lg p-6 transition ease-in-out duration-300">
<h2 class="text-2xl font-semibold text-gray-800 dark:text-gray-200 mb-4">User Data Table</h2>
<table class="min-w-full bg-white dark:bg-gray-900 rounded-lg shadow-lg">
<thead>
<tr class="w-full bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300 text-sm">
<th class="py-3 px-4 text-left">#</th>
<th class="py-3 px-4 text-left">Avatar</th>
<th class="py-3 px-4 text-left">Name</th>
<th class="py-3 px-4 text-left">Email</th>
<th class="py-3 px-4 text-left">Phone</th>
</tr>
</thead>
<tbody>
<tr class="hover:bg-gray-100 dark:hover:bg-gray-700">
<td class="py-2 px-4 border-b">1</td>
<td class="py-2 px-4 border-b"><img src="https://picsum.photos/40" alt="Avatar" class="rounded-full"/></td>
<td class="py-2 px-4 border-b">John Doe</td>
<td class="py-2 px-4 border-b">[email protected]</td>
<td class="py-2 px-4 border-b">(123) 456-7890</td>
</tr>
<tr class="hover:bg-gray-100 dark:hover:bg-gray-700">
<td class="py-2 px-4 border-b">2</td>
<td class="py-2 px-4 border-b"><img src="https://picsum.photos/40" alt="Avatar" class="rounded-full"/></td>
<td class="py-2 px-4 border-b">Jane Smith</td>
<td class="py-2 px-4 border-b">[email protected]</td>
<td class="py-2 px-4 border-b">(321) 654-0987</td>
</tr>
<tr class="hover:bg-gray-100 dark:hover:bg-gray-700">
<td class="py-2 px-4 border-b">3</td>
<td class="py-2 px-4 border-b"><img src="https://picsum.photos/40" alt="Avatar" class="rounded-full"/></td>
<td class="py-2 px-4 border-b">Mike Johnson</td>
<td class="py-2 px-4 border-b">[email protected]</td>
<td class="py-2 px-4 border-b">(456) 789-0123</td>
</tr>
</tbody>
</table>
</div>
</div>関連コンポーネント
データテーブルコンポーネント
アース トーン カラー、マイクロ インタラクション、ダーク モードのサポートを備えたシンプルなデータ テーブル コンポーネントで、ソーシャル メディア インターフェイスに適しています。
Brutalist_ECommerce_Table
eコマース向けのブルータリズムスタイルのレスポンシブデータテーブルコンポーネントで、ハイコントラスト、補色スキーム(イエロー/パープル)、ダークモードのサポートを特長としています。商品リストや注文管理用に設計されています。