JSFiddle - React, Tailwind, and code Playground

by batcave

HTML

<div class="container">
	<div class="row row--after-gradient">
	<div class="block"></div>
	<div class="block"></div>
	<div class="block"></div>
	<div class="block"></div>
	<div class="block"></div>
</div>
<div class="row row--after-gradient">
	<div class="block"></div>
	<div class="block"></div>
	<div class="block"></div>
	<div class="block"></div>
	<div class="block"></div>
</div>
<div class="row row--after-gradient">
	<div class="block"></div>
	<div class="block"></div>
	<div class="block"></div>
	<div class="block"></div>
	<div class="block"></div>
</div>
<div class="row row--after-gradient">
	<div class="block"></div>
	<div class="block"></div>
	<div class="block"></div>
	<div class="block"></div>
	<div class="block"></div>
</div>
</div>

SCSS

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

.container {
	display: grid;
	grid-template-columns: 1fr;
}

.row {
	display: flex;
	flex-wrap: nowrap;
}

.block {
	flex-grow: 1;
	flex-shink: 0;
	width: 20rem;
	height: 7rem;
	background-color: coral;
	border-right: 2px solid darken(coral, 30%);
	border-bottom: 2px solid darken(coral, 30%);
	
	&:nth-child(1) {
		position: sticky;
		left: 0;
		z-index: 3;
		background-color: lighten(coral, 4%);
	}
}

.row--after-shadow .block {
	&:nth-child(1) {
		box-shadow: 0 4px 6px 0 rgba(0,0,0,.8);
	}
}

.row--after-gradient .block {
	&:nth-child(1):after {
		content: '';
		display: block;
    width: 10px;
    height: 100%;
    position: absolute;
    top: 0;
    right: -7px;
    pointer-events: none;
    background: -webkit-linear-gradient(left, rgba(10,7,2,1) 0%,rgba(229,229,229,0.35) 65%,rgba(229,229,229,0) 100%);
    background: linear-gradient(to right, rgba(10,7,2,1) 0%,rgba(229,229,229,0.35) 65%,rgba(229,229,229,0) 100%);
		z-index: -1;
	}
}

.block-shadow {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	width: 10px;
	overflow: hidden;
}