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.