Task

We will now proceed to create the Alert component, which will render all the elements passed as children and apply some specific styles to it. The task is:

1. Create the component Alert that has the div element inside.
2. The div element should have the alert class name.
3. The div element should have the children prop as the content.
4. The div element should have the following CSS.

padding: 20px;
border-radius: 10px;
background-color: lightgreen;
color: darkmagenta;

1. To create a div element in the component, use <div>...</div>.
2. To pass props.children as the text content enclose it within {...} and set props.children. Result: <div>{props.children}</div>.
3. To add a class name to the div element, use the className attribute and set it to alert. Result: className="alert".
4. To import the file with styles in the index.js file, use import statement and provide the correct path to the file. Result: import './index.css'.
5. To apply styles to the div element, use the class name selector .alert and insert the styles from the task.