JSFiddle - React, Tailwind, and code Playground

by kougiland

HTML

<div class="bubble1"></div>

CSS

.bubble1:before{
    position:absolute;
content:'';
    color:white;
    text-align:center;
    font-weight:900;
    font-size:50px;
left:10px;
top:10px;
    width:60px;
    height:60px;
    background:url(http://thinkdesignblog.com/wp-content/uploads/image/12-burcu-vector.jpg);
 background-size:100%;
    
    border-radius:100%;   
   
}
.bubble1:after{
    position:absolute;
content:'';
    bottom:-9px;
    left:30px;
width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 10px solid #FF4C48;
}
.bubble1{
   position:relative;
    margin:200px;
width:80px;
height:80px; 
border-radius:100%;    
background: -khtml-linear-gradient(45deg, 
#F06, 
yellow);
background: -webkit-linear-gradient(45deg, 
#F06, 
yellow);
background: -moz-linear-gradient(45deg, 
#F06, 
yellow);
background: -ms-linear-gradient(45deg, 
#F06, 
yellow);
background: -o-linear-gradient(45deg, 
#F06, 
yellow);
background: linear-gradient(45deg, 
#F06, 
yellow);
}