Retro_Reaction_Buttons_Industrial
Einfache, reaktionsschnelle Komponente für Like-/Reaction-Buttons mit einer Retro-Industrie-Ästhetik, geeignet für Websites von Fertigungs- oder Industrieunternehmen.
HTML-Code
<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>
Verwandte Komponenten
Komponente "Gefällt mir/Reaktions-Buttons"
Eine Webkomponente mit Like- und Reaction-Schaltflächen mit Mikrointeraktionen und Unterstützung für dunkle Designs mit Tailwind CSS.
Komponente "Gefällt mir/Reaktions-Buttons"
Eine reaktionsschnelle Like/Reaction Buttons-Komponente mit Unterstützung für den Dunkelmodus unter Verwendung von Tailwind CSS. Es verfügt über ein komplementäres Farbschema, das für ein Dashboard geeignet ist, mit moderater Komplexität für interaktive Reaktionsschaltflächen.
Komponente "Gefällt mir/Reaktions-Buttons"
Eine Webkomponente mit Like- und Reaction-Schaltflächen, die in einem skeuomorphen Stil gestaltet sind, mit responsiven Effekten und Unterstützung für dunkle Designs unter Verwendung von Tailwind CSS.