JSFiddle - React, Tailwind, and code Playground

by cchana

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<div class="container col-3">

  <div class="service active">
      <i class="fa fa-times"></i>
      <h2>Service Name</h2>
  </div>

  <div class="service">
      <i class="fa fa-times"></i>
      <h2>Service Name</h2>
  </div>

  <div class="service">
      <i class="fa fa-times"></i>
      <h2>Service Name</h2>
  </div>

  <div class="service">
      <i class="fa fa-times"></i>
      <h2>Service Name</h2>
  </div>

  <div class="service">
      <i class="fa fa-times"></i>
      <h2>Service Name</h2>
  </div>

  <div class="service">
      <i class="fa fa-times"></i>
      <h2>Service Name</h2>
  </div>

  <div class="service">
      <i class="fa fa-times"></i>
      <h2>Service Name</h2>
  </div>

  <div class="service">
      <i class="fa fa-times"></i>
      <h2>Service Name</h2>
  </div>

  <div class="service">
      <i class="fa fa-times"></i>
      <h2>Service Name</h2>
  </div>

  <div class="service">
      <i class="fa fa-times"></i>
      <h2>Service Name</h2>
  </div>

  <div class="service">
      <i class="fa fa-times"></i>
      <h2>Service Name</h2>
  </div>

  <div class="service">
      <i class="fa fa-times"></i>
      <h2>Service Name</h2>
  </div>

  <div class="service">
      <i class="fa fa-times"></i>
      <h2>Service Name</h2>
  </div>

  <div class="service">
      <i class="fa fa-times"></i>
      <h2>Service Name</h2>
  </div>

  <div class="service">
      <i class="fa fa-times"></i>
      <h2>Service Name</h2>
  </div>

  <div class="service">
      <i class="fa fa-times"></i>
      <h2>Service Name</h2>
  </div>

  <div class="service">
      <i class="fa fa-times"></i>
      <h2>Service Name</h2>
  </div>

  <div class="service">
      <i class="fa fa-times"></i>
      <h2>Service Name</h2>
  </div>

  <div class="service">
      <i class="fa fa-times"></i>
      <h2>Service Name</h2>
  </div>

  <div class="service">
    ...

SCSS

.container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    position: relative;
    width: 100%;
}
.service {
    background-color: red;
    height: 100px;
    position: relative;
    &:first-child:before {
        background-color: silver;
        content: '';
        display: block;
        height: 100px;
        position: absolute;
        top: 100px;
        width: 100%;
    }
    &.active:after {
        bottom: 0;
        content: '^';
        position: absolute;
    }
}

@media screen and (min-width: 400px; max-width: 599px) {
    .service {
        width: calc((100% / 3) - 10px);
        &:nth-child(n + 4) {
            margin-top: 100px;
        }
    }
}

@media screen and (min-width: 600px; max width: 799px) {
    .service {
        width: calc((100% / 4) - 10px);
        &:nth-child(n + 5) {
            margin-top: 100px;
        }
    }
}

@media screen and (min-width: 800px) {
    .service {
        width: calc((100% / 6) - 10px);
        &:nth-child(n + 7) {
            margin-top: 100px;
        }
    }
}