データテーブルコンポーネント
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>関連コンポーネント
レトロデータグリッド
Tailwind CSSを使用してレトロ/ビンテージ80年代/90年代の美学でスタイル化されたレスポンシブデータテーブルコンポーネント。ブロック状のデザイン、鮮やかな色のアクセント(ライトモードではパープル/オレンジ、ダークモードではグリーン/ネオン)、ノスタルジックなテック感を演出する等幅フォントが特徴です。このテーブルには、個別のヘッダーと行のスタイル設定、アバターやステータスバッジなどの境界線付きの要素が含まれ、CSSによるダークモードがサポートされています。プレースホルダーデータには、ユーザーアバター、連絡先情報、ステータスバッジ、ロール、および参加日が含まれます。テーブルは、応答性を向上させるために、小さな画面で水平方向にスクロールできます。
RetroVintageDataTable (レトロビンテージデータテーブル)
ダークモードをサポートするTailwind CSSを使用したレスポンシブなレトロ/ビンテージスタイルのデータテーブルコンポーネント。
ArtDecoCryptoDataテーブル
アールデコにインスパイアされた幾何学模様と類似の配色で設計された、暗号通貨/ブロックチェーンアプリケーション用のシンプルで応答性の高いデータテーブルコンポーネント。ダークモードのサポートが含まれています。