Creating Cards In React

Creat New App In react using

npx create-react-app my-cards

Enter into your app using

npx create-react-app my-cards

then start your project using

npm start

Now Create Components in src for creating cards
Create Card body component using

import React from 'react';
import './cardstyle.css';

class CardBody extends React.Component {
render() {
return (

      <h2>{this.props.title}</h2>

      <p className="body-content">{this.props.text}</p>


    </div>
  )
}

}

export default CardBody;

then create card header using code

import React from 'react';
import './cardstyle.css';
class CardHeader extends React.Component {
render() {
const { image } = this.props;
var style = {
backgroundImage: 'url(' + image + ')',
};
return (

)
}
}

export default CardHeader;

Create Card using code (Note change path of Image and component as per your path)

import React from 'react';
import './cardstyle.css';
import CardBody from'./cardBody';
import CardHeader from './cardHeader';
import AnsMImg from './answerSheetMarking.jpg';

class Card extends React.Component {

render() {
  return (
    <article className="card">
      <CardHeader image={AnsMImg }/>
      <CardBody title={'Answer sheet marking'} 
      text={'Tool can read printed as well as handwritten answer sheets. Can transform the exam assessment manual process in schools and colleges.'}/>

    <button className="button button-primary" >
      Try it out
    </button> 
    </article>

  )
}

}
export default Card;

And Finally your card is ready

Render Card inside The App.js
and you can see your card in browser