CCHub Logo CCHub Tailwind Collection
コンポーネント いいね/リアクションボタン Like/Reaction Buttons コンポーネント

Like/Reaction Buttons コンポーネント

Neumorphism スタイルの Like/Reaction ボタン コンポーネントで、複雑なデザインとダーク モードをサポートするブログ用です。

プレビュー

HTMLコード 

<div class="flex flex-col items-center justify-center p-6 bg-gray-200 dark:bg-gray-800 rounded-lg shadow-lg">
    <h2 class="text-xl font-semibold text-gray-800 dark:text-gray-200 mb-4">React to this Post</h2>
    <div class="grid grid-cols-3 gap-4">
        <button class="flex flex-col items-center justify-center p-4 bg-white dark:bg-gray-700 rounded-lg shadow-md hover:shadow-lg transition-all duration-300">
            <img src="https://picsum.photos/50" alt="Like" class="w-12 h-12 mb-2 rounded-full">
            <span class="text-gray-800 dark:text-gray-200">Like</span>
        </button>
        <button class="flex flex-col items-center justify-center p-4 bg-white dark:bg-gray-700 rounded-lg shadow-md hover:shadow-lg transition-all duration-300">
            <img src="https://picsum.photos/50?random=1" alt="Love" class="w-12 h-12 mb-2 rounded-full">
            <span class="text-gray-800 dark:text-gray-200">Love</span>
        </button>
        <button class="flex flex-col items-center justify-center p-4 bg-white dark:bg-gray-700 rounded-lg shadow-md hover:shadow-lg transition-all duration-300">
            <img src="https://picsum.photos/50?random=2" alt="Haha" class="w-12 h-12 mb-2 rounded-full">
            <span class="text-gray-800 dark:text-gray-200">Haha</span>
        </button>
        <button class="flex flex-col items-center justify-center p-4 bg-white dark:bg-gray-700 rounded-lg shadow-md hover:shadow-lg transition-all duration-300">
            <img src="https://picsum.photos/50?random=3" alt="Wow" class="w-12 h-12 mb-2 rounded-full">
            <span class="text-gray-800 dark:text-gray-200">Wow</span>
        </button>
        <button class="flex flex-col items-center justify-center p-4 bg-white dark:bg-gray-700 rounded-lg shadow-md hover:shadow-lg transition-all duration-300">
            <img src="https://picsum.photos/50?random=4" alt="Sad" class="w-12 h-12 mb-2 rounded-full">
            <span class="text-gray-800 dark:text-gray-200">Sad</span>
        </button>
        <button class="flex flex-col items-center justify-center p-4 bg-white dark:bg-gray-700 rounded-lg shadow-md hover:shadow-lg transition-all duration-300">
            <img src="https://picsum.photos/50?random=5" alt="Angry" class="w-12 h-12 mb-2 rounded-full">
            <span class="text-gray-800 dark:text-gray-200">Angry</span>
        </button>
    </div>
</div>

関連コンポーネント

スキューモーフィック反応ボタン

スキューモーフィックデザインスタイルの「いいね!」ボタンとリアクションボタンのセットで、レスポンシブレイアウトとダークモードをサポートします。ボタンは、JavaScriptを使用せずに、HTMLとTailwind CSSのみで実装されています。ダークモードはCSSクラスを介して処理されます。プレースホルダー画像はアバターに使用されます。

開ける

Like/Reaction Buttons コンポーネント

スキューモーフィック スタイルでデザインされた [いいね] ボタンと [リアクション] ボタンを備えた Web コンポーネントで、レスポンシブ エフェクトと Tailwind CSS を使用したダーク テーマのサポートを備えています。

開ける

類似のダークモードのいいね/リアクションボタン

ポートフォリオ用の複雑でレスポンシブな「いいね/リアクションボタン」コンポーネントで、ダークモードのUIと類似の配色を備え、純粋なHTMLとTailwind CSSを使用して実装されています。Tailwind の dark: プレフィックスを介してダーク モードをサポートします。

開ける