JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>

        <title>HOMEPAGE</title>
    <body>
        <div class="grow" style="background-color:#2A75A9;"></div>
        <div class="grow" style="background-color:#274257;"></div>
        <div class="grow" style="background-color:#644436;"></div>
        <div class="grow" style="background-color:#8F6048;"></div>
        <!--<div class="grow" style="background-color:red;"></div>-->
    </body>

CSS

body {
    background-color: black;
    margin: 0 auto;
    height: 100%;
    width: 100%;
}
.grow {
    height: 100vw; /* Origional height */
    width: 25%; /* Origional width */
    margin: 0px 0 0px 0; /* Just for presentation (Not required) */
    float: left; /* Just for presentation (Not required) */
    position: relative; /* Just for presentation (Not required) */
    transition:height 0.5s; /* Animation time */
    -webkit-transition:height 0.5s; /* For Safari */
}
.grow:hover {
    width: 25%; /* This is the height on hover */
}