データテーブルコンポーネント
glassmorphism デザインのレスポンシブ データ テーブル コンポーネントで、半透明のすりガラスのような要素、ぼかし効果、ダーク モードのサポートが特徴です。
HTMLコード
<div class="container mx-auto my-10 p-5 bg-white bg-opacity-30 backdrop-blur-lg shadow-lg rounded-lg dark:bg-gray-800 dark:bg-opacity-30">
<h2 class="text-2xl font-bold text-gray-800 dark:text-white text-center">Data Tables</h2>
<div class="overflow-x-auto">
<table class="min-w-full divide-y divide-gray-300 dark:divide-gray-600">
<thead class="bg-gray-50 dark:bg-gray-700">
<tr>
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">#</th>
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Name</th>
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Email</th>
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Avatar</th>
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Profile Image</th>
</tr>
</thead>
<tbody class="bg-white divide-y divide-gray-200 dark:bg-gray-800 dark:divide-gray-600">
<tr>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-400">1</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-gray-300">John Doe</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-gray-300">[email protected]</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-gray-300"><img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar"></td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-gray-300"><img class="w-20 h-20 rounded-lg" src="https://picsum.photos/200/300" alt="Profile Image"></td>
</tr>
<tr>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-400">2</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-gray-300">Jane Smith</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-gray-300">[email protected]</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-gray-300"><img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/women/1.jpg" alt="Avatar"></td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-gray-300"><img class="w-20 h-20 rounded-lg" src="https://picsum.photos/201/300" alt="Profile Image"></td>
</tr>
<tr>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-400">3</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-gray-300">Michael Johnson</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-gray-300">[email protected]</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-gray-300"><img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/men/2.jpg" alt="Avatar"></td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-gray-300"><img class="w-20 h-20 rounded-lg" src="https://picsum.photos/202/300" alt="Profile Image"></td>
</tr>
</tbody>
</table>
</div>
</div>
<style>
/* Additional styles for glassmorphism */
body {
background: rgb(239, 246, 255);
background: linear-gradient(90deg, rgba(239, 246, 255, 1) 0%, rgba(255, 255, 255, 0.75) 100%);
}
.bg-white {
background: rgba(255, 255, 255, 0.9) !important;
}
/* Dark mode adjustments */
.dark .bg-white {
background: rgba(31, 41, 55, 0.7) !important;
}
</style>