JSFiddle - React, Tailwind, and code Playground

by Prasad prasad

HTML

<div class="bubble0" align="center"> <h3>Three  Levels </h3> </div>
<div class="bubble"  align="center"> </div><br/><br/>
<div class="bubble1" align="center"> </div><br/><br/>
<div class="bubble2" align="center">  </div><br/><br/>
<button>Play</button>

CSS

.bubble 
{
position: relative;
width: 100%;
height: 50px;
padding: 0px;
background: #FFFFFF;
border: #000 solid 1px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}

.bubble:after 
{
content: "";
position: absolute;
bottom: -25px;
left: 45%;
border-style: solid;
border-width: 25px 25px 0;
border-color: #FFFFFF transparent;
display: block;
width: 0;
z-index: 1;
}

.bubble:before 
{
content: "";
position: absolute;
top: 50px;
left: 45%;
border-style: solid;
border-width: 26px 26px 0;
border-color: #000 transparent;
display: block;
width: 0;
z-index: 0;
}




.bubble1 
{
position: relative;
width: 100%;
height: 50px;
padding: 0px;
background: #FFFFFF;
border: #000 solid 1px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}

.bubble1:after 
{
content: "";
position: absolute;
bottom: -25px;
left: 45%;
border-style: solid;
border-width: 25px 25px 0;
border-color: #FFFFFF transparent;
display: block;
width: 0;
z-index: 1;
}

.bubble1:before 
{
content: "";
position: absolute;
top: 50px;
left: 45%;
border-style: solid;
border-width: 26px 26px 0;
border-color: #000 transparent;
display: block;
width: 0;
z-index: 0;
}






.bubble2 
{
position: relative;
width: 100%;
height: 50px;
padding: 0px;
background: #FFFFFF;
border: #000 solid 1px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}

.bubble2:after 
{
content: "";
position: absolute;
bottom: -25px;
left: 45%;
border-style: solid;
border-width: 25px 25px 0;
border-color: #FFFFFF transparent;
display: block;
width: 0;
z-index: 1;
}

.bubble2:before 
{
content: "";
position: absolute;
top: 50px;
left: 45%;
border-style: solid;
border-width: 26px 26px 0;
border-color: #000 transparent;
display: block;
width: 0;
z-index: 0;
}