ユーザーメンションコンポーネント
シンプルでミニマリストのユーザーは、ブログやコンテンツ消費のコンポーネントについて言及しており、ダークテーマをサポートするレスポンシブデザインが特徴です。
HTMLコード
<div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md">
<h2 class="text-xl font-semibold text-gray-800 dark:text-gray-100">User Mentions</h2>
<ul class="mt-4 space-y-4">
<li class="flex items-center space-x-3">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full">
<div>
<h3 class="text-lg font-medium text-gray-700 dark:text-gray-300">John Doe</h3>
<p class="text-gray-500 dark:text-gray-400">@john_doe</p>
</div>
</li>
<li class="flex items-center space-x-3">
<img src="https://randomuser.me/api/portraits/women/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full">
<div>
<h3 class="text-lg font-medium text-gray-700 dark:text-gray-300">Jane Smith</h3>
<p class="text-gray-500 dark:text-gray-400">@jane_smith</p>
</div>
</li>
<li class="flex items-center space-x-3">
<img src="https://randomuser.me/api/portraits/men/2.jpg" alt="User Avatar" class="w-10 h-10 rounded-full">
<div>
<h3 class="text-lg font-medium text-gray-700 dark:text-gray-300">Mike Johnson</h3>
<p class="text-gray-500 dark:text-gray-400">@mike_johnson</p>
</div>
</li>
</ul>
<div class="mt-6">
<button class="bg-blue-500 text-white rounded-lg py-2 px-4 hover:bg-blue-600 focus:outline-none focus:ring focus:ring-blue-300 dark:bg-blue-700 dark:hover:bg-blue-800">View More</button>
</div>
</div>関連コンポーネント
ユーザーメンションコンポーネント
ブルータリズムスタイルでデザインされたシンプルなユーザーメンションコンポーネントで、グレースケールの配色で、ビジネスや企業のWebサイトに適しています。アバターを使用したユーザーメンションが含まれ、ダークテーマのサポートにより応答性があります。