## Tarea
Completa la estructura HTML proporcionada agregando las clases de Tailwind CSS que faltan según los requisitos de diseño.
- **Div padre**: Establecer la visualización en flex y organizar los elementos en una columna;
- **Divs hijos**: Centrar los elementos horizontal y verticalmente dentro del contenedor.

PCFET0NUWVBFIGh0bWw+CjxodG1sIGxhbmc9ImVuIj4KICA8aGVhZD4KICAgIDxtZXRhIGNoYXJzZXQ9IlVURi04IiAvPgogICAgPG1ldGEgbmFtZT0idmlld3BvcnQiIGNvbnRlbnQ9IndpZHRoPWRldmljZS13aWR0aCwgaW5pdGlhbC1zY2FsZT0xLjAiIC8+CiAgICA8dGl0bGU+Q2hhbGxlbmdlOiBGbGV4Ym94IFV0aWxpdGllcyAtIFRhc2s8L3RpdGxlPgogICAgPHNjcmlwdCBzcmM9Imh0dHBzOi8vY2RuLnRhaWx3aW5kY3NzLmNvbSI+PC9zY3JpcHQ+CiAgPC9oZWFkPgogIDxib2R5PgogICAgPGRpdgogICAgICBjbGFzcz0iX19fX18gX19fX18gX19fX18gX19fX18gYmctcmVkLTEwMCIKICAgICAgc3R5bGU9ImhlaWdodDogMjAwcHgiCiAgICA+CiAgICAgIDxkaXYgY2xhc3M9InAtNCBiZy1ibHVlLTUwMCI+SXRlbSAxPC9kaXY+CiAgICAgIDxkaXYgY2xhc3M9InAtNCBiZy1ncmVlbi01MDAiPkl0ZW0gMjwvZGl2PgogICAgPC9kaXY+CiAgPC9ib2R5Pgo8L2h0bWw+

Para el `div` principal,
- Utilizar `flex` para establecer un elemento que use Flexbox en su diseño;
- Utilizar `flex-col` para colocar los elementos en una columna;
- Utilizar `items-center` para alinear los elementos al centro;
- Utilizar `justify-center` para justificar los elementos al centro.

PCFET0NUWVBFIGh0bWw+CjxodG1sIGxhbmc9ImVuIj4KICA8aGVhZD4KICAgIDxtZXRhIGNoYXJzZXQ9IlVURi04IiAvPgogICAgPG1ldGEgbmFtZT0idmlld3BvcnQiIGNvbnRlbnQ9IndpZHRoPWRldmljZS13aWR0aCwgaW5pdGlhbC1zY2FsZT0xLjAiIC8+CiAgICA8dGl0bGU+Q2hhbGxlbmdlOiBGbGV4Ym94IFV0aWxpdGllcyAtIFNvbHV0aW9uPC90aXRsZT4KICAgIDxzY3JpcHQgc3JjPSJodHRwczovL2Nkbi50YWlsd2luZGNzcy5jb20iPjwvc2NyaXB0PgogIDwvaGVhZD4KICA8Ym9keT4KICAgIDxkaXYKICAgICAgY2xhc3M9ImZsZXggZmxleC1jb2wgaXRlbXMtY2VudGVyIGp1c3RpZnktY2VudGVyIGJnLXJlZC0xMDAiCiAgICAgIHN0eWxlPSJoZWlnaHQ6IDIwMHB4IgogICAgPgogICAgICA8ZGl2IGNsYXNzPSJwLTQgYmctYmx1ZS01MDAiPkl0ZW0gMTwvZGl2PgogICAgICA8ZGl2IGNsYXNzPSJwLTQgYmctZ3JlZW4tNTAwIj5JdGVtIDI8L2Rpdj4KICAgIDwvZGl2PgogIDwvYm9keT4KPC9odG1sPg==

Aprende a estilizar sitios web de manera eficiente utilizando Tailwind CSS, un framework utility-first para el desarrollo rápido de interfaces de usuario. Descubre cómo configurar Tailwind y aplicar clases utilitarias para colores, tipografía, bordes y sombras. Construye y estiliza componentes esenciales como botones, tarjetas y formularios. Domina técnicas de maquetación utilizando utilidades de espaciado, flexbox y grid. Crea diseños responsivos y personaliza Tailwind para adaptarlo a las necesidades de tu proyecto.

Conozca Tailwind CSS, un framework utility-first reconocido por su flexibilidad y eficiencia en el diseño web. Descubra los principales beneficios y la filosofía utility-first. Además, explore los métodos sencillos de instalación mediante CDN o npm/yarn.

Descubre los elementos fundamentales de Tailwind CSS, incluyendo la comprensión de las clases utilitarias y su aplicación a los elementos HTML. Profundiza en técnicas esenciales de estilo como la configuración de colores, bordes, sombras y utilidades tipográficas.

Sumérgete en aplicaciones prácticas centradas en la creación y el diseño de botones, formularios y tarjetas. A través de desafíos prácticos, dominarás la construcción de estos componentes esenciales de la interfaz de usuario, mejorando tus habilidades con ejemplos del mundo real.

Explora las utilidades esenciales de espaciado de Tailwind CSS, abarcando la aplicación de márgenes y rellenos a tus elementos. También aprenderás a utilizar las utilidades de flexbox para controlar el diseño mediante configuraciones de display, dirección de flex y alineación tanto horizontal como vertical. Además, profundizarás en las utilidades de grid para crear diseños de cuadrícula simples pero potentes, dominando la configuración de contenedores e ítems de grid.

Descubra cómo personalizar Tailwind CSS para satisfacer los requisitos de diseño de su proyecto y crear diseños adaptables para diversos dispositivos.

Desafío: Flexbox en Acción

Tarea

Awesome!

Desafío: Flexbox en Acción

Tarea