CCHub Logo CCHub Tailwind Collection
コンポーネント タグクラウド タグクラウドコンポーネント13

タグクラウドコンポーネント13

Neumorphism スタイルでデザインされたタグクラウドコンポーネント。ソフトな UI スタイルが特徴で、微妙な影を使用して背景から押し出されているように見える要素があります。このコンポーネントは、レスポンシブデザインとダークテーマをサポートしています。

プレビュー

HTMLコード 

<div class="flex flex-wrap justify-center p-8 bg-gray-100 dark:bg-gray-900 rounded-lg shadow-lg">
    <div class="m-4">
        <a href="#" class="bg-white dark:bg-gray-800 shadow-neumorphism text-gray-800 dark:text-white font-semibold py-2 px-4 rounded-full hover:shadow-lg transition-transform transform hover:scale-105">
            Tag 1
        </a>
    </div>
    <div class="m-4">
        <a href="#" class="bg-white dark:bg-gray-800 shadow-neumorphism text-gray-800 dark:text-white font-semibold py-2 px-4 rounded-full hover:shadow-lg transition-transform transform hover:scale-105">
            Tag 2
        </a>
    </div>
    <div class="m-4">
        <a href="#" class="bg-white dark:bg-gray-800 shadow-neumorphism text-gray-800 dark:text-white font-semibold py-2 px-4 rounded-full hover:shadow-lg transition-transform transform hover:scale-105">
            Tag 3
        </a>
    </div>
    <div class="m-4">
        <a href="#" class="bg-white dark:bg-gray-800 shadow-neumorphism text-gray-800 dark:text-white font-semibold py-2 px-4 rounded-full hover:shadow-lg transition-transform transform hover:scale-105">
            Tag 4
        </a>
    </div>
    <div class="m-4">
        <a href="#" class="bg-white dark:bg-gray-800 shadow-neumorphism text-gray-800 dark:text-white font-semibold py-2 px-4 rounded-full hover:shadow-lg transition-transform transform hover:scale-105">
            Tag 5
        </a>
    </div>
    <div class="m-4">
        <a href="#" class="bg-white dark:bg-gray-800 shadow-neumorphism text-gray-800 dark:text-white font-semibold py-2 px-4 rounded-full hover:shadow-lg transition-transform transform hover:scale-105">
            Tag 6
        </a>
    </div>
    <div class="m-4">
        <a href="#" class="bg-white dark:bg-gray-800 shadow-neumorphism text-gray-800 dark:text-white font-semibold py-2 px-4 rounded-full hover:shadow-lg transition-transform transform hover:scale-105">
            Tag 7
        </a>
    </div>
    <div class="m-4">
        <a href="#" class="bg-white dark:bg-gray-800 shadow-neumorphism text-gray-800 dark:text-white font-semibold py-2 px-4 rounded-full hover:shadow-lg transition-transform transform hover:scale-105">
            Tag 8
        </a>
    </div>
</div>

<style>
    .shadow-neumorphism {
        box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.1),
                    -10px -10px 20px rgba(255, 255, 255, 0.5);
    }
</style>

関連コンポーネント

タグクラウドコンポーネント

バウハウスの原則に基づいて設計された、ビジネスや企業のWebサイト向けのシンプルでレスポンシブで鮮やかなタグクラウドコンポーネントで、幾何学的な形状と高彩度の原色、ダークモードをサポートしています。

開ける

Glassmorphism タグ クラウド コンポーネント

ポートフォリオに適した、紫/紫の配色を持つglassmorphismスタイルのタグクラウドコンポーネント。つや消しの半透明要素、レスポンシブデザイン、ダークモードのサポートが特徴です。

開ける

タグクラウドコンポーネント

マテリアルデザインスタイル、補色スキーム、eコマース目的向けの適度な複雑さを備えたレスポンシブタグクラウドコンポーネントで、ダークテーマのサポートを特徴としています。

開ける