// componentes · card, button, badge, input, alert
Patrones de componentes reales construidos solo con clases de utilidad. Código listo para copiar y adaptar.
Botones
Badges
Cards
bg-gray-900 border rounded-xl p-5
overflow-hidden en la card, sin border-radius en la imagen. El grupo cambia el título al hacer hover.
Alertas
Operación completada correctamente.
Ha ocurrido un error. Inténtalo de nuevo.
Acción con consecuencias importantes.
Input con icono + label + hint
Nunca compartiremos tu email.
<!-- BOTÓN PRIMARY -->
<button class="bg-teal-500
hover:bg-teal-400
active:bg-teal-600
text-white font-bold
px-5 py-2.5 rounded-lg text-sm
transition-colors duration-150">
Enviar
</button>
<!-- BADGE -->
<span class="bg-teal-500/10
text-teal-400
border border-teal-500/20
px-2.5 py-0.5 rounded-full
text-xs font-bold">
activo
</span>
<!-- CARD -->
<div class="bg-gray-900
border border-gray-800
rounded-xl p-5
hover:border-gray-700
transition-colors">
<h3 class="font-bold text-sm">Título</h3>
<p class="text-xs text-gray-500 mt-1">Desc</p>
</div>
<!-- ALERTA -->
<div class="flex gap-3
bg-teal-500/10
border border-teal-500/20
rounded-lg px-4 py-3">
<span class="text-teal-400">✓</span>
<p class="text-sm text-teal-300">OK</p>
</div>
<!-- INPUT con icono -->
<div class="relative">
<span class="absolute left-3
top-1/2 -translate-y-1/2
text-gray-500">@</span>
<input class="bg-gray-900
border border-gray-700
rounded-lg pl-8 pr-4 py-2.5
focus:outline-none
focus:border-teal-500
focus:ring-1
focus:ring-teal-500/20
transition-all">
</div>
<!-- Nota: /10 /20 = opacidad del color -->
<!-- bg-teal-500/10 = teal-500 al 10% -->