Tarefa

Utilizando as utilidades do Tailwind CSS para cores, bordas e sombras, crie um componente de cartão estilizado com as seguintes especificações:

1. O contêiner externo deve ter:
   • Cor de fundo branca;
   • Sombra média.
2. O cartão deve conter:
   • Um título (h2) com tamanho de texto 2xl e cor do texto gray-900;
   • Um parágrafo (p) com cor do texto gray-700.
3. Dentro do cartão, crie uma caixa com borda contendo:
   • Cor de fundo azul clara (por exemplo, blue-50);
   • Cor da borda azul;
   • Cantos arredondados médios;
   • Cor do texto blue-700.
4. Adicione outra caixa com:
   • Cor de fundo verde clara (por exemplo, green-100);
   • Cor da borda verde;
   • Cantos arredondados;
   • Sombra pequena;
   • Cor do texto green-700.

1. Cores de Fundo: Utilize bg-white, bg-blue-50, bg-green-100 para cores de fundo;
2. Cores do Texto: Utilize text-gray-900, text-gray-700, text-blue-700, text-green-700 para cores do texto;
3. Cores da Borda: Utilize border-blue-500, border-green-500 para cores da borda;
4. Arredondamento de Bordas: Utilize rounded-md, rounded para cantos arredondados;
5. Sombras: Utilize shadow-md, shadow-sm para sombras;
6. Tamanho do Texto: Utilize text-2xl para o tamanho do título.