JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;600&display=swap" rel="stylesheet">
    <link rel="shortcut icon" href="./images/favicon-32x32.png" type="image/x-icon">
    <title>NFT Preview Card</title>
</head>
<body>
    <div class="page">
        <div class="page__container">
            
            <div class="overlayPar">
            <img src="https://media.marketrealist.com/brand-img/LyxvUFSpl/0x0/nft-black-1617613285599.jpg" alt="" class="equilibrium">
            <div class="imgOverlay">
              <span class="eye"></span>
            </div>
            </div>
            <div class="text">
                <h1><a href="#" class="link">Equilibrium #3429</a></h1>
                <p class="description">
                    Our Equilibrium collection promotes
                    balance and calm.
                </p>
                <div class="price-deadline">
                    <div class="eth">
                        <img src="https://media.marketrealist.com/brand-img/LyxvUFSpl/0x0/nft-black-1617613285599.jpg" alt="" class="eth-icon">
                        <p class="eth-price">0.041 ETH</p>
                    </div>
                    <div class="deadline">
                        <img src="https://media.marketrealist.com/brand-img/LyxvUFSpl/0x0/nft-black-1617613285599.jpg" alt="" class="clock-icon">
                        <p class="due-date">3 days left</p>
                    </div>
                </div>
            </div>
           ...

CSS

:root {
    --soft-blue: hsl(215, 51%, 70%);
    --cyan: hsl(178, 100%, 50%);
    --main-bg: hsl(217, 54%, 11%);
    --card-bg: hsl(216, 50%, 16%);
    --line: hsl(215, 32%, 27%);
    --white: hsl(0, 0%, 100%);
    --font-size: 18px;
    --font: 'Outfit', sans-serif;
}

body {
    margin: 0;
    font-family: var(--font);
}

.page {
    display: flex;
    height: 100vh;
    background-color: var(--main-bg);
    justify-content: center;
    align-items: center;
}

.page__container {
    box-sizing: border-box;
    padding: 20px 20px 0px 20px;
    background-color: var(--card-bg);
    width: 400px;
    height: 650px;
    border-radius: 20px;
}

.page__container img {
    margin: 0;
    max-width: 100%;
    max-height: 100%;
    border-radius: 10px;
}

.page__container h1 {
    color: var(--white);
    font-size: 26px;
    margin: 15px 0 10px;
}

.page__container h1 a {
    color: var(--white);
    text-decoration: none;
}

.page__container .description {
    margin: 0;
    font-weight: 400;
    color: var(--soft-blue);
    font-size: 20px;
}

.price-deadline {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.eth {
    display: flex;
    align-items: center;
}

.eth .eth-icon {
    max-height: 18px;
    max-width: 11px;
    margin-right: 5px;
}

.eth .eth-price {
    color: var(--cyan);
}

.deadline {
    display: flex;
    align-items: center;
}

.deadline .clock-icon {
    max-width: 17px;
    max-height: 17px;
    margin-right: 5px;
}

.deadline .due-date {
    font-weight: 600;
    color: var(--soft-blue);
}

.divisor {
    height: 1px;
    background-color: var(--soft-blue);
    border: none;
}

.author {
    display: flex;
    align-items: center;
    padding-top: 10px;
}

.author .avatar {
    border: 1px solid white;
    border-radius: 50px;
    max-height: 40px;
    max-width: 40px;
    margin-right: 10px;
}

.author .credits {
    color: var(--soft-blue);
}

.author a {
    font-size: 16px;
    color: var(--white);
   ...