JSFiddle - React, Tailwind, and code Playground

by mehulkar

HTML

<div class="wrapper">
  <h2 class="header">Grid inner</h2>
  <div class="inner-wrapper inner-wrapper--grid">
       <div class="item"></div>
       <div class="item"></div>
       <div class="item"></div>
  </div>
  <button></button>  
</div>

<div class="wrapper">
  <h2 class="header">Inline block elements</h2>
  <div class="inner-wrapper inner-wrapper--inline">
       <div class="item"></div>
       <div class="item"></div>
       <div class="item"></div>
  </div>
  <button></button>  
</div>

<div class="wrapper">
  <h2 class="header">Single block element</h2>
  <div class="inner-wrapper inner-wrapper--block">
       <div class="item"></div>
  </div>
  <button></button>  
</div>

SCSS

$gap-top: 40px;
$gap-bottom: 0;
$pad-top: 0;
$pad-bottom: 10px;
$arrow-width: 30px;

.wrapper { position: relative; margin-bottom: 10px; }
.inner-wrapper { padding-left: $arrow-width; }

.item {
  height: 100px;
  margin-bottom: $pad-bottom;
  background: green;
}

.header {
   background: yellow;
   height: 40px;
   margin: 0;
} /* fixed height */

button {
  position: absolute;
  left: 0;
  top: 0;
  width: 30px;
  background: bisque;
  margin-top: $gap-top;
  height: calc(100% - #{$gap-top + $pad-bottom});
}

button::after {
  content: '<';
  height: 40px;
  width: 40px;
}

.inner-wrapper--grid {
   display: grid;
   grid-template-columns: 1fr 1fr 1fr;
   grid-column-gap: 5px;
}


.inner-wrapper--inline .item {
  display: inline-block;
  margin-right: 10px;
  width: calc(33% - 10px);
  &:last-child { margin-right: 0; }
}