JSFiddle - React, Tailwind, and code Playground

by dmethvin

HTML

<!DOCTYPE HTML>
<html lang="en-US">
<head>
    <meta charset="UTF-8">
    <title></title>
  <style type="text/css">
  body {padding:100px;}
    .circle {
      width:200px;
      height:200px;
      background-color:#a66;
      -webkit-border-radius: 100px;
      -moz-border-radius: 100px;
      border-radius:100px;
      padding:0;
      margin:0;
    }

    .circle-container { position:relative;}
    
    .circle-inner {
       position:absolute;
       background-color:transparent;
       border:2px solid #a00;
       left:-2px;
       top:-2px;
    }
  </style>
</head>
<body>
    <div class="circle circle-container">
        <div class="circle circle-inner"></div>
    </div>
    
    <a href="javascript://" id="trigger">Click</a>
</body>
</html>

JavaScript

$(function(){
      $('#trigger').click(function(){
      
        $('.circle-inner').animate({
          width: '+=200',
          height:'+=200',
          'border-top-radius': 200,
          '-webkit-border-top-radius':200,
          '-moz-border-top-radius':200,
          'border-right-radius': 200,
          '-webkit-border-right-radius':200,
          '-moz-border-right-radius':200,
          'border-bottom-radius': 200,
          '-webkit-border-bottom-radius':200,
          '-moz-border-bottom-radius':200,
          'border-left-radius': 200,
          '-webkit-border-left-radius':200,
          '-moz-border-left-radius':200,
          left: '-=100px',
          top: '-=100px'
        },
        {
          duration: 1000
        });
      });
  });