JSFiddle - React, Tailwind, and code Playground

by Chris Menshenin

HTML

<body>
    <div id="parallax">
        <div id="layer-back">
            <div id="back"><div id="text">Whatever comes our way, whatever battle we have raging inside us, we always have a choice. It's the choices that make us who 

we are, and we can always choose to do what's right.</div></div>
        </div>  
        <div id="layer-base">
            <main>
                 <article>
                     <div id="pic-position">
                         <section>
                             <div></div>
                         </section>
                         <aside>
                             <div></div>
                         </aside>
                         <footer>
                             <div></div>
                         </footer>
                     </div>
                 </article>   
            </main>
        </div>
    </div>
</body>

CSS

@font-face {
    font-family: sp1;
    src: url(Rokkitt-Regular.ttf);
    src: local(sp1), url(Rokkitt-Regular.ttf);}

     @font-face {
    font-family: sp;
    src: url(CrimsonText-Regular.ttf);
    src: local(sp), url(CrimsonText-Regular.ttf);}
 
     body, html, #parallax {
    overflow-x: hidden;
    overflow-y: auto;}
  
     #parallax {
    perspective: 1px;
    height: 100vh;}

/*........FIRST-LAYER.......*/
  
     #layer-back {
    position: relative;
    height: 100vh;
    transform-style: preserve-3d;}
    
     #back {
    background: url(http://savepic.ru/15014059.jpg) no-repeat 100%;
    background-size: cover;

    position: absolute;
    top: 0;
    left: -9px !important;
    right: 9px !important;
    bottom: 0; 

    transform: translateZ(-1px) scale(2);}

/*.......TEXT........*/

     #text {
    position: relative;
    top: 50%;
    left: 79px;
    transform: translateY(-50%);
    
    width: 55%;

    font: 3.5vh/200% sp1, sans-serif;
    color: #DDD;}

     #text:after {
    content: "by Peter Parker";
 
    position: absolute;
    top: 100%;
    right: 0;
 
    font: 3vh/12vh sp, sans-serif;
    color: #DDD;}
      
    
    
/*.......SECOND-LAYER........*/

     #layer-base {
    position: relative;
    height: 300vh;}

     main {
    display: block;
    height: 300vh;

    background: url(http://savepic.ru/15010438.jpg) repeat-y 100% 0;
    background-size: contain;}

/*........PIC-BLOCK........*/

     article {
    display: block;
    padding-top: 8px;

    background: url(http://savepic.ru/15033990.jpg) repeat-y 100% 0;
    background-size: contain;}
  
     #pic-position {
    max-width: 1278px;
    margin: 0 auto;}
/*........FIRST-PIC........*/

     section, aside {
    float: left;
    display: block;
    width: 635px;
    margin-bottom: 8px;}
    
     article section div, article aside div, article footer div {
    display: block;
    padding-top: 62.5%;
    border-radius: 5px;
 
    box-shadow: 4px 4px 5px -1px...