CCHub Logo CCHub Tailwind Collection
コンポーネント ユーザーメンション ユーザーメンションコンポーネント

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

ブルータリズムスタイルでデザインされたシンプルなユーザーメンションコンポーネントで、グレースケールの配色で、ビジネスや企業のWebサイトに適しています。アバターを使用したユーザーメンションが含まれ、ダークテーマのサポートにより応答性があります。

プレビュー

HTMLコード 

<div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md">
  <h2 class="text-2xl font-bold text-black dark:text-white">User Mentions</h2>
  <ul class="mt-4 space-y-4">
    <li class="flex items-center space-x-4">
      <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User 1" class="w-10 h-10 rounded-full">
      <p class="text-gray-800 dark:text-gray-200">@john_doe</p>
    </li>
    <li class="flex items-center space-x-4">
      <img src="https://randomuser.me/api/portraits/women/1.jpg" alt="User 2" class="w-10 h-10 rounded-full">
      <p class="text-gray-800 dark:text-gray-200">@jane_smith</p>
    </li>
    <li class="flex items-center space-x-4">
      <img src="https://randomuser.me/api/portraits/men/2.jpg" alt="User 3" class="w-10 h-10 rounded-full">
      <p class="text-gray-800 dark:text-gray-200">@mark_twain</p>
    </li>
  </ul>
  <button class="mt-4 px-4 py-2 bg-gray-800 dark:bg-white text-white dark:text-gray-800 rounded-lg hover:bg-gray-700 dark:hover:bg-gray-300 focus:outline-none">See More Mentions</button>
</div>

関連コンポーネント

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

Tailwind CSSを使用したダークテーマをサポートするレスポンシブユーザーメンションコンポーネント。JavaScriptは必要なく、Tailwindクラスを持つHTMLのみが必要です。ダークモードの場合は、スタイル設定にTailwindのdark:プレフィックスを使用します。画像はpicsum.photosから、アバターは randomuser.me から引用しています。

開ける

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

複雑で単色のインダストリアルスタイルのユーザーが、原材料、露出した要素、実用的な美学を特徴とする旅行/観光Webサイトのコンポーネントについて言及しています。完全にレスポンシブで、ダークモードをサポートしています。

開ける

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

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

開ける