Retro_Reaction_Buttons_Industrial

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

プレビュー

HTMLコード

<div class="flex flex-col items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900 p-4 font-mono select-none">
  <div class="bg-gray-200 dark:bg-gray-800 rounded-lg shadow-xl p-6 border-4 border-gray-400 dark:border-gray-700 w-full max-w-sm">
    <h3 class="text-center text-xl font-bold mb-6 text-gray-800 dark:text-gray-200 uppercase tracking-wider">Process Feedback</h3>
    <div class="flex justify-around space-x-4 mb-6">
      <!-- Like Button -->
      <button class="flex flex-col items-center p-3 rounded-md transition-transform duration-200 ease-in-out transform hover:scale-105 active:scale-95
                     bg-blue-600 dark:bg-blue-700 text-white font-semibold shadow-lg
                     border-b-4 border-r-4 border-blue-800 dark:border-blue-900
                     hover:bg-blue-700 dark:hover:bg-blue-800 focus:outline-none focus:ring-4 focus:ring-blue-300 dark:focus:ring-blue-600">
        <svg class="w-8 h-8 md:w-10 md:h-10" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
          <path d="M2 10.5a1.5 1.5 0 113 0v6a1.5 1.5 0 01-3 0v-6zM6 10.333v5.5a2.5 2.5 0 002.5 2.5h2.464l-.929 3.488a1 1 0 001.942.518L13 16.582V13a2.5 2.5 0 002.5-2.5V6.5a2.5 2.5 0 00-2.5-2.5h-1.586a1.5 1.5 0 01-1.06-.44L10 2.5v-.5A1.5 1.5 0 008.5 1h-1A1.5 1.5 0 006 2.5v1.272a1.5 1.5 0 01-.447 1.06L4.354 7.646A1.5 1.5 0 003.293 8.707L2.5 9.5a1.5 1.5 0 00-.5 1.06v0z"></path>
        </svg>
        <span class="mt-2 text-sm md:text-base">Success</span>
      </button>

      <!-- Dislike Button -->
      <button class="flex flex-col items-center p-3 rounded-md transition-transform duration-200 ease-in-out transform hover:scale-105 active:scale-95
                     bg-red-600 dark:bg-red-700 text-white font-semibold shadow-lg
                     border-b-4 border-r-4 border-red-800 dark:border-red-900
                     hover:bg-red-700 dark:hover:bg-red-800 focus:outline-none focus:ring-4 focus:ring-red-300 dark:focus:ring-red-600">
        <svg class="w-8 h-8 md:w-10 md:h-10" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
          <path d="M18 9.5a1.5 1.5 0 11-3 0v-6a1.5 1.5 0 013 0v6zM14 9.667v-5.5a2.5 2.5 0 00-2.5-2.5H9.036l.929-3.488A1 1 0 008.023.002L7 3.418V7a2.5 2.5 0 00-2.5 2.5v4a2.5 2.5 0 002.5 2.5h1.586a1.5 1.5 0 011.06.44L10 17.5v.5A1.5 1.5 0 0011.5 19h1a1.5 1.5 0 001.5-1.5v-1.272a1.5 1.5 0 01.447-1.06L15.646 12.354A1.5 1.5 0 0016.707 11.293L17.5 10.5a1.5 1.5 0 00.5-1.06v0z"></path>
        </svg>
        <span class="mt-2 text-sm md:text-base">Failure</span>
      </button>
    </div>
    <p class="text-center text-sm text-gray-700 dark:text-gray-400 mt-4 leading-relaxed">Provide quick feedback on operational processes.</p>
  </div>
</div>

関連コンポーネント

アールデコ調のライク/リアクションボタンコンポーネント

アールデコ調の美学を備えたシンプルで応答性の高い「いいね/リアクション」ボタンのセットで、スポーツ/フィットネスアプリケーションに適しています。温かみのあるニュートラルとダークモードのサポートが特徴です。

開ける

Like/Reaction Buttons コンポーネント

Tailwind CSS を使用した 3D Design Like/Reaction Buttons コンポーネントで、ダークテーマのサポートとレスポンシブエフェクトを備えています。

開ける

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

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

開ける