Aprende Tailwind en 20 minutos

Aquí empezamos

Este es el HTML sin ningún estilo, que vamos a convertir en una card Premium utilizando clases.

<main class="">
<section class="">

  <figure class="">
    <img src="https://images.unsplash.com/photo-1505740420928-5e560c06d30e" class="" />
    <div class=""></div>
  </figure>

  <article class="">
    <div class="">
      <span class="">
        Premium Edition
      </span>
    </div>

    <h3 class="">Studio Pro Max</h3>
    <p class="">Redescubre el sonido con una profundidad acústica
      inigualable y acabados en cuero natural.</p>

    <div class="">
      <div class="">
        <span class="">$450</span>
        <span class="">$349</span>
      </div>

      <button class="">Comprar ahora</button>
    </div>
  </article>

</section>
</main>

En este tutorial aprenderemos de manera practica todos los conceptos de Tailwind, que nos llevarán a crear una Card totalmente sensacional.

Qué vas a practicar

flex, gap, padding, rounded-*, shadow-*, aspect-*, object-cover, gradientes, group-hover, responsive con md: y algunos valores arbitrarios como rounded-[2rem].

Paso 1: centrar la interfaz en pantalla

Primero hacemos que el main funcione como un escenario limpio y centrado:

<main class="flex min-h-svh items-center justify-center bg-white p-6">
...
</main>

Conceptos que introduces aquí:

flex convierte el contenedor en flexbox.
items-center centra en el eje cruzado.
justify-center centra en el eje principal.
min-h-svh obliga a que el bloque ocupe la altura visible de la pantalla.
p-6 deja respiración alrededor para que la card no toque los bordes en móvil.

Si solo memorizaras una combinación para centrar un componente aislado, esta sería una de las más útiles.

Paso 2: construir el contenedor principal de la card

Ahora damos forma al section, que será la tarjeta completa:

<section class="group relative flex w-full max-w-sm flex-col gap-4 rounded-[2rem] bg-slate-900 p-3 shadow-2xl md:max-w-xl md:flex-row">
...
</section>

Aquí ya aparecen varias ideas fuertes de Tailwind:

w-full max-w-sm hace que la card crezca hasta llenar el ancho disponible, pero con un límite razonable.
flex-col ordena la imagen y el contenido uno debajo del otro en móvil.
gap-4 separa bloques hijos sin meter márgenes manuales.
rounded-[2rem] usa un valor arbitrario cuando quieres un radio exacto fuera de la escala por defecto.
bg-slate-900 shadow-2xl da volumen y contraste.
md:flex-row md:max-w-xl cambia la composición en pantallas medianas: pasamos de columna a fila.
group prepara el terreno para disparar animaciones en elementos hijos usando group-hover:*.

Idea importante

En Tailwind, muchas veces el layout nace desde el padre. Si el contenedor está bien definido, los hijos casi siempre se acomodan con menos esfuerzo.

Paso 3: trabajar la imagen como bloque visual

La imagen no solo necesita verse bien; también debe respetar proporciones y no deformarse:

<figure class="relative aspect-[4/5] overflow-hidden rounded-2xl">
<img
  src="https://images.unsplash.com/photo-1505740420928-5e560c06d30e"
  class="size-full object-cover transition-transform duration-700 group-hover:scale-110"
/>
<div class="absolute inset-0 bg-gradient-to-t from-slate-950 to-transparent opacity-60"></div>
</figure>

Lo que aprendes aquí:

aspect-[4/5] fija una proporción consistente aunque la imagen cambie.
overflow-hidden recorta cualquier zoom que se salga del marco.
rounded-2xl hereda la idea de card suave, pero con un radio un poco menor que el contenedor principal.
size-full equivale a w-full h-full.
object-cover llena el espacio sin deformar la foto.
transition-transform duration-700 group-hover:scale-110 crea un hover suave desde el padre.
absolute inset-0 hace que el overlay cubra toda la figura.
bg-gradient-to-t from-slate-950 to-transparent opacity-60 mejora el dramatismo visual sin tocar la imagen original.

Paso 4: ordenar el contenido con padding y alineación

Ahora estilizamos el bloque de texto:

<article class="p-5 md:min-w-1/2 md:self-center">
...
</article>

Estas utilidades resuelven tres problemas distintos:

p-5 crea un colchón interno cómodo.
md:min-w-1/2 asegura que el texto tenga presencia suficiente cuando la card se divide en dos columnas.
md:self-center centra verticalmente el artículo respecto a la imagen.

Este es un buen ejemplo de cómo Tailwind mezcla layout general con ajustes puntuales del componente.

Paso 5: crear jerarquía visual para badge, título y párrafo

Ahora damos estilo al contenido editorial:

<div class="flex items-center gap-2">
<span class="rounded-full bg-amber-500/10 px-2.5 py-0.5 text-[10px] font-bold uppercase tracking-wider text-amber-500">
  Premium Edition
</span>
</div>

<h3 class="mt-3 text-2xl font-bold tracking-tight text-white">Studio Pro Max</h3>
<p class="mt-2 text-sm leading-relaxed text-slate-400">
Redescubre el sonido con una profundidad acústica inigualable y acabados en cuero natural.
</p>

Conceptos clave:

rounded-full transforma el badge en una cápsula.
bg-amber-500/10 muestra la utilidad de opacidad integrada con /10.
text-[10px] es otro valor arbitrario útil cuando quieres un tamaño muy específico.
uppercase tracking-wider da carácter de etiqueta.
mt-3 y mt-2 construyen ritmo vertical.
text-2xl font-bold tracking-tight hace que el título domine.
leading-relaxed text-slate-400 mejora legibilidad y contraste del párrafo.

Paso 6: precio y botón como bloque de cierre

El cierre de la card necesita equilibrio: información a la izquierda, acción a la derecha.

<div class="mt-8 flex items-center justify-between">
<div class="flex flex-col">
  <span class="text-xs font-medium text-slate-500 line-through">$450</span>
  <span class="text-2xl font-black text-white">$349</span>
</div>

<button class="rounded-2xl bg-amber-500 px-6 py-3 text-sm font-bold text-black transition-all hover:bg-amber-400 hover:shadow-[0_0_20px_rgba(245,158,11,0.4)] active:scale-95">
  Comprar ahora
</button>
</div>

Aquí practicas:

justify-between para separar dos grupos extremos.
flex-col para apilar precio anterior y precio actual.
line-through para comunicar descuento.
font-black para reforzar el precio principal.
px-6 py-3 para construir un botón con buen peso visual.
transition-all hover:bg-amber-400 para feedback inmediato.
hover:shadow-[0_0_20px_rgba(245,158,11,0.4)] como ejemplo de sombra arbitraria.
active:scale-95 para una respuesta táctil al hacer clic.

Lo interesante del botón

No necesitas salir a un archivo CSS para tener hover, active o una sombra personalizada. Todo queda expresado directamente en el HTML de forma legible.

Paso 7: responsive y hover, dos ideas que se mezclan muy bien

La card final no mejora por una sola utilidad, sino por la combinación entre variantes:

md:flex-row cambia el layout según el breakpoint.
md:max-w-xl amplía el ancho solo cuando hay espacio suficiente.
group-hover:scale-110 conecta la interacción del contenedor con la imagen.
hover:bg-amber-400 y active:scale-95 añaden respuesta visual al CTA.

Una lección importante de Tailwind es esta: las variantes se leen casi como una frase.

md:flex-row significa “en md, usa fila”.

group-hover:scale-110 significa “cuando el grupo esté en hover, escala este elemento”.

hover:shadow-[...] significa “en hover, aplica esta sombra exacta”.

Resultado final

Este es el componente completo después de ensamblar todas las piezas:

<main class="flex min-h-svh items-center justify-center bg-white p-6">
<section class="group relative flex w-full max-w-sm flex-col gap-4 rounded-[2rem] bg-slate-900 p-3 shadow-2xl md:max-w-xl md:flex-row">

  <figure class="relative aspect-[4/5] overflow-hidden rounded-2xl">
    <img
      src="https://images.unsplash.com/photo-1505740420928-5e560c06d30e"
      class="size-full object-cover transition-transform duration-700 group-hover:scale-110"
    />
    <div class="absolute inset-0 bg-gradient-to-t from-slate-950 to-transparent opacity-60"></div>
  </figure>

  <article class="p-5 md:min-w-1/2 md:self-center">
    <div class="flex items-center gap-2">
      <span class="rounded-full bg-amber-500/10 px-2.5 py-0.5 text-[10px] font-bold tracking-wider text-amber-500 uppercase">
        Premium Edition
      </span>
    </div>

    <h3 class="mt-3 text-2xl font-bold tracking-tight text-white">Studio Pro Max</h3>
    <p class="mt-2 text-sm leading-relaxed text-slate-400">
      Redescubre el sonido con una profundidad acústica inigualable y acabados en cuero natural.
    </p>

    <div class="mt-8 flex items-center justify-between">
      <div class="flex flex-col">
        <span class="text-xs font-medium text-slate-500 line-through">$450</span>
        <span class="text-2xl font-black text-white">$349</span>
      </div>

      <button class="rounded-2xl bg-amber-500 px-6 py-3 text-sm font-bold text-black transition-all hover:bg-amber-400 hover:shadow-[0_0_20px_rgba(245,158,11,0.4)] active:scale-95">
        Comprar ahora
      </button>
    </div>
  </article>

</section>
</main>

Qué deberías recordar de este ejercicio

Si mañana tuvieras que repetir la card sin mirar esta guía, quédate con esto:

empieza por el layout del contenedor padre
define proporciones y recorte de imagen antes de ajustar detalles
usa gap-* y p-* para respirar, no márgenes caóticos por todos lados
apóyate en md: para evolucionar la composición sin reescribir todo
usa estados como hover: o group-hover: para que la interfaz se sienta viva
reserva los valores arbitrarios para casos donde realmente aportan precisión

Ese es justamente el cambio mental que Tailwind intenta enseñarte: construir la interfaz como un sistema de decisiones pequeñas, claras y acumulativas.