JSFiddle - React, Tailwind, and code Playground

HTML

<div>How do I get this effect with only CSS?<br />
    <div class="anothertail"></div>
</div>

<div class="abubble">
    <div class="atail">
        <div class="ashadow"></div>
        <div class="atail2">
        </div>
    </div>
</div>

CSS

.abubble {
    position:relative;
    border:1px solid #a0c7ff;
    width:100px;
    height:100px;
}

.ashadow {
    position:absolute;
    display: inline-block;
    background:transparent;
    width:10px;
    height:10px;
    left:-5px;
    top:-16px;
    -moz-box-shadow: 0px 10px 30px #000;
    -webkit-box-shadow: 0px 10px 30px #000;
    box-shadow: 0px 10px 30px #000;
}

.atail {
    position:absolute;
    display: inline-block;
    border-width: 20px;
    border-style: solid;
    border-color: #a0c7ff transparent transparent transparent;
    width: 0px;
    height: 0px;
    left:30px;
    top:100px;
}

.atail2 {
    position:relative;
    display: inline-block;
    border-width: 19px;
    border-style: solid;
    border-color: #fff transparent transparent transparent;
    width: 0px;
    height: 0px;
    left:-19px;
    top:-20px;
}

.anothertail {
    background-image: url(http://static.jqueryfordesigners.com/demo/images/coda/bubble-tail2.png);
    display: block;
    height: 29px;
    width: 30px;

}