Winner.css

.winner-container {
  background-image: url('../../img/winner-background.jpg');
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;

  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  align-items: center;

  overflow: hidden;
}

.winner-bow {
  width: 100%;
}

.winner-title {
  width: 50%;
  margin-top: -15rem;
}

.winner-img {
  margin-top: -10rem;
  width: 10rem;
  border-radius: 50%;
  border: 8px solid var(--color-black);
}

.winner-img:hover {
  border: 8px solid var(--color-grey-light);
}

.winner-timer {
  display: grid;
  place-items: center;
}

.para {
  color: var(--color-grey-light);
  font-size: 1.5rem;
  font-weight: 700;
  -webkit-text-stroke: 1px var(--color-grey-dark);
}

/*********************** RESPONSIVENESS ***********************/
@media only screen and (max-width: 2560px) {
  .winner-img {
    width: 25rem;
    border: 8px solid var(--color-black);
  }

  .para {
    font-size: 3rem;
    -webkit-text-stroke: 2px var(--color-grey-dark);
  }
}

@media only screen and (max-width: 2560px) {
  .para {
    font-size: 2.3rem;
    -webkit-text-stroke: 1px var(--color-grey-dark);
  }
}

@media only screen and (max-width: 1280px) {
  .winner-img {
    width: 20rem;
  }
}

@media only screen and (max-width: 1366px) {
  .winner-img {
    width: 15rem;
  }
}

@media only screen and (max-width: 950px) {
  .winner-img {
    width: 9rem;
  }

  .winner-title {
    margin-top: -10rem;
  }
}

@media only screen and (max-width: 850px) {
  .winner-title {
    margin-top: -10rem;
  }

  .winner-img {
    margin-top: -10rem;
  }
}

@media only screen and (max-width: 750px) {
  .para {
    color: var(--color-grey-light);
    font-size: 1rem;
    font-weight: 700;
    -webkit-text-stroke: 1px var(--color-grey-dark);
  }

  .winner-img {
    width: 8rem;
    margin-top: -5rem;
  }
}

@media only screen and (max-width: 700px) {
  .winner-title {
    margin-top: -8rem;
  }

  .winner-img {
    margin-top: -3rem;
  }

  .time {
    font-size: 2.5rem;
    -webkit-text-stroke: 2px var(--color-grey-dark);
  }
}

@media only screen and (max-width: 500px) {
  .winner-title {
    margin-top: -6rem;
  }

  .winner-img {
    margin-top: -1rem;
  }
}

@media only screen and (max-width: 400px) {
  .winner-title {
    margin-top: -4rem;
  }

  .winner-img {
    margin-top: -1rem;
    width: 7rem;
    border: 5px solid var(--color-black);
  }

  .winner-img:hover {
    border: 5px solid var(--color-grey-light);
  }
}

@media only screen and (max-width: 350px) {
  .winner-title {
    margin-top: -4rem;
  }

  .winner-img {
    margin-top: -1rem;
    width: 5.5rem;
  }

  .winner-img:hover {
    border: 5px solid var(--color-grey-light);
  }

  .time {
    font-size: 2rem;
    -webkit-text-stroke: 2px var(--color-grey-dark);
  }
}

Winner.jsx

import React from 'react';
import Bow from '../../img/bow.png';
import Title from '../../img/winner-title.png';
import TheWinner from '../../img/users/user-2.jpeg';
import Timer from '../timer/Timer';
import './Winner.css';

export default class Winner extends React.Component {
  constructor() {
    super();

    this.state = {
      winner: [
        {
          id: 1,
          name: 'سارة',
          img: `${TheWinner}`,
          /* img: 'https://i.ibb.com/R70vBrQ/men.png' */
        },
      ],

      timer: new Date('Mar, 10, 2022 00:00:00'),
    };
  }

  // // Fetching data from the API
  // componentDidMount() {
  //   fetch('https://jsonplaceholder.typicode.com/users')
  //     .then((reponse) => {
  //       if (!reponse.ok)
  //         throw new Error(`HTTP error! status: ${reponse.status}`);
  //       return reponse.json();
  //     })
  //     .then((users) => this.setState({ winner: users }))
  //     .catch((error) => alert(`${error} Reload the page 💥💥`));
  // }

  render() {
    const Time = this.state.timer;

    // function countDown() {
    //   let interval = Time.getTime();
    //   --interval;
    //   console.log(interval);

    //   if (interval == 0) {
    //     console.log('done counting');
    //   }
    // }

    // setInterval(countDown, 1000);

    return (
      <div className="winner-container">
        <img className="winner-bow" src={Bow} alt="The Winner Bow" />
        <img className="winner-title" src={Title} alt="The Winner Title" />
        <img
          className="winner-img"
          src={this.state.winner[0].img}
          alt="The Winner"
        />
        <div className="winner-timer">
          <Timer Time={Time} />
        </div>
      </div>
    );
  }
}