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

Monospace_Developer_Reaction_Buttons

レトロ/ビンテージの配色でモノスペース/開発者の美学に触発されたシンプルでレスポンシブな「いいね/リアクションボタン」コンポーネントで、ニュースやジャーナリズムのWebサイトに適しています。ダークモードのサポートが含まれています。

プレビュー

HTMLコード 

<div class="flex flex-wrap cursor-pointer font-mono text-gray-800 dark:text-gray-200 bg-gray-50 dark:bg-gray-900 p-4 border border-gray-300 dark:border-gray-700 rounded-lg shadow-sm">
  <button class="flex items-center space-x-2 px-3 py-1 m-1 rounded-sm border border-gray-400 dark:border-gray-600 bg-gray-200 dark:bg-gray-800 hover:bg-gray-300 dark:hover:bg-gray-700 transition-colors duration-200 ease-in-out text-sm md:text-base">
    <span class="text-orange-500 dark:text-orange-400">&#9654;</span>
    <span class="hidden sm:inline">Upvote</span>
    <span class="text-xs ml-1 dark:text-gray-400">123</span>
  </button>

  <button class="flex items-center space-x-2 px-3 py-1 m-1 rounded-sm border border-gray-400 dark:border-gray-600 bg-gray-200 dark:bg-gray-800 hover:bg-gray-300 dark:hover:bg-gray-700 transition-colors duration-200 ease-in-out text-sm md:text-base">
    <span class="text-blue-500 dark:text-blue-400">&#9733;</span>
    <span class="hidden sm:inline">Bookmark</span>
    <span class="text-xs ml-1 dark:text-gray-400">45</span>
  </button>

  <button class="flex items-center space-x-2 px-3 py-1 m-1 rounded-sm border border-gray-400 dark:border-gray-600 bg-gray-200 dark:bg-gray-800 hover:bg-gray-300 dark:hover:bg-gray-700 transition-colors duration-200 ease-in-out text-sm md:text-base">
    <span class="text-green-600 dark:text-green-500">&#9600;</span>
    <span class="hidden sm:inline">Approve</span>
    <span class="text-xs ml-1 dark:text-gray-400">89</span>
  </button>

  <button class="flex items-center space-x-2 px-3 py-1 m-1 rounded-sm border border-gray-400 dark:border-gray-600 bg-gray-200 dark:bg-gray-800 hover:bg-gray-300 dark:hover:bg-gray-700 transition-colors duration-200 ease-in-out text-sm md:text-base">
    <span class="text-purple-600 dark:text-purple-500">&#x22C6;</span>
    <span class="hidden sm:inline">Favorite</span>
    <span class="text-xs ml-1 dark:text-gray-400">32</span>
  </button>

  <button class="flex items-center space-x-2 px-3 py-1 m-1 rounded-sm border border-gray-400 dark:border-gray-600 bg-gray-200 dark:bg-gray-800 hover:bg-gray-300 dark:hover:bg-gray-700 transition-colors duration-200 ease-in-out text-sm md:text-base">
    <span class="text-red-500 dark:text-red-400">&#x2717;</span>
    <span class="hidden sm:inline">Disagree</span>
    <span class="text-xs ml-1 dark:text-gray-400">7</span>
  </button>
</div>

関連コンポーネント

Like/Reaction Buttons コンポーネント

音楽/オーディオプラットフォーム用の複雑でミニマリストなリアクションボタンのセットで、鮮やかな色、ダークモードのサポート、完全な応答性を備えています。

開ける

Retro_Reaction_Buttons_Industrial

レトロなインダストリアルの美学を備えたシンプルでレスポンシブな「いいね/リアクションボタン」コンポーネントで、製造または工業企業のWebサイトに適しています。

開ける

サイバーパンクライクリアクションボタン

マーケットプレイス向けのシンプルで応答性の高い「いいね/リアクション」ボタンコンポーネントで、オーシャンブルーの色調とダークモードのサポートを備えたサイバーパンクの美学が特徴です。

開ける