Top 3 Create a Responsive Card in React JS with Vite

npm create vite@latest react-responsive-card --template react
cd react-responsive-card
npm install
npm run dev

import React from "react";
import "./Card.css";
import gooleicon from './assets/logo.png'
import gooleLogo from './assets/logo-2.png'
import profileimg from './assets/profile-photo.png'


const Card = () => {
 return (
   <div className="card-container">
           <div className="card">
             <div className="card-body">
               <div className="img-display">
               <img className='img-responsive' src={gooleLogo} />
                 <div className="img-circle">
                 <img className='img-responsive-2'src={gooleicon} />
                 </div>
               </div>
               <div className='main'>
                 <p className="title-p">Senior</p>
                 <p className="title-h">Software Developer</p>
                 <p className="title-bt">UP, India (<em>Remote</em>)</p>
               </div>
   
               <div className="detail">
               <span className="salary">
                 30k <em>/Month</em>
               </span>
               <span className="date">4 hours ago</span>
               </div>
             </div>
             <div className="footer">
               <div className="badge">
                 <img src={profileimg} />
                 <p>
                   <em> 70% </em>
                   <span className="text"> Profile Match</span>
                 </p>
               </div>
               <button>
                 <span className="material-symbols-outlined"> share </span>
               </button>
               <button>
                 <span className="material-symbols-outlined"> bookmark </span>
               </button>
             </div>
           </div>
         </div>
 );
};

export default Card;

.card-container {
 width: 100%;
 display: flex;
 flex-wrap: wrap;
 justify-content: center;
 gap: 20px;
}

.card {
 --color-primary: #356aff;
 --color-muted: #9895a2;
 --color-highlight: #242328;
 --border: 1px solid #2f2e32;

 position: relative;
 border-radius: 24px;
 width: clamp(200px, 80vw, 500px);
 /* padding-top: 30px; */
 background: #1c1b20;
}

.card-body {
 padding: 10px 25px;
}

.img-display {
 display: flex;
 justify-content: space-between;
 align-items: center;
 width: 100%;
}

.img-display .img-responsive {
 width: 70px;
 height: 70px;
}

.img-display .img-responsive-2 {
 width: 35px;
 height: 35px;
}

.img-circle {
 display: flex;
 flex-wrap: wrap;
 place-items: center;
 justify-content: center;
 border-radius: 100%;
 background: #2b2930;
 width: 50px;
 height: 50px;
}

.card .main {
 display: flex;
 flex-direction: column;
 justify-content: left;
 text-align: left;
}

.main :is(p) {
 font-weight: 400;
 margin: 2px;
}

.title-p {
 color: #8f8d96;
 font-size: 14px;
}

.title-h {
 color: #dbd8e2;
 font-weight: 600;
 font-size: 20px;
 margin-top: 18px;
 margin-bottom: 18px;
}

.card em {
 font-style: normal;
 color: #356aff;
}

.title-bt {
 color: #8f8d96;
 font-size: 12px;
}

.card .detail {
 display: flex;
 align-items: center;
 justify-content: space-between;
 padding: 0 0px;
 margin-top: 20px;
 margin-bottom: 20px;
 font-size: 12px;
}

.card .salary em {
 color: #9895a2;
}

.card .date {
 color: #9895a2;
}

.card .footer {
 border-top: var(--border);
 display: flex;
 align-items: center;
 justify-content: space-between;
 gap: 8px;
 padding: 16px 24px;
}

.card .badge {
 display: inline-flex;
 margin-right: auto;
 align-items: center;
 gap: 12px;
 padding-right: 20px;
 font-size: 14px;
 border-radius: 50px;
 background: var(--color-highlight);
}

.card .badge img {
 width: 40px;
}

.card .footer button {
 background: transparent;
 border: var(--border);
 width: 40px;
 height: 40px;
 border-radius: 50%;
 display: grid;
 place-items: center;
 color: inherit;
}

.card .footer button span {
 font-size: 22px;
}

@media (width >=430px) {
 .card {
  padding-top: 0;
 }

 .card .main {
  text-align: left;
 }

 .card .badge .text {
  display: inline;
 }

 .card h5 {
  margin-bottom: 28px;
 }
}

import { useState } from 'react'
import Card from "./Card";
import './App.css'

function App() {

  return (
    <>
      <Card/>
    </>
  )
}

export default App

#root {
  width: 100%;
  max-width: 1140px;
  margin: 0 auto;
}

body {
  margin: 0;
  display: flex;
  place-items: center;
  min-height: 100vh;
  background: #000000;
  color: #f9f9f9;
  overflow: hidden;
  font-family: "Euclid Circular A", "Poppins";
}
* {
  box-sizing: border-box;
}

npm run dev