JSFiddle - React, Tailwind, and code Playground
HTML
<div class="circle-text"><div>+987</div></div>
CSS
.circle-text {
width:4%;
background: #d95353;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.3);
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
font-family:verdana;
font-size:12px;
}
.circle-text:after {
content: "";
display: block;
width: 100%;
height:0;
padding-bottom: 100%;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
border-radius: 50%;
background-color: transparent;
-webkit-animation: cd-pulse 2s infinite;
-moz-animation: cd-pulse 2s infinite;
animation: cd-pulse 2s infinite;
}
.circle-text div {
float:left;
width:100%;
padding-top:50%;
line-height:1em;
margin-top:-0.5em;
text-align:center;
color:white;
}
@-webkit-keyframes cd-pulse {
0% {
-webkit-transform: scale(1);
box-shadow: inset 0 0 5px 5px rgba(217, 83, 83, 0.8);
}
50% {
box-shadow: inset 0 0 1px 1px rgba(217, 83, 83, 0.8);
}
100% {
-webkit-transform: scale(1.6);
box-shadow: inset 0 0 1px 1px rgba(217, 83, 83, 0);
}
}
@-moz-keyframes cd-pulse {
0% {
-moz-transform: scale(1);
box-shadow: inset 0 0 1px 1px rgba(217, 83, 83, 0.8);
}
50% {
box-shadow: inset 0 0 1px 1px rgba(217, 83, 83, 0.8);
}
100% {
-moz-transform: scale(1.6);
box-shadow: inset 0 0 1px 1px rgba(217, 83, 83, 0);
}
}
@keyframes cd-pulse {
0% {
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
transform: scale(1);
box-shadow: inset 0 0 1px 1px rgba(217, 83, 83, 0.8);
}
50% {
box-shadow: inset 0 0 1px 1px rgba(217, 83, 83, 0.8);
}
100% {
-webkit-transform: scale(1.6);
-moz-transform: scale(1.6);
-ms-transform: scale(1.6);
-o-transform: scale(1.6);
transform: scale(1.6);
box-shadow: inset...