JSFiddle - React, Tailwind, and code Playground

by japaneselanguagefriend

HTML

<div id="plus-points">


<div id="points-number">+15</div>


</div>

    <script type="text/javascript">
        $( '#plus-points' ).show(function(){
              $(this).fadeOut(2000);
        });
    </script>

CSS

#plus-points{

position:absolute;
height:60px;
width:60px;
color:#fff;
background-image: linear-gradient(bottom, rgb(255,246,217) 0%, rgb(255,246,217) 0%, rgb(255,204,38) 81%);
background-image: -o-linear-gradient(bottom, rgb(255,246,217) 0%, rgb(255,246,217) 0%, rgb(255,204,38) 81%);
background-image: -moz-linear-gradient(bottom, rgb(255,246,217) 0%, rgb(255,246,217) 0%, rgb(255,204,38) 81%);
background-image: -webkit-linear-gradient(bottom, rgb(255,246,217) 0%, rgb(255,246,217) 0%, rgb(255,204,38) 81%);
background-image: -ms-linear-gradient(bottom, rgb(255,246,217) 0%, rgb(255,246,217) 0%, rgb(255,204,38) 81%);

background-image: -webkit-gradient(
    linear,
    left bottom,
    left top,
    color-stop(0, rgb(255,246,217)),
    color-stop(0, rgb(255,246,217)),
    color-stop(0.81, rgb(255,204,38))
);      
border-radius: 60px;   
}

#points-number{
position:absolute;
display: block;
text-align:center;
font-family:"Myriad Pro",Regular; 
font-size: 30px !important;
width:121px;
height:90px;
color:#fff;
text-shadow: 0px 1px 1px #000;
left:-32px;
top:13px;
z-index:105;
}