En esta clase, vamos a desarrollar un pop-up funcional utilizando Tailwind CSS. El objetivo es crear un elemento sencillo que incluya texto informativo y un botón, mientras controlamos su visibilidad y diseño con estilos dinámicos.

Estructura inicial

Comenzamos construyendo la estructura básica del pop-up. Esto incluye:

1. Contenedor principal:

   • Añadimos bordes con border y border-gray.
   • Aplicamos un relleno interno con p para mejorar el espaciado.

2. Texto del pop-up:

   • Configuramos el texto para que sea grande y en negrita con clases como text-xl y font-semibold.
   • Centramos el contenido usando text-center.

3. Botón de acción:

   • Creamos un botón con clases de estilo como bg-primary, hover:bg-primary-light, y text-white para hacerlo visualmente atractivo.
   • Añadimos w-full y block para que ocupe todo el ancho disponible.

Control de visibilidad

Para gestionar cuándo se muestra o se oculta el pop-up, usamos Alpine.js:

1. Estado inicial:

   • Definimos un estado llamado menuDeMiBusiness inicializado en false.

2. Interacciones:

   • Configuramos que al pasar el ratón o hacer clic, el estado cambie a true o false.
   • Añadimos lógica para cerrar el pop-up si el usuario hace clic fuera del área.

Mejoras de diseño

• Ajustamos el posicionamiento del pop-up con clases como absolute y right-0 para anclarlo correctamente en la página.
• Controlamos el tamaño máximo del contenedor con max-w y aplicamos un ancho dinámico con w.
• Usamos colores personalizados para el texto (text-gray-700) y ajustamos el espaciado interno y externo.

Interactividad adicional

1. Cierre dinámico:

   • Configuramos eventos para cerrar el pop-up al hacer clic tanto dentro como fuera del área del mismo.
   • Usamos la clase cursor-pointer para mejorar la experiencia visual en elementos interactivos.

2. Alternar visibilidad:

   • Implementamos la funcionalidad de alternar el estado del pop-up de manera fluida.

Resultado

Hemos creado un pop-up funcional y visualmente atractivo, que responde bien a las interacciones del usuario. El diseño es personalizable y fácilmente adaptable a otros contextos dentro de un proyecto de desarrollo web.