JSFiddle - React, Tailwind, and code Playground

by Tan

HTML

<div class="contain">

<p>
project or even a collapse in a chain, here at VIBE we understand that speed really can be of the essence and we can, and we will deliver on our promise to make sure we do all that we can in securing our clients finance as quickly as is possible working
</p>

<p>
project or even a collapse in a chain, here at VIBE we understand that speed really can be of the essence and we , and we will deliver on our promise to make sure we do all <span class="circle" id="circle"><a href="#" onclick="shrink()">click</a></span> we can in securing our clients finance as quickly as is possible working
</p>



<p>
project or even a collapse in a chain, here at VIBE we understand that speed really can be of the essence and we can, and we will deliver on our promise to make sure we do all that we can in securing our clients finance as quickly as is possible working
</p>

</div>

CSS

body {overflow:hidden;background-color:#222222;}

.contain {overflow:hidden;width:600px;height:100vh;position: relative;margin:auto;background-color:#eeeeee;}

.circle {width:auto;height:auto;background-color:#dddddd;margin: 0;
position:absolute;

  transform: width 0 height 0;}
  
.circle2 {width:300px;height:300px;background-color:#dddddd;margin: 0;
position:absolute;

  transition: width 2s, height 2s;}

JavaScript

function shrink() {

var circle = document.getElementById('circle');
circle.className = "circle2"

}