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

Like/Reaction Buttons コンポーネント

レトロ/ビンテージスタイルのいいね/リアクションボタンコンポーネントで、ダークテーマのサポートとレスポンシブデザインを備えたリアクション用のさまざまなインタラクティブボタンを備えています。このコンポーネントはダッシュボードに適しており、ユーザーはインターフェースのさまざまな要素に反応することができます。

プレビュー

HTMLコード 

<div class="bg-gray-900 dark:bg-gray-800 p-5 rounded-lg shadow-lg max-w-lg mx-auto">
    <h2 class="text-2xl font-extrabold text-center text-yellow-300 mb-4">React with Nostalgia!</h2>
    <div class="flex justify-around mb-4">
        <button class="bg-red-500 hover:bg-red-400 text-white font-bold py-2 px-4 rounded-full shadow-lg transition duration-300 ease-in-out transform hover:-translate-y-1">❤️ Like</button>
        <button class="bg-blue-500 hover:bg-blue-400 text-white font-bold py-2 px-4 rounded-full shadow-lg transition duration-300 ease-in-out transform hover:-translate-y-1">😂 Haha</button>
        <button class="bg-yellow-500 hover:bg-yellow-400 text-white font-bold py-2 px-4 rounded-full shadow-lg transition duration-300 ease-in-out transform hover:-translate-y-1">😢 Sad</button>
        <button class="bg-green-500 hover:bg-green-400 text-white font-bold py-2 px-4 rounded-full shadow-lg transition duration-300 ease-in-out transform hover:-translate-y-1">😡 Angry</button>
    </div>
    <hr class="border-gray-600 mb-4">
    <div class="flex items-center justify-center">
        <img class="w-12 h-12 rounded-full border-2 border-yellow-300 mr-2" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar">
        <span class="text-lg text-gray-300">John Doe</span>
    </div>
    <div class="mt-4">
        <p class="text-gray-400 text-center">React to the content with your feelings!</p>
    </div>
</div>

<div class="bg-gray-900 dark:bg-gray-800 p-5 rounded-lg shadow-lg max-w-lg mx-auto mt-6">
    <h3 class="text-xl font-semibold text-center text-yellow-300 mb-4">Select Your Mood</h3>
    <div class="grid grid-cols-2 gap-4">
        <button class="bg-red-500 hover:bg-red-400 text-white font-bold py-2 rounded-lg shadow-lg transition duration-300">Excited</button>
        <button class="bg-blue-500 hover:bg-blue-400 text-white font-bold py-2 rounded-lg shadow-lg transition duration-300">Happy</button>
        <button class="bg-yellow-500 hover:bg-yellow-400 text-white font-bold py-2 rounded-lg shadow-lg transition duration-300">Sad</button>
        <button class="bg-green-500 hover:bg-green-400 text-white font-bold py-2 rounded-lg shadow-lg transition duration-300">Angry</button>
    </div>
</div>

関連コンポーネント

Like/Reaction Buttons コンポーネント

Tailwind CSSを使用してHTMLでコーディングされた「いいね/リアクションボタン」コンポーネント、ブルータリズムデザイン、アースカラーの配色、適度な複雑さ、Eコマースに適しています。レスポンシブデザインとダークモードのサポートが含まれています。

開ける

Like/Reaction Buttons コンポーネント

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

開ける

Like/Reaction Buttons コンポーネント

Glassmorphism スタイルの Like/Reaction Buttons コンポーネントで、レスポンシブ エフェクトと Tailwind CSS を使用したダーク モードのサポートを備えています。

開ける