JSFiddle - React, Tailwind, and code Playground

by Doeke Wartena

HTML

<div class="itemContainer">
    <div class="item1"></div>
    <div class="item2"></div>
    <div class="item3"></div>
    <div class="item4"></div>
    <div class="item5"></div>
</div>

CSS

html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    overflow: hidden;
}

.itemContainer {
    position: fixed;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

div {
    position: absolute;
}




.item1 {
    background: rgb(255, 0, 0);
    animation: animateIn 1s 0.4s 1 cubic-bezier(0.535, 0.185, 0.890, 0.435) alternate both;
}

.item2 {
    background: rgb(0, 255, 0);
    animation: animateIn 1.2s 0.4s 1 cubic-bezier(0.535, 0.185, 0.890, 0.435) alternate both;
}

.item3 {
    background: rgb(0, 0, 255);
    animation: animateIn 1.4s 0.4s 1 cubic-bezier(0.535, 0.185, 0.890, 0.435) alternate both;
}

.item4 {
    background: rgb(255, 255, 0);
    animation: animateIn 1.6s 0.4s 1 cubic-bezier(0.535, 0.185, 0.890, 0.435) alternate both;
}

.item5 {
    background: rgb(255, 0,255);
    animation: animateIn 1.8s 0.4s 1 cubic-bezier(0.535, 0.185, 0.890, 0.435) alternate both;
}

@keyframes animateIn {
    0% {
        left: 100%;
    }
    100% {
        left: 0;
    }
}

.focus {
    transition: all 1s ease; 
    width: 100%;
    height: 100%;   
    left: 0;
    top: 0;
    z-index: 10;
    position:  absolute; 
}


@media only screen and (orientation : landscape) { 

    div {
        width: 20%;  
        height: 100%;      
     }
    
    .item1 {left: 0%}
    .item2 {left: 20%}
    .item3 {left: 40%}
    .item4 {left: 60%}
    .item5 {left: 80%}
    
    
}


@media only screen and (orientation : portrait) { 
    
    div {
        width: 100%;  
        height: 20%;
     }
    
    .item1 {top: 0%}
    .item2 {top: 20%}
    .item3 {top: 40%}
    .item4 {top: 60%}
    .item5 {top: 80%}
    
}

JavaScript

$("div").click(function(){
    $(this).toggleClass("focus");
});