データテーブルコンポーネント
Skeuomorphic スタイルでデザインされたレスポンシブ データ テーブル コンポーネントで、Tailwind CSS を使用したダーク テーマのサポートを備えています。
HTMLコード
<div class="bg-gray-100 dark:bg-gray-800 p-6 rounded-lg shadow-md max-w-3xl mx-auto mt-10">
<h2 class="text-2xl font-bold mb-4 text-gray-800 dark:text-white">User Data Table</h2>
<div class="overflow-x-auto">
<table class="min-w-full bg-white dark:bg-gray-900 shadow-lg rounded-lg">
<thead class="bg-gray-200 dark:bg-gray-700">
<tr>
<th class="py-3 px-4 text-left text-sm font-medium text-gray-600 dark:text-gray-300">Avatar</th>
<th class="py-3 px-4 text-left text-sm font-medium text-gray-600 dark:text-gray-300">Name</th>
<th class="py-3 px-4 text-left text-sm font-medium text-gray-600 dark:text-gray-300">Email</th>
<th class="py-3 px-4 text-left text-sm font-medium text-gray-600 dark:text-gray-300">Status</th>
</tr>
</thead>
<tbody class="bg-white dark:bg-gray-800">
<tr class="hover:bg-gray-100 dark:hover:bg-gray-700">
<td class="py-3 px-4"><img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/men/32.jpg" alt="Avatar"></td>
<td class="py-3 px-4 text-gray-800 dark:text-gray-200">John Doe</td>
<td class="py-3 px-4 text-gray-600 dark:text-gray-400">[email protected]</td>
<td class="py-3 px-4"><span class="bg-green-500 text-white py-1 px-2 rounded-full text-xs">Active</span></td>
</tr>
<tr class="hover:bg-gray-100 dark:hover:bg-gray-700">
<td class="py-3 px-4"><img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/women/44.jpg" alt="Avatar"></td>
<td class="py-3 px-4 text-gray-800 dark:text-gray-200">Jane Smith</td>
<td class="py-3 px-4 text-gray-600 dark:text-gray-400">[email protected]</td>
<td class="py-3 px-4"><span class="bg-red-500 text-white py-1 px-2 rounded-full text-xs">Inactive</span></td>
</tr>
<tr class="hover:bg-gray-100 dark:hover:bg-gray-700">
<td class="py-3 px-4"><img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar"></td>
<td class="py-3 px-4 text-gray-800 dark:text-gray-200">Bob Johnson</td>
<td class="py-3 px-4 text-gray-600 dark:text-gray-400">[email protected]</td>
<td class="py-3 px-4"><span class="bg-green-500 text-white py-1 px-2 rounded-full text-xs">Active</span></td>
</tr>
</tbody>
</table>
</div>
<div class="mt-4 text-center">
<img class="mx-auto" src="https://picsum.photos/600/200" alt="Random placeholder">
</div>
</div>関連コンポーネント
Luxury_Premium_Manufacturing_Data_Table
製造/工業用途向けの複雑で応答性の高いデータテーブルコンポーネントで、黒と白の配色と単一の明るいアクセントカラーを備えた高級/プレミアムデザインが特徴です。ダークモードのサポートとインタラクティブな要素が含まれています。
データテーブルコンポーネント
ドキュメント/Wiki サイト用のレスポンシブ データ テーブル コンポーネントで、ダーク モードのサポート、アーストーンの配色、セマンティック HTML が特徴です。複数の列、アクション、ページネーションを持つ複雑なインターフェイス向けに設計されています。
ヘルスケアデータテーブル
ヘルスケアアプリケーションに適した、企業の青い色調の応答性が高く、ミニマリストのデータテーブルコンポーネント。ダーク モードのサポート、検索、および改ページ位置の自動修正が含まれます。アクセシビリティのためにセマンティックHTMLを利用します。