JSFiddle - React, Tailwind, and code Playground

HTML

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

CSS

body {
    padding: 20px;
    background: #eee;
}

div {
    width: 150px;
    height: 150px;
    border-radius: 75px;
    margin: 50px auto; 
    background: #ffffff;
    background: -webkit-linear-gradient(top, #ffffff 0%, #f5f5f5 100%);
    background: -moz-linear-gradient(top, #ffffff 0%, #f5f5f5 100%);
    background: linear-gradient(to bottom, #ffffff 0%, #f5f5f5 100%);
}

.shadow {
    box-shadow: 0px 5px 10px rgba(0,0,0,0.3); 
}

.bettershadow {
    box-shadow:
        -20px 0px 4px rgba(0,0,0,0.3),
        -5px 0px 15px rgba(0,0,0,0.2),
        -10px 0px 40px rgba(0,0,0,0.1);
}