Component Styling System

Build a simple React component library that demonstrates proper CSS usage with Create React App's CSS handling capabilities.

Requirements

Create a reusable card component with the following features:

1. Card Component - A card component that displays a title, content, and footer
2. CSS Styling - Style the card using plain CSS imported into the component
3. Multiple Cards - Support rendering multiple cards with different content on the same page

Specifications

Card Component

Create a Card component in src/Card.js that:

• Accepts title, content, and footer as props
• Renders these props in appropriate HTML elements (use a div with class "card" as the root element)
• Imports and applies CSS styles from a dedicated CSS file

CSS Styling

Create a CSS file src/Card.css that provides styling for:

• The card container (.card class) with padding, border, and background color
• The card title (.card-title class) with appropriate font styling
• The card content (.card-content class) with proper spacing
• The card footer (.card-footer class) with distinct styling

The styling should make the card visually distinct and well-formatted.

Main Application

Update src/App.js to:

• Import and use the Card component
• Render at least two Card components with different content
• Import the main application CSS file src/App.css

Test Cases

The implementation must satisfy the following test cases:

• The Card component correctly renders the title prop in an element with class "card-title" @test
• The Card component correctly renders the content prop in an element with class "card-content" @test
• The Card component correctly renders the footer prop in an element with class "card-footer" @test
• Multiple Card components can be rendered without style conflicts @test

Implementation

The Card component should be implemented in src/Card.js and styled with src/Card.css.

@generates

Dependencies { .dependencies }

react { .dependency }

Provides the React library for building components.

@testing-library/react { .dependency }

Provides testing utilities for React components.