CCHub Logo CCHub Tailwind Collection
コンポーネント バッジ バッジコンポーネント

バッジコンポーネント

Glassmorphismスタイルでデザインされたレスポンシブバッジコンポーネントで、すりガラスのような半透明の要素とぼかし効果が特徴で、ダークモードをサポートしています。

プレビュー

HTMLコード 

<div class="flex flex-wrap justify-center space-x-4 mt-10">
    <!-- Badge 1 -->
    <div class="bg-white bg-opacity-30 backdrop-filter backdrop-blur-md rounded-lg border border-gray-200 dark:bg-gray-800 dark:bg-opacity-50 p-4 shadow-lg hover:shadow-xl transition-shadow duration-300 ease-in-out">
        <img src="https://picsum.photos/50/50" alt="Avatar" class="rounded-full mb-2">
        <h3 class="text-lg font-semibold text-gray-900 dark:text-white">John Doe</h3>
        <p class="text-gray-500 dark:text-gray-400">Web Developer</p>
    </div>
    <!-- Badge 2 -->
    <div class="bg-white bg-opacity-30 backdrop-filter backdrop-blur-md rounded-lg border border-gray-200 dark:bg-gray-800 dark:bg-opacity-50 p-4 shadow-lg hover:shadow-xl transition-shadow duration-300 ease-in-out">
        <img src="https://picsum.photos/50/51" alt="Avatar" class="rounded-full mb-2">
        <h3 class="text-lg font-semibold text-gray-900 dark:text-white">Jane Smith</h3>
        <p class="text-gray-500 dark:text-gray-400">Graphic Designer</p>
    </div>
    <!-- Badge 3 -->
    <div class="bg-white bg-opacity-30 backdrop-filter backdrop-blur-md rounded-lg border border-gray-200 dark:bg-gray-800 dark:bg-opacity-50 p-4 shadow-lg hover:shadow-xl transition-shadow duration-300 ease-in-out">
        <img src="https://picsum.photos/50/52" alt="Avatar" class="rounded-full mb-2">
        <h3 class="text-lg font-semibold text-gray-900 dark:text-white">Mike Lee</h3>
        <p class="text-gray-500 dark:text-gray-400">UX Designer</p>
    </div>
    <!-- Badge 4 -->
    <div class="bg-white bg-opacity-30 backdrop-filter backdrop-blur-md rounded-lg border border-gray-200 dark:bg-gray-800 dark:bg-opacity-50 p-4 shadow-lg hover:shadow-xl transition-shadow duration-300 ease-in-out">
        <img src="https://picsum.photos/50/53" alt="Avatar" class="rounded-full mb-2">
        <h3 class="text-lg font-semibold text-gray-900 dark:text-white">Emily Clark</h3>
        <p class="text-gray-500 dark:text-gray-400">Product Manager</p>
    </div>
</div>

関連コンポーネント

バッジコンポーネント

レトロなテーマのバッジコンポーネントで、グレースケールの配色で、ブログやコンテンツサイトに適しています。複数のインタラクティブ要素と完全な応答性を特徴とし、ダークモードをサポートしています。この設計では、JavaScript を回避し、HTML と Tailwind CSS のみに依存しています。

開ける

バッジコンポーネント

Tailwind CSS を使用して設計された、マイクロインタラクションとダークテーマのサポートを備えたレスポンシブバッジコンポーネント。このコンポーネントにはホバー効果が含まれており、アバターのプレースホルダー画像を使用します。

開ける

バッジコンポーネント - ダークモード、アーストーン

ダークモードのブログ/コンテンツインターフェイス用にアースカラーで設計された複雑なバッジコンポーネントシステム。このコンポーネントには、記事カテゴリ、ユーザーステータス、コンテンツタグ、通知、および実績インジケータのさまざまなバッジタイプが含まれています。すべてダークモードをサポートする自然なアースカラーを使用しています。デザインは完全にレスポンシブで、さまざまな画面サイズに適応します。

開ける