En esta clase, comenzamos a trabajar en la barra superior de la página web. Este componente incluye iconos, texto y algunos estilos básicos, lo que nos permitirá explorar varias utilidades de Tailwind CSS.

Proceso de creación

1. Estructura inicial con HTML
   Creamos la estructura básica utilizando un <div> como contenedor.
   Contenido inicial:

   • Texto: "Envío gratis", "Pruebas sin compromiso", "Garantía".

2. Estilo con Tailwind CSS

   • Flexbox: Aplicamos flex para alinear los elementos en fila.
   • Espaciado entre elementos: Usamos gap-4 (o ajustamos a 6/1 según necesidad).
   • Centrado: Añadimos justify-center para centrar el contenido horizontalmente.

3. Tamaños y tipografía

   • Tamaño del texto: Utilizamos text-sm (14px) para reducir el tamaño.
   • Color del texto: Aplicamos text-white para que el texto sea blanco.
   • Fondo: Configuramos un color de fondo con bg-[color personalizado].

4. Ajustes finales

   • Padding: Añadimos py-2 para espacio superior e inferior.
   • Iconos:
     • Usamos Heroicons, ideales para integrarse con Tailwind.
     • Ajustamos el tamaño con w-5 h-5 y centramos con items-center.

Resumen de las clases utilizadas

• Flexbox:

  <div class="flex justify-center gap-6">
  

• Espaciado y alineación:

  <div class="py-3 text-sm text-white bg-[color]">
  

• Iconos con Heroicons:

  <svg class="w-5 h-5"></svg>
  

Resultado final

Al finalizar, obtuvimos una barra superior funcional, alineada y estilizada. Aunque básica, esta sección es un gran ejemplo para entender cómo usar Tailwind CSS de forma eficiente.

Próximos pasos

En la siguiente clase trabajaremos en el Header. Exploraremos:

• Gestión de imágenes
• Bordes.
• Creación de un menú interactivo