JSFiddle - React, Tailwind, and code Playground

by Alexandru Gatea

HTML

<div class="img"></div>
<div class="ribbon"></div>
<div class="glass"></div>

SCSS

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

body {
  background: #000E29;

  display: grid;
  place-items: center;
  min-height: 100vh;
}

.img {
  background-image: url("https://images.pexels.com/photos/360912/pexels-photo-360912.jpeg");
  background-size: cover;
  background-position: center center;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 700px;
}

.img:after {
  content: "";
  width: 100%;
  height: 250px;
  display: block;
  position: absolute;
  bottom: 0;
  z-index: 1;
  left: 0;
  background: linear-gradient(rgba(#000E29, 0), #000E29);
}

.ribbon {
  width: 100%;
  height: 200px;
  background: #000621;
  /* Note: currently only Safari supports backdrop-filter */
  backdrop-filter: blur(28px);
  --webkit-backdrop-filter: blur(28px);
  position: absolute;
  left: 0;
  top: 800px;
	z-index: 2;

}

.glass {
  width: 400px;
  height: 600px;
  position: relative;
  z-index: 3;
	margin-top: 100px;

  border-radius: 0;
	/* backdrop-filter: blur(14px); */
  background-color: rgba(18, 31, 56, 0.00);
  box-shadow: inset 0px 0px 0px 1px rgba(247, 247, 247, 0.14);

}

.glass:before {
	content: "";
	display: block;
	position: absolute;
	width: 200px;
	height: 50px;
	top: 0;
	right: 0;
	margin-top: -50px;
	background-color: rgba(18, 31, 56, 0.07);
	backdrop-filter: blur(14px);
	z-index: 4;
	
}

.glass:after {
	content: "";
	display: block;
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	right: 0;
	background-color: rgba(18, 31, 56, 0.07);
	backdrop-filter: blur(14px);
	z-index: 3;
	
}