JSFiddle - React, Tailwind, and code Playground

HTML

<div class="circle">Square to Circle</div>

CSS

body > div
{

    margin:121px 100px;

    width:483px;
    height:298px;

    background:#676470;
    color:#fff;

    font-family:Lato;
    font-weight:900;
    font-size:3.4em;

    text-align:center;
    line-height:298px;

    transition:all 0.3s ease;

}

.circle:hover
{
    border-radius:50%;
}