JSFiddle - React, Tailwind, and code Playground

HTML

<div class="internet-connection-rate__section">

  <section class="connection-rate__card">
    <div class="connection-rate__card-top"></div>
    <div class="connection-rate__card-center"></div>
    <div class="connection-rate__card-bottom"></div>
  </section>

  <section class="connection-rate__card"></section>
  <section class="connection-rate__card"></section>
  <section class="connection-rate__card"></section>
  <section class="connection-rate__card"></section>
</div>

CSS

.internet-connection-rate__section {
    display: flex;
    flex-wrap: wrap;

    margin-top: 40px;
}


.connection-rate__card {
    width: 424px;
    height: 356px;

    margin: 0 20px 20px 0;
    padding: 17px 24px;

    border: 1px solid rgba(21, 21, 28, 0.15);
    box-sizing: border-box;
    border-radius: 8px;

    display: flex;
    flex-wrap: wrap;
}

.connection-rate__card:nth-child(3),
.connection-rate__card:nth-child(6) {
    margin-right: 0;
}

.connection-rate__card-top {
    display: flex;
    width: 100%;
    height: 50px;
    background-color: #2f0099;
}

.connection-rate__card-center {
    display: flex;
    width: 100%;
    height: 50px;
    background-color: yellow;
}

.connection-rate__card-bottom {
    display: flex;
    width: 100%;
    height: 50px;
    background-color: black;
}