JSFiddle - React, Tailwind, and code Playground

by tr_santi

HTML

<div class="cover">
    <p id="enter">enter</p>
</div>

CSS

.cover {
        /*display: none;*/
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        background-color: #fff;
        text-align: center;
        background: -webkit-radial-gradient(50% 50%, circle, transparent 13%, #fff 0%);
        background: -moz-radial-gradient(50% 50%, circle, transparent 13%, #fff 0%);
        background: radial-gradient(50% 50%, circle, transparent 13%, #fff 0%);
        transition: all 3s l
    }

JavaScript

$(document).ready(function() {
    $('#enter').click(function() {
        var i = 13;
        setInterval(function() {
            i += 1;
            $('.cover').css('background', '-webkit-radial-gradient(50% 50%, circle, transparent ' + i + '%, #fff 0%)');
        }, 500);
    });
});