## Tarea
Utilizando las utilidades de Tailwind CSS para colores, bordes y sombras, crear un componente de tarjeta estilizada con las siguientes especificaciones:
1. El contenedor exterior debe tener:
   - Un color de fondo blanco;
   - Una sombra de tamaño medio.
2. La tarjeta debe contener:
   - Un encabezado (`h2`) con tamaño de texto 2xl y color de texto gray-900;
   - Un párrafo (`p`) con color de texto gray-700.
3. Dentro de la tarjeta, crear una caja con borde que tenga:
   - Un color de fondo azul claro (por ejemplo, blue-50);
   - Color de borde azul;
   - Esquinas medianamente redondeadas;
   - Color de texto blue-700.
4. Agregar otra caja con:
   - Un color de fondo verde claro (por ejemplo, green-100);
   - Color de borde verde;
   - Esquinas redondeadas;
   - Sombra pequeña;
   - Color de texto green-700.

PCFET0NUWVBFIGh0bWw+CjxodG1sIGxhbmc9ImVuIj4KICA8aGVhZD4KICAgIDxtZXRhIGNoYXJzZXQ9IlVURi04IiAvPgogICAgPG1ldGEgbmFtZT0idmlld3BvcnQiIGNvbnRlbnQ9IndpZHRoPWRldmljZS13aWR0aCwgaW5pdGlhbC1zY2FsZT0xLjAiIC8+CiAgICA8dGl0bGU+Q2hhbGxlbmdlOiBCYXNpYyBTdHlsaW5nIC0gVGFzazwvdGl0bGU+CiAgICA8c2NyaXB0IHNyYz0iaHR0cHM6Ly9jZG4udGFpbHdpbmRjc3MuY29tIj48L3NjcmlwdD4KICA8L2hlYWQ+CiAgPGJvZHk+CiAgICA8ZGl2IGNsYXNzPSJiZy1fX19fXyBwLTQgc2hhZG93LV9fX19fIj4KICAgICAgPGgyIGNsYXNzPSJ0ZXh0LV9fX19fIHRleHQtX19fX18tX19fX18iPlN0eWxlZCBDYXJkPC9oMj4KICAgICAgPHAgY2xhc3M9Il9fX19fLV9fX19fLV9fX19fIj4KICAgICAgICBUaGlzIGNhcmQgaXMgc3R5bGVkIHVzaW5nIFRhaWx3aW5kIENTUyB1dGlsaXRpZXMuCiAgICAgIDwvcD4KICAgICAgPGRpdiBjbGFzcz0iYm9yZGVyIGJvcmRlci1fX19fXy01MDAgcm91bmRlZC1fX19fXyBwLTQgYmctX19fX18tX19fX18iPgogICAgICAgIDxwIGNsYXNzPSJfX19fXy1fX19fXy1fX19fXyI+CiAgICAgICAgICBUaGlzIGlzIGEgYm9yZGVyZWQgYm94IHdpdGggYSBiYWNrZ3JvdW5kIGNvbG9yLgogICAgICAgIDwvcD4KICAgICAgPC9kaXY+CiAgICAgIDxkaXYKICAgICAgICBjbGFzcz0ibXQtNCBwLTQgYmctX19fX18tX19fX18gYm9yZGVyIGJvcmRlci1fX19fXy1fX19fXyBfX19fXyBzaGFkb3ctX19fX18iCiAgICAgID4KICAgICAgICA8cCBjbGFzcz0iX19fX18tX19fX18tX19fX18iPkFub3RoZXIgYm94IHdpdGggZGlmZmVyZW50IHN0eWxpbmcuPC9wPgogICAgICA8L2Rpdj4KICAgIDwvZGl2PgogIDwvYm9keT4KPC9odG1sPg==

1. **Colores de fondo:** Utilizar `bg-white`, `bg-blue-50`, `bg-green-100` para los colores de fondo;
2. **Colores de texto:** Utilizar `text-gray-900`, `text-gray-700`, `text-blue-700`, `text-green-700` para los colores de texto;
3. **Colores de borde:** Utilizar `border-blue-500`, `border-green-500` para los colores de borde;
4. **Radio de borde:** Utilizar `rounded-md`, `rounded` para esquinas redondeadas;
5. **Sombras:** Utilizar `shadow-md`, `shadow-sm` para las sombras;
6. **Tamaño de texto:** Utilizar `text-2xl` para el tamaño del encabezado.

PCFET0NUWVBFIGh0bWw+CjxodG1sIGxhbmc9ImVuIj4KICA8aGVhZD4KICAgIDxtZXRhIGNoYXJzZXQ9IlVURi04IiAvPgogICAgPG1ldGEgbmFtZT0idmlld3BvcnQiIGNvbnRlbnQ9IndpZHRoPWRldmljZS13aWR0aCwgaW5pdGlhbC1zY2FsZT0xLjAiIC8+CiAgICA8dGl0bGU+Q2hhbGxlbmdlOiBCYXNpYyBTdHlsaW5nIC0gU29sdXRpb248L3RpdGxlPgogICAgPHNjcmlwdCBzcmM9Imh0dHBzOi8vY2RuLnRhaWx3aW5kY3NzLmNvbSI+PC9zY3JpcHQ+CiAgPC9oZWFkPgogIDxib2R5PgogICAgPGRpdiBjbGFzcz0iYmctd2hpdGUgcC00IHNoYWRvdy1tZCI+CiAgICAgIDxoMiBjbGFzcz0idGV4dC0yeGwgdGV4dC1ncmF5LTkwMCI+U3R5bGVkIENhcmQ8L2gyPgogICAgICA8cCBjbGFzcz0idGV4dC1ncmF5LTcwMCI+CiAgICAgICAgVGhpcyBjYXJkIGlzIHN0eWxlZCB1c2luZyBUYWlsd2luZCBDU1MgdXRpbGl0aWVzLgogICAgICA8L3A+CiAgICAgIDxkaXYgY2xhc3M9ImJvcmRlciBib3JkZXItYmx1ZS01MDAgcm91bmRlZC1tZCBwLTQgYmctYmx1ZS01MCI+CiAgICAgICAgPHAgY2xhc3M9InRleHQtYmx1ZS03MDAiPgogICAgICAgICAgVGhpcyBpcyBhIGJvcmRlcmVkIGJveCB3aXRoIGEgYmFja2dyb3VuZCBjb2xvci4KICAgICAgICA8L3A+CiAgICAgIDwvZGl2PgogICAgICA8ZGl2CiAgICAgICAgY2xhc3M9Im10LTQgcC00IGJnLWdyZWVuLTEwMCBib3JkZXIgYm9yZGVyLWdyZWVuLTUwMCByb3VuZGVkIHNoYWRvdy1zbSIKICAgICAgPgogICAgICAgIDxwIGNsYXNzPSJ0ZXh0LWdyZWVuLTcwMCI+QW5vdGhlciBib3ggd2l0aCBkaWZmZXJlbnQgc3R5bGluZy48L3A+CiAgICAgIDwvZGl2PgogICAgPC9kaXY+CiAgPC9ib2R5Pgo8L2h0bWw+

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: Aplicar Estilos Básicos

Tarea

Awesome!

Desafío: Aplicar Estilos Básicos

Tarea