Retro_Reaction_Buttons_Industrial
Componente de botones de me gusta/reacción simple y receptivo con una estética industrial retro, adecuado para sitios web de empresas industriales o de fabricación.
Código 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>
Componentes relacionados
Botones Me gusta/Reacción
Componente de botones Me gusta/Reacción con microinteracciones, capacidad de respuesta y compatibilidad con temas oscuros
Componente de botones Me gusta/Reacción
Un componente de botones Me gusta/Reacción de estilo retro/vintage, con una gama de botones interactivos para reacciones con soporte para temas oscuros y diseño responsivo. Este componente es adecuado para un tablero, lo que permite a los usuarios reaccionar a varios elementos de la interfaz.
Componente de botones Me gusta/Reacción
Un componente web con botones Me gusta y Reacción con microinteracciones y soporte para temas oscuros usando Tailwind CSS.