ユーザーメンションコンポーネント
Tailwind CSS を使用して構築された、マイクロインタラクションで設計された、レスポンシブ効果とダークテーマのサポートを特徴とする User Mentions コンポーネント。
HTMLコード
<div class="bg-white dark:bg-gray-800 shadow-md rounded-lg p-4 transition duration-300 ease-in-out transform hover:scale-105">
<h2 class="text-lg font-semibold text-gray-800 dark:text-white mb-2">Mentions</h2>
<ul class="list-disc pl-5">
<li class="flex items-center mb-2 transition duration-200 ease-in-out hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg p-2">
<img src="https://randomuser.me/api/portraits/men/11.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-3">
<span class="text-gray-800 dark:text-white">@john_doe</span>
</li>
<li class="flex items-center mb-2 transition duration-200 ease-in-out hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg p-2">
<img src="https://randomuser.me/api/portraits/women/22.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-3">
<span class="text-gray-800 dark:text-white">@jane_doe</span>
</li>
<li class="flex items-center mb-2 transition duration-200 ease-in-out hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg p-2">
<img src="https://randomuser.me/api/portraits/men/33.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-3">
<span class="text-gray-800 dark:text-white">@mark_smith</span>
</li>
</ul>
<div class="mt-4">
<img src="https://picsum.photos/200/100" alt="Random Placeholder" class="rounded-lg shadow-lg transition duration-300 ease-in-out transform hover:scale-105">
</div>
</div>関連コンポーネント
ユーザーメンションコンポーネント
レスポンシブなユーザーが、Tailwind CSS を使用するビジネス Web サイト向けに設計された、ダーク テーマのサポートとマイクロインタラクションを備えたコンポーネントについて言及しています。
ユーザーメンションコンポーネント
複雑で3Dにインスパイアされたユーザーは、ファッション/美容ブランドに適した秋の色を持つコンポーネントについて言及しています。ユーザーのアバター、名前、役割、メンション数を特徴とし、完全な応答性とダークモードをサポートします。
ユーザーメンションコンポーネント
ユーザーが、Tailwind CSS を使用して、単色の配色、シンプルなレイアウト、レスポンシブ デザイン、ダーク テーマのサポートを特徴とするダッシュボードのコンポーネントについて言及します。