Aranging cards in react js

Question

I'm a beginner and just started to build applications with react js. I need to arrange the card and make it in a medium size. I want cards something like this below, Any help would be appreciated. Thanks in advance

But I'm getting like this I'm stuck here.

This is my code

render() {
    return ( 

        { /*heading starts */ } <
        div style = {
            {
                paddingTop: 150,

                paddingLeft: 70,

                color: 'white'
            }
        } >
        < div style = {
            {
                position: 'absolute',
                paddingLeft: 260,
                color: 'black',
                top: 90,
            }
        } >
        < CardGroup >
        <Card >
        <Card.Img variant = "top"
        src = "./image/free.png" / >
        < Card.Body >
        <Card.Title > Free < /Card.Title> <
        Card.Text >
        in to additional content.This content is a little bit longer. </Card.Text> < /
        Card.Body > <
        Card.Footer >
        <
        small className = "text-muted" > Last updated 3 mins ago < /small> < /
        Card.Footer > 
        </div> 
    );
}

Answer 1

This is my code 


 <
                    div style = {
                        {
        
                            position: 'absolute',
                            paddingLeft: 260,
                            color: 'black',
                            top: 90,
                        }
                    } >
                    <
                    CardGroup >
                    <
                    Card >
                    <
                    Card.Img variant = "top"
                    src = "./image/free.png" / >
                    <
                    Card.Body >
                    <
                    Card.Title > Free < /Card.Title> <
                    Card.Text >
                    in to additional content.This content is a little bit longer. <
                    /Card.Text> < /
                    Card.Body > <
                    Card.Footer >
                    <
                    small className = "text-muted" > Last updated 3 mins ago < /small> < /
                    Card.Footer > <
                    /Card> <
                    Card >
                    <
                    Card.Img variant = "top"
                    src = "./image/free.png" / >
                    <
                    Card.Body >
                    <
                    Card.Title > Card title < /Card.Title> <
                    Card.Text >
                    This card has supporting text below as a natural lead - in to additional content. { ' ' } <
                    /Card.Text> < /
                    Card.Body > <
                    Card.Footer >
                    <
                    small className = "text-muted" > Last updated 3 mins ago < /small> < /
                    Card.Footer > <
                    /Card> <
                    Card >
                    <
                    Card.Img variant = "top"
                    src = "./image/free.png" / > <
                    Card.Body >
                    <
                    Card.Title > Card title < /Card.Title> <
                    Card.Text >
                    This is a wider card with supporting text below as a natural lead - in to additional content.This card has even longer content than the first to show that equal height action. <
                    /Card.Text> < /
                    Card.Body > <
                    Card.Footer >
                    <
                    small className = "text-muted" > Last updated 3 mins ago < /small> < /
                    Card.Footer > <
                    /Card>  <
                    Card >
                    <
                    Card.Img variant = "top"
                    src = "./image/free.png" / >
                    <
                    Card.Body >
                    <
                    Card.Title > Card title < /Card.Title> <
                    Card.Text >
                    This is a wider card with supporting text below as a natural lead - in to additional content.This card has even longer content than the first to show that equal height action. <
                    /Card.Text> < /
                    Card.Body > <
                    Card.Footer >
                    <
                    small className = "text-muted" > Last updated 3 mins ago < /small> < /
                    Card.Footer > <
                    /Card> < /
                    CardGroup >
                    <
                    /
                    div >

Answer 2

I see is the selected card has the longest height of all, shadow and additional blue box on top. This is waht you can do to achieve that.

Create two css classes, one with all the styles that all cards have in common, the other with additional styles (selected), then add the additional class (selected) conditionally using state, so that when user selects card A it receives additional styles (selected class) and removes them in previously selected card.

import React, { useState } from "react";
import "./card.css";

const cards = () => {
  const [selected, setSelected] = useState('');
  return (
    <Container>
    <Card className={`normalcard ${selected == "1" ? "selectedcard": ""}`} />
    <Card className={`normalcard ${selected == "2" ? "selectedcard": ""}`} />
    <Card className={`normalcard ${selected == "3" ? "selectedcard": ""}`} />
    <Card className={`normalcard ${selected == "4" ? "selectedcard": ""}`} />
    </Container>
  )
}

export default cards;

.normalcard {
 ...
}

.selectedcard {
  ...normalcard;
  -webkit-box-shadow: 0 0 10px 0 #000000;
    -moz-box-shadow: 0 0 10px 0 #000000;
    box-shadow: 0 0 10px 0 #000000;
}