JSFiddle - React, Tailwind, and code Playground

by HYEONGJINKIM

HTML

<div id="super-big" class="circle" >

<div id="heart-content">
<div id="heart" class="circle left" ></div>
<div id="heart" class="circle right" ></div>
<div id="heart" class="square" ></div> 
</div>

</div>

CSS

.circle { border-radius:50%; }

div#super-big { 
width:250px;
height:250px;
border: 35px solid #DE4815;
}

div#heart-content{ 
position: relative;
top: 18px; 
}

div#heart{
width:100px;
height:100px;
background-color: #DE4815;
float: left;
}

div#heart.left{
position: relative;
left: 35px;
top: 35px;
}

div#heart.right{
position: relative;
left: 15px;
top: 35px;
}

div#heart.square{
background-color: #DE4815;
position: relative;
left: 75px;
top: -25px;
-webkit-transform: rotate(-45deg);
border-bottom-left-radius: 15px;
}

#heart-content{
-webkit-animation-name: pulsate;
-webkit-animation-duration: 1s;
-webkit-animation-timing-function: ease-in-out;
-webkit-animation-iteration-count: infinite
}

@-webkit-keyframes pulsate {
0% {opacity: 0.0}
10% {opacity: .20}
20% {opacity: .40 }
30% {opacity: .60 }
40% {opacity: .80 } 
50% {opacity: 1.0}
60% {opacity: .80}
70% {opacity: .60}
80% {opacity: .40}
90% {opacity: .20}
100% {opacity: 0.0}
}