JSFiddle - React, Tailwind, and code Playground

by Qwerty_Wasd

HTML

<div id="first_cont">
    <div id="first"></div>
    <div id="second"></div>
    <div id="third"></div>
</div>
<div id="sec_cont">
    <div id="s_first"></div>
    <div id="s_second"></div>
    <div id="s_third"></div>
</div>

CSS

body {
    margin: 0px;
    padding: 50px;
    background: linear-gradient(to bottom, black 0%, #030630 25%, #030630 40%, #091073 60%, #6973ff 100%);
}
#first_cont {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: row;
    justify-content: center;
    border-radius: 50px;
    overflow-x: hidden;
}
#first_cont div {
    height: 100%;
    flex-grow: 1;
    transition: flex-grow 1.5s;
}
#first_cont div:hover {
    flex-grow: 2;
}
#first {
    background-image: url(files/id-first.jpg);
    background-position: center center;
}
#sec_cont {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: row;
    justify-content: center;
    border-radius: 50px;
    overflow-x: hidden;
    position: absolute;
}
#sec_cont div {
    flex-grow: 1;
    transition: flex-grow 1.5s;
}
#s_first {
    background: black;
    height: 100%;
    
}
#s_first div:hover {
    flex-grow: 2;
    opacity: 0.6;
    transition: opacity 1.5s;
}
#s_second {
    background: blue;
}
#s_third {
    background: yellow;
}
#second {
    background: yellow;
}
#third {
    background: red;
}