React Card Example

Todo List > React Card Example

To build our Card component, we'll add just a few styles to a styled-component div. The box-shadow alone gives the feeling that our component is lifting off the page. Centering the text and adding padding will give the content some space around it within the card. We'll use margin and max-width to center the Card to the page.

Your mission

Create a component around the list of Tasks called TasksContainer that sets a width of 400px, a margin top of 40px and aligns text to the left. Center this element. We've added a new file TasksContainer for you to build this component in.

Lesson 5/20

import styled from "styled-components";

const Card = styled.div`
  padding: 40px; 
  text-align: center; 
  box-shadow: 0px 0px 20px silver; 
  max-width: 500px; 
  margin: 24px auto; 
  background-color: white; 
`;

export default Card;

Open Sandbox