JSFiddle - React, Tailwind, and code Playground

by batcave

HTML

<div class="container">
<div class="scroll-shadows"></div>
  <div class="tabs">
    <div class="tab-item"><button>test</button></div>
    <div class="tab-item">tab 2</div>
    <div class="tab-item">tab 3</div>
    <div class="tab-item">tab 4</div>
    <div class="tab-item">tab 5</div>
    <div class="shadow"></div>
  </div>
</div>

SCSS

* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

.container {
  width: 100%;
  background-color: #ededed;
  padding: 0.5rem;
  overflow-x: auto;
	position: relative;
	margin-top: 2rem;
}

.scroll-shadows {
	position: fixed;
	background-color: transparent;
	width: 100%;
	height: 4rem;
	z-index: 10;
	
	&::before,
	&::after {
		display: none;
		content: '';
    position: fixed;
    width: 2rem;
		height: 5rem;
		z-index: 2;
		margin-top: -2rem;
		transform: translateY(-50%);
  }
	
	&:before {
		background: linear-gradient(to right, rgba(0, 0, 0, 0.8) 26%, transparent);
		margin-left: 0;
	}
	
	&:after {
		background: linear-gradient(to left, rgba(0, 0, 0, 0.8) 26%, transparent);
		margin-left: calc(100% - 2rem);
	}
	
}

.tabs {
  display: flex;
  background-color: deepskyblue;
  position: relative;
  height: 4rem;
  width: 300rem;
}

.tab-item {
  background-color: lighten(deepskyblue, 10%);
  margin-right: 1rem;
  padding: 1rem;
}