ブルータリズムデータテーブル
ビジネス/企業のWebサイト用の類似色を持つシンプルな残忍なデータテーブルコンポーネント。レスポンシブで、Tailwind CSSを使用したダークモードをサポートしています。
HTMLコード
<div class="container mx-auto p-4 bg-gray-100 dark:bg-gray-800">
<table class="min-w-full border-collapse border-spacing-0 shadow-xl">
<thead>
<tr class="bg-teal-500 dark:bg-teal-700 text-white">
<th class="border border-gray-700 dark:border-gray-600 p-4 text-left">Name</th>
<th class="border border-gray-700 dark:border-gray-600 p-4 text-left">Title</th>
<th class="border border-gray-700 dark:border-gray-600 p-4 text-left">Status</th>
<th class="border border-gray-700 dark:border-gray-600 p-4 text-left">Role</th>
</tr>
</thead>
<tbody>
<tr class="bg-teal-200 dark:bg-teal-600 text-gray-900 dark:text-white">
<td class="border border-gray-700 dark:border-gray-600 p-4">John Doe</td>
<td class="border border-gray-700 dark:border-gray-600 p-4">Software Engineer</td>
<td class="border border-gray-700 dark:border-gray-600 p-4">Active</td>
<td class="border border-gray-700 dark:border-gray-600 p-4">Member</td>
</tr>
<tr class="bg-teal-300 dark:bg-teal-500 text-gray-900 dark:text-white">
<td class="border border-gray-700 dark:border-gray-600 p-4">Jane Smith</td>
<td class="border border-gray-700 dark:border-gray-600 p-4">UI/UX Designer</td>
<td class="border border-gray-700 dark:border-gray-600 p-4">Active</td>
<td class="border border-gray-700 dark:border-gray-600 p-4">Member</td>
</tr>
<tr class="bg-teal-200 dark:bg-teal-600 text-gray-900 dark:text-white">
<td class="border border-gray-700 dark:border-gray-600 p-4">Peter Jones</td>
<td class="border border-gray-700 dark:border-gray-600 p-4">Product Manager</td>
<td class="border border-gray-700 dark:border-gray-600 p-4">Inactive</td>
<td class="border border-gray-700 dark:border-gray-600 p-4">Admin</td>
</tr>
</tbody>
</table>
</div>関連コンポーネント
レトロデータグリッド
Tailwind CSSを使用してレトロ/ビンテージ80年代/90年代の美学でスタイル化されたレスポンシブデータテーブルコンポーネント。ブロック状のデザイン、鮮やかな色のアクセント(ライトモードではパープル/オレンジ、ダークモードではグリーン/ネオン)、ノスタルジックなテック感を演出する等幅フォントが特徴です。このテーブルには、個別のヘッダーと行のスタイル設定、アバターやステータスバッジなどの境界線付きの要素が含まれ、CSSによるダークモードがサポートされています。プレースホルダーデータには、ユーザーアバター、連絡先情報、ステータスバッジ、ロール、および参加日が含まれます。テーブルは、応答性を向上させるために、小さな画面で水平方向にスクロールできます。