JSFiddle - React, Tailwind, and code Playground

HTML

<div id="rect"></div>

CSS

body {
    background: url("http://www.placekitten.com/g/600/400");
    background-size: cover;
}
#rect {
    height: 300px;
    width: 100px;
    border-top-left-radius: 50px 40px;
    border-top-right-radius: 50px 40px;
    position: relative;
    overflow: hidden;
    -webkit-animation: morph 1s linear 1;
    -webkit-animation-fill-mode: forwards;
    animation: morph 1s linear 1;
    animation-fill-mode: forwards;
}
#rect:before {
    position: absolute;
    content:"";
    width: 100px;
    box-shadow: 0px 0px 0px 400px #A34;
    -webkit-animation: morph2 1s linear 1;
    -webkit-animation-delay: 1s;
    -webkit-animation-fill-mode: forwards;
    animation: morph2 1s linear 1;
    animation-delay: 1s;
    animation-fill-mode: forwards;
}
@-webkit-keyframes morph {
    0% {
        border-top-left-radius: 50px 40px;
        border-top-right-radius: 50px 40px;
        top:0px;
        height: 300px;
    }
    100% {
        border-top-left-radius: 40px 0px;
        border-top-right-radius: 40px 0px;
        top: 40px;
        height: 260px;
    }
}
@-webkit-keyframes morph2 {
    0% {
        height: 0px;
        border-bottom-left-radius: 40px 0px;
        border-bottom-right-radius: 40px 0px;
    }
    100% {
        border-bottom-left-radius: 50px 40px;
        border-bottom-right-radius: 50px 40px;
        height: 40px;
    }
}
/*FOR OTHER BROWSERS*/
 @keyframes morph {
    0% {
        border-top-left-radius: 50px 40px;
        border-top-right-radius: 50px 40px;
        top:0px;
        height: 300px;
    }
    100% {
        border-top-left-radius: 40px 0px;
        border-top-right-radius: 40px 0px;
        top: 40px;
        height: 260px;
    }
}
@keyframes morph2 {
    0% {
        height: 0px;
        border-bottom-left-radius: 40px 0px;
        border-bottom-right-radius: 40px 0px;
    }
    100% {
        border-bottom-left-radius: 50px 40px;
        border-bottom-right-radius: 50px 40px;
        height: 40px;
    }
}