JSFiddle - React, Tailwind, and code Playground

by Bayu_Handono

HTML

<div class="wrapper">
<div class="tip">☺</div>
</div>

CSS

.wrapper{
position:relative;    
cursor:pointer;    
background:-webkit-linear-gradient(-60deg, red 32%, #fff 50%, red 72%);
background:-webkit-linear-gradient(-60deg, red 32%, #fff 50%, red 72%);
background:-webkit-linear-gradient(-60deg, red 32%, #fff 50%, red 72%);
background:-webkit-linear-gradient(-60deg, red 32%, #fff 50%, red 72%);
background:-webkit-linear-gradient(-60deg, red 32%, #fff 50%, red 72%);
height:291px;
width:291.8px;
border-radius:50%;
border:5px solid #16fa1b;
-webkit-box-shadow:0px 0px 50px #000;
-moz-box-shadow:0px 0px 50px #000;
-ms-box-shadow:0px 0px 50px #000;
-o-box-shadow:0px 0px 50px #000;
-khtml-box-shadow:0px 0px 50px #000;
box-shadow:0px 0px 50px #000;
transition:all ease-in 1s;
-webkit-transition:all ease-out 1s;
-moz-transition:all ease-out 1s;
-ms-transition:all ease-out 1s;
-o-transition:all ease-out 1s;       
}

.tip{
position:absolute;
top:-57%;
right:-32.6%;    
font-size:470px;
color:#36fa1b;
}


.wrapper:hover{
-webkit-box-shadow:0px 0px 80px green;
-moz-box-shadow:0px 0px 80px green;
-ms-box-shadow:0px 0px 80px green;
-o-box-shadow:0px 0px 80px green;
-khtml-box-shadow:0px 0px 80px green;
box-shadow:0px 0px 80px green;
transition:all ease-in 1s;
-webkit-transition:all ease-out 1s;
-moz-transition:all ease-out 1s;
-ms-transition:all ease-out 1s;
-o-transition:all ease-out 1s;   
}