<button class="bg-indigo-500 hover:bg-indigo-700 text-white px-4 py-2 rounded transform transition duration-300 hover:scale-105">
Hover mágico ✨
</button>Botón índigo con texto blanco y bordes redondeados, que al pasar el ratón oscurece, se agranda ligeramente y muestra una transición suave.
bg-indigo-500: fondo índigo (nivel 500).hover:bg-indigo-700: cambia a un índigo más oscuro al pasar el ratón.text-white: color de texto blanco.px-4: padding horizontal de 1rem (16px).py-2: padding vertical de 0.5rem (8px).rounded: bordes redondeados.transform: habilita las transformaciones CSS.transition: activa las transiciones en los cambios de estado.duration-300: duración de la transición de 300ms.hover:scale-105: escala el botón al 105% al pasar el ratón.<div class="bg-black opacity-50 hover:opacity-100 p-6 text-white rounded">
Caja con opacidad
</div>Caja negra semitransparente con texto blanco, padding y bordes redondeados, que se vuelve totalmente opaca al pasar el ratón.
bg-black: aplica un fondo negro.opacity-50: establece la opacidad al 50%.hover:opacity-100: cambia la opacidad al 100% al pasar el ratón.p-6: padding interno de 1.5rem (24px) en todos los lados.text-white: color de texto blanco.rounded: bordes redondeados.<div class="bg-blue-400 text-white p-6 rounded transform hover:scale-105 hover:shadow-lg transition duration-300">
Caja con efecto de escala y sombra
</div>Caja azul con texto blanco, padding y bordes redondeados, que al pasar el ratón crece un poco, añade una sombra grande y lo hace con una transición suave.
bg-blue-400: aplica un fondo azul (nivel 400).text-white: color de texto blanco.p-6: padding interno de 1.5rem (24px) en todos los lados.rounded: bordes redondeados.transform: habilita las transformaciones CSS.hover:scale-105: escala el elemento un 5% más grande al pasar el ratón.hover:shadow-lg: añade una sombra grande al pasar el ratón.transition: habilita transiciones suaves en los cambios.duration-300: la transición dura 300ms.<div class="bg-green-500 text-white p-6 rounded opacity-75 hover:opacity-100 transition duration-300">
Caja con opacidad
</div>Caja verde con texto blanco, padding y bordes redondeados, que inicia con 75% de opacidad y se vuelve totalmente visible al pasar el ratón con una transición suave.
bg-green-500: aplica un fondo verde (nivel 500).text-white: color de texto blanco.p-6: padding interno de 1.5rem (24px) en todos los lados.rounded: bordes redondeados.opacity-75: establece la opacidad en 75%.hover:opacity-100: cambia la opacidad al 100% al pasar el ratón.transition: habilita transiciones suaves en los cambios.duration-300: la transición dura 300ms.<form class="p-8 bg-gray-100 rounded-lg shadow-md">
<label class="block text-gray-700 font-bold mb-2" for="email">
Correo Electrónico
</label>
<input class="w-full px-3 py-2 text-gray-700 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
id="email" type="email" placeholder="ejemplo@correo.com">
</form>Formulario con un campo de correo, fondo gris, bordes redondeados y efecto azul al enfocar el input.
block: Convierte la etiqueta en un elemento de bloque.text-gray-700: Texto gris oscuro.mb-2: Margen inferior.w-full: Ancho completo.px-3: Relleno horizontal.py-2: Relleno vertical.border: Borde estándar.rounded-lg: Bordes redondeados.focus:outline-none: Elimina el contorno de enfoque.<label class="flex items-center space-x-2">
<input type="checkbox" class="form-checkbox text-blue-600">
<span>Suscribirme</span>
</label>
<label class="flex items-center space-x-2">
<input type="radio" name="plan" class="form-radio text-green-600">
<span>Plan Básico</span>
</label>Checkbox azul para “Suscribirme” y un radio verde para seleccionar “Plan Básico”, con etiquetas al lado.
flex: convierte el contenedor en un flexbox.
items-center: alinea los elementos hijos verticalmente al centro.
space-x-2: agrega un espacio horizontal de 0.5rem (8px) entre los hijos.
form-checkbox: aplica estilos por defecto de Tailwind para checkboxes.
text-blue-600: color azul (nivel 600) en el checkbox.
form-radio: aplica estilos por defecto de Tailwind para radios.
text-green-600: color verde (nivel 600) en el radio.
<nav class="flex space-x-4 bg-gray-800 p-4 text-white">
<a href="#" class="hover:bg-gray-700 p-2 rounded transition-colors duration-300">Inicio</a>
<a href="#" class="hover:bg-gray-700 p-2 rounded transition-colors duration-300">Servicios</a>
<a href="#" class="hover:bg-gray-700 p-2 rounded transition-colors duration-300">Contacto</a>
</nav>Barra de navegación horizontal gris oscuro con enlaces blancos que cambian de fondo al pasar el mouse.
flex: convierte el contenedor en un flexbox.
space-x-4: añade un espacio horizontal de 1rem (16px) entre los elementos hijos.
bg-gray-800: aplica un fondo gris muy oscuro.
p-4: padding interno de 1rem (16px) en todos los lados.
text-white: color de texto blanco.
hover:bg-gray-700: cambia el fondo a gris más claro al pasar el ratón.
p-2: padding interno de 0.5rem (8px).
rounded: bordes redondeados.
transition-colors: habilita la transición suave en cambios de color.
duration-300: duración de la transición de 300ms.
<span class="bg-blue-100 text-blue-800 text-xs font-semibold px-2 py-1 rounded-full">
Nuevo
</span>Badge pequeño azul con texto “Nuevo” y bordes redondeados.
bg-blue-100: fondo azul muy claro.text-blue-800: color de texto azul oscuro.text-xs: tamaño de fuente extra pequeño.font-semibold: peso de fuente seminegrita.px-2: padding horizontal de 0.5rem (8px).py-1: padding vertical de 0.25rem (4px).rounded-full: bordes completamente redondeados (forma de píldora).<div class="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded relative">
<strong class="font-bold">Error:</strong>
<span class="block sm:inline">Algo salió mal.</span>
</div>Alerta de error roja con el texto “Error: Algo salió mal.” y bordes redondeados.
bg-red-100: fondo rojo muy claro.border: aplica un borde de 1px sólido.border-red-400: color del borde rojo (nivel 400).text-red-700: color de texto rojo (nivel 700).px-4: padding horizontal de 1rem (16px).py-3: padding vertical de 0.75rem (12px).rounded: bordes redondeados.relative: establece un contexto de posicionamiento relativo.font-bold: aplica un peso de fuente en negrita.block: muestra el elemento como bloque (ocupa todo el ancho).sm:inline: a partir de pantallas pequeñas (≥640px), muestra el elemento como inline.<div class="max-w-md mx-auto bg-white rounded-xl shadow-md overflow-hidden md:max-w-2xl">
<div class="md:flex">
<div class="md:flex-shrink-0">
<img class="h-48 w-full object-cover md:w-48" src="ejemplo.jpg" alt="Imagen">
</div>
<div class="p-8">
<div class="uppercase tracking-wide text-sm text-indigo-500 font-semibold">Producto</div>
<a href="#" class="block mt-1 text-lg leading-tight font-medium text-black hover:underline">
Nombre del producto
</a>
<p class="mt-2 text-gray-500">Descripción corta del producto aquí.</p>
<button class="mt-4 bg-indigo-500 hover:bg-indigo-700 text-white px-4 py-2 rounded">
Comprar ahora
</button>
</div>
</div>
</div>Tarjeta de producto responsiva con imagen, título, descripción y botón de acción.
max-w-md: ancho máximo de 28rem (448px).
mx-auto: centra el contenedor horizontalmente.
bg-white: fondo blanco.
rounded-xl: bordes extra grandes y redondeados.
shadow-md: sombra de tamaño medio.
overflow-hidden: oculta cualquier contenido que se salga del contenedor.
md:max-w-2xl: ancho máximo de 42rem (672px) en pantallas medianas (≥768px).
md:flex: en pantallas medianas o más grandes convierte el contenedor en flexbox.
md:flex-shrink-0: evita que el elemento se reduzca en pantallas medianas o más grandes.
h-48: altura fija de 12rem (192px).
w-full: ancho completo.
object-cover: ajusta la imagen para cubrir el contenedor sin deformarse.
md:w-48: ancho fijo de 12rem (192px) en pantallas medianas o más grandes.
p-8: padding interno de 2rem (32px).
uppercase: convierte el texto a mayúsculas.
tracking-wide: aumenta el espaciado entre letras.
text-sm: tamaño de fuente pequeña.
text-indigo-500: color de texto índigo (nivel 500).
font-semibold: peso de fuente seminegrita.
block: muestra el enlace como un elemento de bloque.
mt-1: margen superior de 0.25rem (4px).
text-lg: tamaño de fuente grande.
leading-tight: reduce el interlineado para texto ajustado.
font-medium: peso de fuente medio.
text-black: color de texto negro.
hover:underline: subraya el texto al pasar el ratón.
mt-2: margen superior de 0.5rem (8px).
text-gray-500: color de texto gris medio.
mt-4: margen superior de 1rem (16px).
bg-indigo-500: fondo índigo (nivel 500).
hover:bg-indigo-700: fondo índigo más oscuro al pasar el ratón.
text-white: color de texto blanco.
px-4: padding horizontal de 1rem (16px).
py-2: padding vertical de 0.5rem (8px).
rounded: bordes redondeados.