JSFiddle - React, Tailwind, and code Playground

HTML

<section class="blog section__blog" id="blog">
    <div class="blog__container container__blog">
        <h2 class="section__title">
            Important Articles and Statistics
        </h2>

        <div class="blog__content grid__blog">
            <article class="blog__card">
                <div class="blog__image">
                    <img src="https://st.depositphotos.com/1003098/2216/i/450/depositphotos_22166395-stock-photo-colleague-comforting-upset-doctor.jpg" alt="image of sad women" class="blog__img">
                    <a href="https://www.cdc.gov/std/statistics/2021/default.htm" class="blog__button">
                        <i class='bx bx-right-arrow-alt'></i>
                    </a>
                </div>

                <div class="blog__data">
                    <h2 class="blog__title">
                        STD Surveillance Data
                    </h2>
                    <p class="blog__description">
                        Preliminary data showing increase of STD spread from 2017 to 2021.
                    </p>

                    <div class="blog__footer">
                        <div class="blog__reaction">
                            <i class='bx bx-share'></i>
                            <span>Share</span>
                        </div>
                        <div class="blog__reaction">
                            <i class='bx bx-repost' ></i>
                            <span>Repost</span>
                        </div>
                    </div>
                </div>
            </article>

            <article class="blog__card">
                <div class="blog__image">
                    <img src="https://st.depositphotos.com/1003098/2216/i/450/depositphotos_22166395-stock-photo-colleague-comforting-upset-doctor.jpg" alt="photo of doctor telling patient bad news " class="blog__img">
                    <a...

CSS

/*=============== GOOGLE FONTS ===============*/
@import url("https://fonts.googleapis.com/css2?family=Lemon&family=Open+Sans:wght@400;600&display=swap");

/*=============== VARIABLES CSS ===============*/
:root {
  --header-height: 3.5rem;

  /*========== Colors ==========*/
  /*Color mode HSL(hue, saturation, lightness)*/
  --first-color: #38afff;
  --first-color-alt: hsl(204, 94%, 52%);
  --title-color: hsl(233, 32%, 15%);
  --text-color: hsl(233, 4%, 35%);
  --body-color: #daeef6;

  --first-hue: 250;
  --sat: 66%;
  --lig: 75%;
  --second-hue: 219;

  /*========== Font and typography ==========*/
  /*.5rem = 8px | 1rem = 16px ...*/
  --body-font: 'Open Sans', sans-serif;
  --second-font: 'Lemon', cursive;
  --biggest-font-size: 2.25rem;
  --normal-font-size: .938rem;

  /*========== z index ==========*/
  --z-tooltip: 10;
  --z-fixed: 100;
  --z-modal: 1000;
}

  
img {
  -khtml-user-select: none;
  -o-user-select: none;
  -moz-user-select: none;
  -webkit-user-select: none;
  user-select: none;
  pointer-events: none

}

/* Responsive typography */
@media screen and (min-width: 1224px) {
  :root {
    --biggest-font-size: 3.5rem;
    --normal-font-size: 1rem;
  }
}

/*=============== BASE ===============*/
* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

body {
  font-family: var(--body-font);
  font-size: var(--normal-font-size);
  background: var(--body-color);
  color: var(--text-color);
  overflow-x: hidden;
  position: relative;
}



img {
  max-width: 100%;
  height: auto;
}

/*=============== REUSABLE CSS CLASSES ===============*/
.container {
  max-width: 1024px;
  margin-right: 1.5rem;
  margin-left: 1.5rem;
}

.main {
  overflow: hidden; /* For the animations */
}

.section__blog {
  padding: 4.5rem 0 2rem;
}

.container__blog {
  max-width: 1024px;
  margin-left: 1.5rem;
  margin-right: 1.5rem;
}

.grid__blog {
  display: grid;
  gap: 1.5rem;
}



/*=============== BLOG ===============*/
.blog__container {
  padding-bottom:...