JSFiddle - React, Tailwind, and code Playground
HTML
<div class="candle"></div>
CSS
body {
background:#101000;
}
h1 {
text-align:center;
color:#333;
font-family:serif;
}
.candle{
font-size:2em;
margin:0 auto;width:150px;height:200px;
position: fixed;
left: 35%;
top: 35%;
}
.candle:before {
content:"";
display:block;
width:20%;
height:50%;
position:relative;
top:-40%;
margin:0 auto;
border-radius:30% 100% 50% 50% / 60% 60% 60% 60%;
box-shadow:
0em 2em 1em rgba(255, 255, 0, 0.5) inset,
0em 3em 0.5em rgba(250, 100, 50, 0.8) inset,
0 0 0.5em 0 rgba(255, 255, 0, 0.7)
;
background:transparent;
background-image:-moz-linear-gradient(-90deg, transparent,rgba(0,100,100,0.3),transparent);
background-image:-webkit-linear-gradient(-90deg , transparent,rgba(0,100,100,0.3),transparent);
background-image:linear-gradient(-90deg, transparent,rgba(0,100,100,0.3),transparent);
-moz-transform: skewX(0deg) skewY(0deg);
-webkit-transform: skewX(0deg) skewY(0deg);
transform: skewX(0deg) skewY(0deg);
-moz-transform-origin: center bottom;
-webkit-transform-origin: center bottom;
transform-origin: center bottom;
-moz-animation: air 3s ease-in infinite;
-webkit-animation: air 3s ease-in infinite;
animation: air 3s ease-in infinite;
}
.candle:after{
content:"";
display:block;
width:0.2em;
height:1.3em;
position:absolute;
top:-5%;
left:49%;
background:#fff;
background-image:-moz-linear-gradient(-90deg,#311,#eec 70%,#eec);
background-image:-webkit-linear-gradient(-90deg,#311,#eec 70%,#eec);
background-image:linear-gradient(to bottom,#311,#eec 70%,#eec);
}
@-moz-keyframes air{
0%{-moz-transform: skewX(0deg) skewY(0deg) scale(1,1);}
31%{-moz-transform: skewX(0deg) skewY(0deg) scale(1,1);}
32%{-moz-transform: skewX(0deg) skewY(0deg) scale(-1.2,1.3);}
33%{-moz-transform: skewX(3deg) skewY(3deg) scale(1,0.9);}
34%{-moz-transform: skewX(-1deg) skewY(-1deg) scale(1,1);}
36%{-moz-transform: skewX(0deg) skewY(0deg);}
98%{-moz-transform: skewX(0deg) skewY(0deg);}
...