JSFiddle - React, Tailwind, and code Playground

by jamwaffles

HTML

<div class="circle"></div>

CSS

body {
    padding: 20px;
}

div.circle {
    position: relative;
    width: 0px;
    height: 0px;
    top: 50px;
    left: 50px;
    -webkit-transition-duration: 2s;
    -webkit-transition-property: all;
    -webkit-transition-timing-function: ease-in-out;
    text-align: center;
    background: red;
    color: white;
    border-radius: 100%;
    padding: 20px;
    overflow: hidden;
    
    font-family: sans-serif;  /* Just 'cos */
}

div.open {
    top: 0px;
    left: 0px;
    width: 100px;
    height: 100px;
}

JavaScript

$(document).ready(function() {
    setTimeout(function() {
        $('div').addClass('open');
    }, 2000);
});