JSFiddle - React, Tailwind, and code Playground

by Sampath_Madhuranga

HTML

<div class="container">
  <div class="grid">
    <div class="grid__item"></div>
    <div class="grid__item"></div>
    <div class="grid__item"></div>
  </div>
</div>

SCSS

.container {
  max-width: calc(1136px + 24px);
  margin: 0 auto;
  padding: 0 16px;
  background-color: cornflowerblue;
}

.grid {
  display: flex;
  margin-right: -24px;
  margin-left: -24px;
  padding: 0;
  position: relative;
}

.grid__item {
  margin-right: 24px;
  margin-left: 24px;
  background-color: tomato;
  height: 250px;
  width: calc(#{percentage(1 / 3)} - 48px);
  box-shadow: rgba(16, 36, 94, 0.4) 0px 2px 6px 0px;
}