JSFiddle - React, Tailwind, and code Playground

by batcave

HTML

<div class="cell">
  <div class="block">
		I'm a cell
  </div>
</div>

<div class="cell cell--test">tes tme</div>

SCSS

* {
  box-sizing: border-box;
}

.cell {
  width: 10rem;
  height: 5rem;
	background-color: aqua;
	z-index: 3;
	position: relative;
}

.cell--test {
	position: relative;
	top: -1rem;
	background-color: lime;
	z-index: 0;
}

.block {
  width: 10rem;
  height: 5rem;
  position: relative;
  background-color: coral;
  border-width: 0 1px 3px 0;
  border-style: solid;
  border-color: black;
  &:after {
    content: '';
    display: block;
    width: 10px;
    position: absolute;
    top: 0;
    right: -7px;
    bottom: -3px;
    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;
  }
}