JSFiddle - React, Tailwind, and code Playground

by Sampath_Madhuranga

HTML

<div class="showMe_features">
  <div class="wrapper">
    <div class="showMe_features--inner">
      <div class="feature-box">
        <span class="circle">
          <img src="">
        </span>
        <p>Discover Park</p>
      </div>
      <div class="feature-box">
        <span class="circle">
          <img src="">
        </span>
        <p>Discover Park</p>
      </div>
      <div class="feature-box">
        <span class="circle">
          <img src="">
        </span>
        <p>Discover Park</p>
      </div>
      <span class="dotted-line"></span>
    </div>
  </div>
</div>

SCSS

.showMe_features {
  &--inner {
    position:relative;
    display:flex;
    flex-basis:100%;
    .feature-box {
      display:flex;
      flex-direction: row;
      flex-wrap:wrap;
      justify-content: space-evenly;
      align-items:center;
      .circle {
        display:flex;
        justify-content: center;
        align-items: center;
        width: 200px;
        height: 200px;
        border-radius: 50%;
        img {
          
        }
      }
    }
    .dotted-line {
    }
  }
}