JSFiddle - React, Tailwind, and code Playground

HTML

<a href="#"></a>

CSS

a {
        display: block;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        width: 300px;
        height: 300px;
        background-color: #0ff;
        transition: width 5s ease-out 1s, height 5s ease-out 1s, transform 1s ease-in-out 0s;
    }

    a:focus {
        width: 20px;
        height: 100px;
        transform: translate(-50%, -50%) rotate(90deg);
        transition-delay: 0s, 0s, 5s;
    }