ユーザーメンションコンポーネント
複雑なユーザーが、ダークモードのサポートとトライアドカラースキームを備えたダッシュボード用に設計されたコンポーネントについて言及しています。
HTMLコード
<div class="bg-gray-800 dark:bg-gray-900 text-white p-6 rounded-lg shadow-lg">
<h2 class="text-2xl font-semibold mb-4">User Mentions</h2>
<div class="overflow-x-auto">
<table class="min-w-full divide-y divide-gray-700">
<thead class="bg-gray-700">
<tr>
<th class="px-6 py-3 text-left text-xs font-medium text-gray-400 uppercase tracking-wider">Avatar</th>
<th class="px-6 py-3 text-left text-xs font-medium text-gray-400 uppercase tracking-wider">Username</th>
<th class="px-6 py-3 text-left text-xs font-medium text-gray-400 uppercase tracking-wider">Mentioned At</th>
<th class="px-6 py-3 text-left text-xs font-medium text-gray-400 uppercase tracking-wider">Actions</th>
</tr>
</thead>
<tbody class="bg-gray-800 divide-y divide-gray-700">
<tr>
<td class="px-6 py-4 whitespace-nowrap">
<img class="h-10 w-10 rounded-full" src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar">
</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-white">@johndoe</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-400">2 hours ago</td>
<td class="px-6 py-4 whitespace-nowrap text-sm">
<button class="bg-blue-500 hover:bg-blue-600 text-white font-bold py-2 px-4 rounded">View</button>
</td>
</tr>
<tr>
<td class="px-6 py-4 whitespace-nowrap">
<img class="h-10 w-10 rounded-full" src="https://randomuser.me/api/portraits/women/44.jpg" alt="User Avatar">
</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-white">@janedoe</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-400">3 hours ago</td>
<td class="px-6 py-4 whitespace-nowrap text-sm">
<button class="bg-blue-500 hover:bg-blue-600 text-white font-bold py-2 px-4 rounded">View</button>
</td>
</tr>
<tr>
<td class="px-6 py-4 whitespace-nowrap">
<img class="h-10 w-10 rounded-full" src="https://randomuser.me/api/portraits/men/52.jpg" alt="User Avatar">
</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-white">@alexsmith</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-400">5 hours ago</td>
<td class="px-6 py-4 whitespace-nowrap text-sm">
<button class="bg-blue-500 hover:bg-blue-600 text-white font-bold py-2 px-4 rounded">View</button>
</td>
</tr>
</tbody>
</table>
</div>
</div>関連コンポーネント
ユーザーメンションコンポーネント
レトロビンテージのユーザーは、トライアドカラー、適度な複雑さ、応答性、およびダークモードのサポートを備えたeコマースのコンポーネントについて言及しています。JavaScript はありません。