JSFiddle - React, Tailwind, and code Playground

by luka kupunia

HTML

<div class="texts">
    <div>
        <h1>Projectfwefweffwefwefwes</h1>
    </div>
    <div>
        <h1>Enviroment</h1>
    </div>
    <div>
        <h1>Company</h1>
    </div>
</div>

CSS

.texts {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.texts div {
    position: absolute;
    width: 20vw;
    background: red;
    transition: cubic-bezier(0.74, 0.01, 0.14, 1) 1s;
    text-align: center;
    display: flex;
    ali
}
.texts div:nth-child(1){
    transform: translate(-40vw,0);
}
.active .texts div:nth-child(1) {
    transform: translate(0,0)
}
.texts div:nth-child(2){
    transform: translate(0vw,0);
}
.active .texts div:nth-child(2){
    transform: translate(40vw,0);
}
.texts div:nth-child(3){
    transform: translate(40vw,0);
}
.active .texts div:nth-child(3){
    transform: translate(60vw,0);
}
h1 {
    font-size: 50px;
}
body {
    overflow: hidden;
}

JavaScript

window.addEventListener('click',function(){
	document.body.classList.toggle('active')
})