データテーブルコンポーネント
レトロ/ビンテージスタイルをテーマにしたレスポンシブデータテーブルコンポーネントで、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>