Challenge: Basic Styling

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.