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

バッジコンポーネント

マイクロインタラクションで設計されたレスポンシブバッジコンポーネントで、補色の配色とダークテーマのサポートが特徴です。ビジネスや企業のWebサイトに最適なこのコンポーネントには、ユーザーのアクションに応答する魅力的なアニメーションが含まれています。ホバー効果などの前述の視覚的な手がかりは、ユーザーエクスペリエンスを向上させます。

プレビュー

HTMLコード 

<div class="flex flex-wrap justify-center p-4 bg-white dark:bg-gray-800">
    <div class="m-2 p-4 bg-blue-500 text-white rounded-lg shadow-lg hover:bg-blue-600 transition duration-300 ease-in-out transform hover:scale-105">
        <div class="flex items-center">
            <img class="w-10 h-10 rounded-full mr-2" src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar">
            <span class="font-semibold">Marketing Team</span>
        </div>
        <p class="text-sm mt-2">Achieved a 20% increase in engagement through targeted campaigns.</p>
    </div>
    <div class="m-2 p-4 bg-green-500 text-white rounded-lg shadow-lg hover:bg-green-600 transition duration-300 ease-in-out transform hover:scale-105">
        <div class="flex items-center">
            <img class="w-10 h-10 rounded-full mr-2" src="https://randomuser.me/api/portraits/women/2.jpg" alt="Avatar">
            <span class="font-semibold">Sales Team</span>
        </div>
        <p class="text-sm mt-2">Closed $500k in new contracts this quarter.</p>
    </div>
    <div class="m-2 p-4 bg-red-500 text-white rounded-lg shadow-lg hover:bg-red-600 transition duration-300 ease-in-out transform hover:scale-105">
        <div class="flex items-center">
            <img class="w-10 h-10 rounded-full mr-2" src="https://randomuser.me/api/portraits/men/3.jpg" alt="Avatar">
            <span class="font-semibold">Product Team</span>
        </div>
        <p class="text-sm mt-2">Launched a new product that increased market share by 15%.</p>
    </div>
    <div class="m-2 p-4 bg-purple-500 text-white rounded-lg shadow-lg hover:bg-purple-600 transition duration-300 ease-in-out transform hover:scale-105">
        <div class="flex items-center">
            <img class="w-10 h-10 rounded-full mr-2" src="https://randomuser.me/api/portraits/women/4.jpg" alt="Avatar">
            <span class="font-semibold">Development Team</span>
        </div>
        <p class="text-sm mt-2">Implemented new system improvements for better performance.</p>
    </div>
</div>

関連コンポーネント

バッジコンポーネント

マテリアルデザインスタイル、ダークテーマのサポート、ブログコンテンツのアーストーンの配色を備えたレスポンシブバッジコンポーネント。

開ける

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

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

開ける

バッジコンポーネント

ソーシャルメディア用のシンプルなGlassmorphismスタイルのバッジコンポーネントで、ぼかし付きのすりガラス効果、類似の色、Tailwind CSSを使用したダークモードのサポートが特徴です。レスポンシブで、画像にはpicsum.photosを使用し、必要に応じてアバターには randomuser.me を使用します。JavaScriptは含まれていません。

開ける