HTMLコード
<div class="container mx-auto p-4 dark:bg-gray-900">
<div class="data-table bg-white shadow-lg rounded-lg overflow-hidden dark:bg-gray-800">
<table class="min-w-full leading-normal">
<thead>
<tr class="bg-gradient-to-br from-purple-500 to-pink-500 text-white">
<th
class="px-5 py-3 border-b-2 border-gray-200 text-left text-xs font-semibold uppercase tracking-wider dark:border-gray-700"
>
Name
</th>
<th
class="px-5 py-3 border-b-2 border-gray-200 text-left text-xs font-semibold uppercase tracking-wider dark:border-gray-700"
>
Role
</th>
<th
class="px-5 py-3 border-b-2 border-gray-200 text-left text-xs font-semibold uppercase tracking-wider dark:border-gray-700"
>
Status
</th>
<th
class="px-5 py-3 border-b-2 border-gray-200 text-left text-xs font-semibold uppercase tracking-wider dark:border-gray-700"
>
Created At
</th>
</tr>
</thead>
<tbody>
<tr class="hover:bg-gray-100 dark:hover:bg-gray-700">
<td
class="px-5 py-5 border-b border-gray-200 text-sm dark:border-gray-700 dark:text-white"
>
<div class="flex items-center">
<div class="flex-shrink-0 w-10 h-10">
<img
class="w-full h-full rounded-full"
src="https://randomuser.me/api/portraits/men/1.jpg"
alt=""
/>
</div>
<div class="ml-3">
<p class="text-gray-900 whitespace-no-wrap dark:text-white">
John Doe
</p>
</div>
</div>
</td>
<td
class="px-5 py-5 border-b border-gray-200 text-sm dark:border-gray-700 dark:text-white"
>
<p class="text-gray-900 whitespace-no-wrap dark:text-white">Admin</p>
</td>
<td
class="px-5 py-5 border-b border-gray-200 text-sm dark:border-gray-700 dark:text-white"
>
<span
class="relative inline-block px-3 py-1 font-semibold text-green-900 leading-tight"
>
<span
aria-hidden
class="absolute inset-0 bg-green-200 opacity-50 rounded-full"
></span>
<span class="relative">Active</span>
</span>
</td>
<td
class="px-5 py-5 border-b border-gray-200 text-sm dark:border-gray-700 dark:text-white"
>
<p class="text-gray-900 whitespace-no-wrap dark:text-white">
2023-10-27
</p>
</td>
</tr>
<tr class="hover:bg-gray-100 dark:hover:bg-gray-700">
<td
class="px-5 py-5 border-b border-gray-200 text-sm dark:border-gray-700 dark:text-white"
>
<div class="flex items-center">
<div class="flex-shrink-0 w-10 h-10">
<img
class="w-full h-full rounded-full"
src="https://randomuser.me/api/portraits/women/2.jpg"
alt=""
/>
</div>
<div class="ml-3">
<p class="text-gray-900 whitespace-no-wrap dark:text-white">
Jane Smith
</p>
</div>
</div>
</td>
<td
class="px-5 py-5 border-b border-gray-200 text-sm dark:border-gray-700 dark:text-white"
>
<p class="text-gray-900 whitespace-no-wrap dark:text-white">
Editor
</p>
</td>
<td
class="px-5 py-5 border-b border-gray-200 text-sm dark:border-gray-700 dark:text-white"
>
<span
class="relative inline-block px-3 py-1 font-semibold text-orange-900 leading-tight"
>
<span
aria-hidden
class="absolute inset-0 bg-orange-200 opacity-50 rounded-full"
></span>
<span class="relative">Pending</span>
</span>
</td>
<td
class="px-5 py-5 border-b border-gray-200 text-sm dark:border-gray-700 dark:text-white"
>
<p class="text-gray-900 whitespace-no-wrap dark:text-white">
2023-10-27
</p>
</td>
</tr>
<tr class="hover:bg-gray-100 dark:hover:bg-gray-700">
<td
class="px-5 py-5 border-b border-gray-200 text-sm dark:border-gray-700 dark:text-white"
>
<div class="flex items-center">
<div class="flex-shrink-0 w-10 h-10">
<img
class="w-full h-10 h-10 rounded-full"
src="https://randomuser.me/api/portraits/men/3.jpg"
alt=""
/>
</div>
<div class="ml-3">
<p class="text-gray-900 whitespace-no-wrap dark:text-white">
Peter Jones
</p>
</div>
</div>
</td>
<td
class="px-5 py-5 border-b border-gray-200 text-sm dark:border-gray-700 dark:text-white"
>
<p class="text-gray-900 whitespace-no-wrap dark:text-white">
Viewer
</p>
</td>
<td
class="px-5 py-5 border-b border-gray-200 text-sm dark:border-gray-700 dark:text-white"
>
<span
class="relative inline-block px-3 py-1 font-semibold text-red-900 leading-tight"
>
<span
aria-hidden
class="absolute inset-0 bg-red-200 opacity-50 rounded-full"
></span>
<span class="relative">Inactive</span>
</span>
</td>
<td
class="px-5 py-5 border-b border-gray-200 text-sm dark:border-gray-700 dark:text-white"
>
<p class="text-gray-900 whitespace-no-wrap dark:text-white">
2023-10-27
</p>
</td>
</tr>
</tbody>
</table>
</div>
</div>関連コンポーネント
レトロデータグリッド
Tailwind CSSを使用してレトロ/ビンテージ80年代/90年代の美学でスタイル化されたレスポンシブデータテーブルコンポーネント。ブロック状のデザイン、鮮やかな色のアクセント(ライトモードではパープル/オレンジ、ダークモードではグリーン/ネオン)、ノスタルジックなテック感を演出する等幅フォントが特徴です。このテーブルには、個別のヘッダーと行のスタイル設定、アバターやステータスバッジなどの境界線付きの要素が含まれ、CSSによるダークモードがサポートされています。プレースホルダーデータには、ユーザーアバター、連絡先情報、ステータスバッジ、ロール、および参加日が含まれます。テーブルは、応答性を向上させるために、小さな画面で水平方向にスクロールできます。