JSFiddle - React, Tailwind, and code Playground

HTML

<div class="top-circle">
    <div class="inner-text">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    </div>
</div>

CSS

html, body{
    background:#555;
    padding:0;
    margin:0;
    overflow:hidden;
    width:100%;
    height:100%;
}
.top-circle{
    top:0;
    left:0;
    bottom:0;
    right:0;
    position:absolute;
    width:50px;
    height:50px;
    background:red;
    overflow:hidden;
    border-radius: 0 0 5000px 0;
    transition:all 0.7s ease-out;
    mari
}
.inner-text{
    margin: 50px;
    width:500px;
}

JavaScript

$(function(){
    
    $('.top-circle').click(function(){
    	$(this).width($(window).width()+500);
    	$(this).height($(window).height()+500);
    });
});