データテーブルコンポーネント
スキューモーフィック スタイルで設計されたデータ テーブル コンポーネントで、応答性の高い効果を持つ現実世界の対応物を模倣し、ダーク テーマをサポートします。このテーブルには、ヘッダー、データを含む行が含まれ、プレースホルダー画像が使用されます。
HTMLコード
<div class="container mx-auto px-4 py-8">
<h2 class="text-2xl font-bold text-gray-800 dark:text-gray-100">Data Tables</h2>
<div class="overflow-x-auto shadow-lg rounded-lg">
<table class="min-w-full bg-white dark:bg-gray-800">
<thead class="bg-gray-200 dark:bg-gray-700">
<tr>
<th class="py-2 px-4 text-left text-gray-600 dark:text-gray-200">#</th>
<th class="py-2 px-4 text-left text-gray-600 dark:text-gray-200">Name</th>
<th class="py-2 px-4 text-left text-gray-600 dark:text-gray-200">Email</th>
<th class="py-2 px-4 text-left text-gray-600 dark:text-gray-200">Avatar</th>
</tr>
</thead>
<tbody>
<tr class="hover:bg-gray-100 dark:hover:bg-gray-600">
<td class="py-2 px-4 border-b dark:border-gray-600">1</td>
<td class="py-2 px-4 border-b dark:border-gray-600">John Doe</td>
<td class="py-2 px-4 border-b dark:border-gray-600">[email protected]</td>
<td class="py-2 px-4 border-b dark:border-gray-600">
<img src="https://i.pravatar.cc/150?img=1" alt="Avatar" class="rounded-full w-10 h-10" />
</td>
</tr>
<tr class="hover:bg-gray-100 dark:hover:bg-gray-600">
<td class="py-2 px-4 border-b dark:border-gray-600">2</td>
<td class="py-2 px-4 border-b dark:border-gray-600">Jane Smith</td>
<td class="py-2 px-4 border-b dark:border-gray-600">[email protected]</td>
<td class="py-2 px-4 border-b dark:border-gray-600">
<img src="https://i.pravatar.cc/150?img=2" alt="Avatar" class="rounded-full w-10 h-10" />
</td>
</tr>
<tr class="hover:bg-gray-100 dark:hover:bg-gray-600">
<td class="py-2 px-4 border-b dark:border-gray-600">3</td>
<td class="py-2 px-4 border-b dark:border-gray-600">Alice Johnson</td>
<td class="py-2 px-4 border-b dark:border-gray-600">[email protected]</td>
<td class="py-2 px-4 border-b dark:border-gray-600">
<img src="https://i.pravatar.cc/150?img=3" alt="Avatar" class="rounded-full w-10 h-10" />
</td>
</tr>
<tr class="hover:bg-gray-100 dark:hover:bg-gray-600">
<td class="py-2 px-4 border-b dark:border-gray-600">4</td>
<td class="py-2 px-4 border-b dark:border-gray-600">Bob Brown</td>
<td class="py-2 px-4 border-b dark:border-gray-600">[email protected]</td>
<td class="py-2 px-4 border-b dark:border-gray-600">
<img src="https://i.pravatar.cc/150?img=4" alt="Avatar" class="rounded-full w-10 h-10" />
</td>
</tr>
</tbody>
</table>
</div>
</div>
<style>
/* Dark Mode Styles */
@media (prefers-color-scheme: dark) {
body {
background-color: #1a202c;
color: #cbd5e0;
}
}
</style>