データテーブルコンポーネント
アース トーン カラー、マイクロ インタラクション、ダーク モードのサポートを備えたシンプルなデータ テーブル コンポーネントで、ソーシャル メディア インターフェイスに適しています。
HTMLコード
<div class="container mx-auto p-4">
<div class="bg-white dark:bg-gray-800 shadow rounded-lg overflow-hidden">
<table class="min-w-full leading-normal">
<thead>
<tr>
<th class="px-5 py-3 border-b-2 border-gray-200 dark:border-gray-700 bg-gray-100 dark:bg-gray-700 text-left text-xs font-semibold text-gray-600 dark:text-gray-300 uppercase tracking-wider">
User
</th>
<th class="px-5 py-3 border-b-2 border-gray-200 dark:border-gray-700 bg-gray-100 dark:bg-gray-700 text-left text-xs font-semibold text-gray-600 dark:text-gray-300 uppercase tracking-wider">
Status
</th>
<th class="px-5 py-3 border-b-2 border-gray-200 dark:border-gray-700 bg-gray-100 dark:bg-gray-700 text-left text-xs font-semibold text-gray-600 dark:text-gray-300 uppercase tracking-wider">
Joined
</th>
</tr>
</thead>
<tbody>
<tr class="hover:bg-gray-50 dark:hover:bg-gray-700 transition duration-150 ease-in-out">
<td class="px-5 py-5 border-b border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 text-sm">
<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/85.jpg"
alt="" />
</div>
<div class="ml-3">
<p class="text-gray-900 dark:text-white whitespace-no-wrap">
John Doe
</p>
</div>
</div>
</td>
<td class="px-5 py-5 border-b border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 text-sm">
<p class="text-gray-900 dark:text-white whitespace-no-wrap">
Active
</p>
</td>
<td class="px-5 py-5 border-b border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 text-sm">
<p class="text-gray-900 dark:text-white whitespace-no-wrap">
Jan 10, 2023
</p>
</td>
</tr>
<tr class="hover:bg-gray-50 dark:hover:bg-gray-700 transition duration-150 ease-in-out">
<td class="px-5 py-5 border-b border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 text-sm">
<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/45.jpg"
alt="" />
</div>
<div class="ml-3">
<p class="text-gray-900 dark:text-white whitespace-no-wrap">
Jane Smith
</p>
</div>
</div>
</td>
<td class="px-5 py-5 border-b border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 text-sm">
<p class="text-gray-900 dark:text-white whitespace-no-wrap">
Pending
</p>
</td>
<td class="px-5 py-5 border-b border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 text-sm">
<p class="text-gray-900 dark:text-white whitespace-no-wrap">
Feb 15, 2023
</p>
</td>
</tr>
<tr class="hover:bg-gray-50 dark:hover:bg-gray-700 transition duration-150 ease-in-out">
<td class="px-5 py-5 border-b border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 text-sm">
<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/60.jpg"
alt="" />
</div>
<div class="ml-3">
<p class="text-gray-900 dark:text-white whitespace-no-wrap">
Peter Jones
</p>
</div>
</div>
</td>
<td class="px-5 py-5 border-b border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 text-sm">
<p class="text-gray-900 dark:text-white whitespace-no-wrap">
Inactive
</p>
</td>
<td class="px-5 py-5 border-b border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 text-sm">
<p class="text-gray-900 dark:text-white whitespace-no-wrap">
Mar 20, 2023
</p>
</td>
</tr>
</tbody>
</table>
</div>
</div>関連コンポーネント
データテーブル
マテリアルデザインスタイルを備えたレスポンシブデータテーブルコンポーネントで、ダークモードとJavaScriptなしのレスポンシブ動作をサポートしています。デモ用のプレースホルダー画像が含まれています。
ブルータリズムデータテーブル
ビジネス/企業のWebサイト用の類似色を持つシンプルな残忍なデータテーブルコンポーネント。レスポンシブで、Tailwind CSSを使用したダークモードをサポートしています。