JSFiddle - React, Tailwind, and code Playground

by BoxMan0617

HTML

<div class="cloud"><span class="shadow"></span></div>

CSS

.cloud {
    width: 129px;
    height: 43px;
    background-color: #D7EDF4;
    border-radius: 200px;
    position: absolute;
    top: 46px;
    left: 20px;
}

.cloud:before, .cloud:after {
    content: '';
    
    position: absolute;
}

.cloud:before {
    width: 40px;
    height: 60px;
    background-color: #D7EDF4;
    top: -18px;
    left: 21px;
    border-radius: 200px;
}

.cloud:after {
    width: 60px;
    height: 70px;
    background-color: #D7EDF4;
    top: -32px;
    right: 18px;
    border-radius: 200px;
}

.shadow {
    width: 129px;
    position: absolute; bottom: -10px; 
    background: #000;
    z-index: -1;
    
    box-shadow: 0 0 25px 8px rgba(0, 0, 0, 0.4);
    -moz-box-shadow: 0 0 25px 8px rgba(0, 0, 0, 0.4);
    -webkit-box-shadow: 0 0 25px 8px rgba(0, 0, 0, 0.4);
    
    border-radius: 50%;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
}