JSFiddle - React, Tailwind, and code Playground

by secretgspot

HTML

<div class="op"><div class="chi"><div class="star">★</div></div></div>
<div class="op"><div class="chi"><div class="star">★</div></div></div>

CSS

body{
text-align:center;
}
.op{
  display:inline-block;
  position: relative;
  margin: 42px auto 0px auto;
  width:200px;
  height:200px;
  background:#ffe0a9;
  /* border-radius */
  -webkit-border-radius:100px;
  -moz-border-radius:100px;
  border-radius:100px;
  /* transform */
  -webkit-transform-origin: center center;
  -webkit-transform:scaleY(0.95);
  -moz-transform-origin:center center;
  -moz-transform:scaleY(0.95);
  /* gradient */
  background-image: -webkit-gradient(
    radial,
    100 50, 0,
    100 100, 150,
    from(rgba(255,255,255,0.5)),
    color-stop(70%,rgba(253,212,142,1)),
    color-stop(95%,rgba(240,188,120,1)),
    to(rgba(255,255,255,0))
  ), -webkit-gradient(
    radial,
    20 20, 0,
    80 80, 90,
    from(rgba(255,255,255,0.5)),
    color-stop(50%,rgba(255,255,255,1)),
    to(rgba(255,255,255,0))
  );
  background-image:-moz-radial-gradient(
    100px 50px,
    circle,
    rgba(255,255,255,0.5) 0%,
    rgba(253,212,142,1) 70%,
    rgba(240,188,120,1) 95%,
    rgba(255,255,255,0) 100%
  ),-moz-radial-gradient(
    0px 10px,
    circle,
    rgba(255,255,255,0.5) 10%,
    rgba(255,255,255,0.5) 50%,
    rgba(255,255,255,0) 100%
  );
  /* box-shadow */
  -webkit-box-shadow:0 1px 10px rgba(0,0,0,0.1);
  -moz-box-shadow:0 1px 10px rgba(0,0,0,0.1);
  box-shadow:0 1px 10px rgba(0,0,0,0.1);
}

.star{
  display:block;
  position:absolute;
  top:10px;
  left:13px;
  z-index:18;
  color:#c45c3c ;
  -webkit-transform:scale(0.5);
  -moz-transform:scale(0.5);
  transform:scale(0.5);
  opacity:0.5;  
}


.chi{
  cursor:pointer;
  position:absolute;
  top:50px;
  left:80px;
  width:40px;
  height:40px;
  z-index:3;
  background:#fac3b4;
  /* border-radius */
  -webkit-border-radius:20px;
  -moz-border-radius:20px;
  border-radius:20px;
  /* box-shadow */
  -webkit-box-shadow:0 3px 20px #ed9c86;
  -moz-box-shadow:0 3px 20px #ed9c86;
  box-shadow:0 3px 20px #ed9c86;
  /* transform */
  -webkit-transform-origin: center center;
 ...

JavaScript

$(function(){
  $(".chi").click(function(){
    var p = $(this).parent();
    p.addClass('pururun');
    setTimeout(function(){
      p.removeClass('pururun');
    },2000);
  });
});