JSFiddle - React, Tailwind, and code Playground

by Marco Abate

HTML

<div class="container">
  <div class="shadow"></div>

  <div class="cards-prospective bg-red"></div>
  <div class="cards-prospective vertical bg-gray"></div>
  <div class="cards-prospective circle bg-green"></div>

</div>

SCSS

.bg-green{
  background-color:green;
}
.bg-gray{
  background-color:gray;
}
.bg-red{
  background-color:red;
}

.shadow{
  width:60px;
  height:1px;
  background:#ccc;
  box-shadow:0 0 20px;
  opacity:.5;
}

.container{
  margin-top:20px;
  dispay:flex;
  justify-content:center;
  width:100%;
}

/* orizontal */
.cards-prospective{
  position:relative;
  height:300px;
  width:96%;
  opacity:.5;
  margin-top:5em;
}
.cards-prospective:before{
  content:'';
  position:absolute;
  height:7px;
  top:-14px;
  left:8%;
  right:8%;
  width:84%;
  background:inherit;
  opacity:0.6;
}
.cards-prospective:after{
  content:'';
  position:absolute;
  height:7px;
  top:-7px;
  left:5%;
  right:5%;
  width:90%;
  background:inherit;
  opacity:0.8;
}

/* vertical */
.cards-prospective.vertical{
  position:relative;
  width:7px;
  /* height:96%; */
  height:400px;
  opacity:.5;
  margin-top:5em;
}
.cards-prospective.vertical:before{
  content:'';
  position:absolute;
  width:7px;
  right:-14px;
  top:8%;
  bottom:8%;
  height:84%;
  background:inherit;
  opacity:0.6;
}
.cards-prospective.vertical:after{
  content:'';
  position:absolute;
  width:7px;
  right:-7px;
  top:5%;
  bottom:5%;
  height:90%;
  background:inherit;
  opacity:0.8;
}


/* authors */
.cards-prospective.circle{
  position:relative;
  width:200px;
  height:200px;
  border-radius:50%;
  opacity:.5;
  margin-top:5em;
}
.cards-prospective.circle:before{
  content:'';
  position:absolute;
  border-radius:50%;
  width:200px;
  height:200px;
  top:-14px;
  left:0;
  background:inherit;
  opacity:0.6;
}
.cards-prospective.circle:after{
  content:'';
  position:absolute;
  width:200px;
  height:200px;
  border-radius:50%;
  top:-7px;
  left:0;
  background:inherit;
  opacity:0.8;
}