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

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

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

プレビュー

HTMLコード 

<div class="bg-gray-100 dark:bg-gray-900 py-8">
  <div class="max-w-3xl mx-auto px-4">
    <h2 class="text-2xl font-semibold text-gray-800 dark:text-white mb-4">User Mentions</h2>
    
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6">
      <div class="flex items-center mb-4">
        <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-4">
        <div>
          <p class="text-gray-800 dark:text-white font-semibold">John Doe</p>
          <p class="text-gray-500 dark:text-gray-400 text-sm">@johndoe</p>
        </div>
      </div>
      
      <p class="text-gray-700 dark:text-gray-300 leading-relaxed mb-4">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
      </p>
      
      <div class="flex justify-end text-gray-500 dark:text-gray-400 text-sm">
        <span>2 days ago</span>
      </div>
    </div>
    
    <!-- Repeat similar blocks for other mentions -->
    
  </div>
</div>

関連コンポーネント

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

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

開ける

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

レスポンシブなユーザーが、ダークモードのeコマースインターフェース用に設計されたコンポーネントに言及し、アースカラーとプレースホルダーのユーザーアバターと商品画像を備えています。メンションの候補リストと、ユーザーの詳細、およびタグ付けやコラボレーション機能に適した関連製品が表示されます。

開ける

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

Tailwind CSS を使用して構築された、マイクロインタラクションで設計された、レスポンシブ効果とダークテーマのサポートを特徴とする User Mentions コンポーネント。

開ける