ユーザーメンションコンポーネント

3D デザイン、レスポンシブ効果、および Tailwind CSS を使用したダークテーマのサポートを備えたユーザーメンションコンポーネント。

プレビュー

HTMLコード

<div class="flex items-center space-x-4 p-4 bg-white rounded-lg shadow-xl transition-transform transform hover:scale-105 dark:bg-gray-800">
  <img class="w-12 h-12 rounded-full border-2 border-blue-500" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar">
  <div class="flex-1">
    <p class="text-lg font-semibold text-gray-800 dark:text-white">John Doe</p>
    <p class="text-gray-600 dark:text-gray-400">@johndoe</p>
  </div>
  <span class="inline-block bg-blue-500 text-white text-xs px-3 py-1 rounded-full shadow-md dark:bg-blue-600">
    Mentioned
  </span>
</div>

関連コンポーネント

ユーザーメンションコンポーネント

Glassmorphismデザイン、補色スキーム、およびダークモードサポートを備えたレスポンシブユーザーメンションコンポーネントで、ビジネスWebサイトに適しています。

開ける

ユーザーメンションコンポーネント

シンプルでクリーン、かつ応答性の高いユーザーは、ポートフォリオ用にスイス/インターナショナルタイポグラフィスタイルでデザインされた鮮やかな配色のコンポーネントに言及しています。ダークモードのサポートが含まれています。

開ける

ユーザーメンションコンポーネント

複雑で応答性の高いユーザーは、バウハウスにインスパイアされたデザイン、落ち着いた/彩度の低い色、ダークモードのサポートを特徴とするイベント/カンファレンスWebサイトのコンポーネントに言及しています。これにより、ユーザーはメンションする連絡先を検索して選択できます。

開ける