JSFiddle - React, Tailwind, and code Playground

by core972

HTML

<div class="bloc drop"></div>
<div class="bloc"></div>
<div class="perso"></div>

CSS

body {
  background: #eee;
  min-height: 100vh;
}
.bloc {
	position: relative;
	display: block;
	vertical-align: top;
	margin: 80px auto;
	padding: 25px;
	width: 220px;
	height: 110px;
	background: #f0e8d8;
	font-size: 1.6em;
	line-height: 5em;
	font-family: Georgia, Times, Serif;
	text-align: center;
	background-image: linear-gradient(to bottom, #dacdb1 11%, #f0e8d8 56%);
	box-shadow: 0 0 65px #cdbe9f inset, 0 0 20px #beae8c inset;
}
.bloc:after, .bloc:before {
	content: " ";
	position: absolute;
	width: 50%;
	height: 100px;
	z-index: -10;
}
.drop::before {
	left: -5px;
	top: 180px;
	width: 280px;
	height: 4px;
	background: #aaa;

	border-radius: 140px / 2px;
	box-shadow: 0 0 5px #aaa, 0 0 10px #888, 0 0 15px #666;
}
.drop::after {
	left: 8px;
	top: 180px;
	width: 255px;
	height: 3px;
	background: #666;
	
	border-radius: 125px / 5px;
	box-shadow: 0 0 5px #444, 0 0 8px #333, 0 0 10px #666;
}
.perso{
	margin: 80px auto;
	width: 300px;
	height: 20px;
  opacity: 0.4;
  background: radial-gradient(rgba(0, 0, 0, 0.9), transparent 70%);
  border-radius: 50%;
  margin-top: -70px;
  padding: 0;
}