JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>
    
    <head>
        <title>CSS3D Impress</title>
        
        <link rel="stylesheet" media="screen" type="text/css" href="base.css" />
        <!-- <link rel="shortcut icon" href="images/favicon.ico" />--></head>
    
    <body id="main">
        <div class="container">
            <div id="cube1">This is cube1</div>
            <div id="cube2">this is cube2</div>
            <div id="cube3">this is cube3</div>
            <div id="cube4">this is cube4</div>
        </div>
    </body>

</html>

CSS

.container {
    width: inherit;
    height: inherit;
    
    margin: 0px;
}
.container {
    /* Firefox */
    -moz-transition: all 1s ease;
    /* WebKit */
    -webkit-transition: all 1s ease;
    /* Opera */
    -o-transition: all 1s ease;
    /* Standard */
    transition: all 1s ease;
}
body {
    overflow: hidden;
}
#cube1 {
    margin: auto;
    width: 200px;
    height: 200px;
    display: block;
    background-color: red;
}
#cube2 {
  margin: auto;
    width: 200px;
    height: 200px;
    display: block;
    background-color: orange;
}
#cube3 {
    margin: auto; 
    margin-top: 800px;
    
    width: 200px;
    height: 200px;
    display: block;
    background-color: yellow;
}
#cube4 {
    margin: auto;
    margin-top: 500px;
    width: 200px;
    height: 200px;
    display: block;
    background-color: green;
}