Task

Using the Tailwind CSS utilities for colors, borders, and shadows, create a styled card component with the following specifications:

1. The outer container should have:

   • A white background color;

   • A medium shadow.

2. The card should contain:

   • A heading (h2) with text-size of 2xl and text color of gray-900;

   • A paragraph (p) with a text color of gray-700.

3. Inside the card, create a bordered box with:

   • A light blue background color (e.g., blue-50);

   • Blue border color;

   • Medium rounded corners;

   • Text color of blue-700.

4. Add another box with:

   • A light green background color (e.g., green-100);

   • Green border color;

   • Rounded corners;

   • Small shadow;

   • Text color of green-700.

1. Background Colors: Use bg-white, bg-blue-50, bg-green-100 for background colors;

2. Text Colors: Use text-gray-900, text-gray-700, text-blue-700, text-green-700 for text colors;

3. Border Colors: Use border-blue-500, border-green-500 for border colors;

4. Border Radius: Use rounded-md, rounded for rounded corners;

5. Shadows: Use shadow-md, shadow-sm for shadows;

6. Text Size: Use text-2xl for the heading size.