JSFiddle - React, Tailwind, and code Playground

by Ari Viinikainen

HTML

<div class='cloud'>Tier 1</div>

CSS

.cloud {
	width: 350px; height: 120px;
	
	background: #8dd5f9;
	background: linear-gradient(top, #f2f9fe 5%, #d6f0fd 100%);
	
	border-radius: 100px;
	
	position: relative;
	margin: 120px auto 20px;
    text-align: center;
}
.cloud:after,.cloud:before {
	content: '';
	position: absolute;
	background: #8dd5f9;
	z-index: -1
}
.cloud:after {
	width: 100px; height: 100px;
	width: 100px; height: 100px;
	top: -50px; left: 50px;
	
	border-radius: 100px;
}

.cloud:before {
	width: 180px; height: 180px;
	top: -90px; right: 50px;
	
	border-radius: 200px;
}