JSFiddle - React, Tailwind, and code Playground

by Saksham Malhotra

HTML

<div class="container">
  <div class="left"></div>
  <div class="cards">
    <div class="overflow">
      <div class="card">
      </div><div class="card">
      </div><div class="card">
      </div><div class="card">
      </div><div>
    </div>
  </div>
  <div class="right"></div>
</div>

CSS

* {
  box-sizing: border-box;
}

body {
  margin: 0;
}

.container {
  display: flex;
  position: relative;
  justify-content: center;
}

.cards {
  width: calc(100% - 80px);
  overflow: hidden;
}

.overflow {
  width: calc(((4 - 1)/3 + 1) * 100%);
  position: relative;
  /* 4 is number of cards and 3 is number of cards visible at a time */
}

.card {
  height: 300px;
  width: calc(((100% / (((4 - 1)/3) + 1)) - ((3 - 1)*10px)) / 3);
  background-color: #ccc;
  border-radius: 4px;
  display: inline-block;
  margin-right: 10px;
}

.left,
.right {
  height: 30px;
  width: 30px;
  background-color: #0072bc;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

.left {
  left: 0;
}

.right {
  right: 0;
}