ブルータリズムデータテーブル
ブルータリズムデザインのレスポンシブデータテーブルコンポーネントで、ダークモードのサポートとホバー効果を備えています。
HTMLコード
<div class="overflow-x-auto bg-white dark:bg-black text-black dark:text-white border-4 border-black dark:border-white">
<table class="min-w-full table-auto">
<thead>
<tr>
<th class="px-4 py-2 border-b-4 border-black dark:border-white text-left text-xs font-bold uppercase">Name</th>
<th class="px-4 py-2 border-b-4 border-black dark:border-white text-left text-xs font-bold uppercase">Title</th>
<th class="px-4 py-2 border-b-4 border-black dark:border-white text-left text-xs font-bold uppercase">Status</th>
<th class="px-4 py-2 border-b-4 border-black dark:border-white text-left text-xs font-bold uppercase">Role</th>
<th class="px-4 py-2 border-b-4 border-black dark:border-white text-left text-xs font-bold uppercase">Action</th>
</tr>
</thead>
<tbody>
<tr class="hover:bg-gray-200 dark:hover:bg-gray-700">
<td class="px-4 py-2 border-b border-black dark:border-white flex items-center">
<img class="h-10 w-10 rounded-full mr-2 object-cover" src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar">
John Doe
</td>
<td class="px-4 py-2 border-b border-black dark:border-white">Software Engineer</td>
<td class="px-4 py-2 border-b border-black dark:border-white">
<span class="inline-block bg-green-500 text-white text-xs px-2 rounded-full uppercase font-semibold">Active</span>
</td>
<td class="px-4 py-2 border-b border-black dark:border-white">Member</td>
<td class="px-4 py-2 border-b border-black dark:border-white">
<button class="bg-black dark:bg-white text-white dark:text-black px-4 py-2 text-xs font-bold uppercase border-2 border-black dark:border-white hover:bg-white dark:hover:bg-black hover:text-black dark:hover:text-white">Edit</button>
</td>
</tr>
<tr class="hover:bg-gray-200 dark:hover:bg-gray-700">
<td class="px-4 py-2 border-b border-black dark:border-white flex items-center">
<img class="h-10 w-10 rounded-full mr-2 object-cover" src="https://randomuser.me/api/portraits/women/1.jpg" alt="Avatar">
Jane Smith
</td>
<td class="px-4 py-2 border-b border-black dark:border-white">UI Designer</td>
<td class="px-4 py-2 border-b border-black dark:border-white">
<span class="inline-block bg-yellow-500 text-black text-xs px-2 rounded-full uppercase font-semibold">Pending</span>
</td>
<td class="px-4 py-2 border-b border-black dark:border-white">Admin</td>
<td class="px-4 py-2 border-b border-black dark:border-white">
<button class="bg-black dark:bg-white text-white dark:text-black px-4 py-2 text-xs font-bold uppercase border-2 border-black dark:border-white hover:bg-white dark:hover:bg-black hover:text-black dark:hover:text-white">Edit</button>
</td>
</tr>
<tr class="hover:bg-gray-200 dark:hover:bg-gray-700">
<td class="px-4 py-2 border-b border-black dark:border-white flex items-center">
<img class="h-10 w-10 rounded-full mr-2 object-cover" src="https://randomuser.me/api/portraits/men/2.jpg" alt="Avatar">
Peter Jones
</td>
<td class="px-4 py-2 border-b border-black dark:border-white">Data Analyst</td>
<td class="px-4 py-2 border-b border-black dark:border-white">
<span class="inline-block bg-red-500 text-white text-xs px-2 rounded-full uppercase font-semibold">Inactive</span>
</td>
<td class="px-4 py-2 border-b border-black dark:border-white">Member</td>
<td class="px-4 py-2 border-b border-black dark:border-white">
<button class="bg-black dark:bg-white text-white dark:text-black px-4 py-2 text-xs font-bold uppercase border-2 border-black dark:border-white hover:bg-white dark:hover:bg-black hover:text-black dark:hover:text-white">Edit</button>
</td>
</tr>
</tbody>
</table>
</div>関連コンポーネント
データテーブル
マテリアルデザインスタイルを備えたレスポンシブデータテーブルコンポーネントで、ダークモードとJavaScriptなしのレスポンシブ動作をサポートしています。デモ用のプレースホルダー画像が含まれています。
データテーブルコンポーネント
Skeuomorphic スタイルでデザインされたレスポンシブ データ テーブル コンポーネントで、Tailwind CSS を使用したダーク テーマのサポートを備えています。