JSFiddle - React, Tailwind, and code Playground

by cornelas

HTML

<section id="wrapper">
   <div id="content"> <!-- ADD THIS This will be used to position vertically-->
    <article class="post">
    <p><img src="img/scroll/001_scroll.jpg" alt="test image 1" title="test image" width="994" height="620" class="alignnone size-full wp-image-240" /></p>
    </article>

    <article class="post">
    <p><img src="img/scroll/002_scroll.jpg" alt="test image 1" title="test image" width="994" height="620" class="alignnone size-full wp-image-240" /></p>
    </article>

    <article class="post">
    <p><img src="img/scroll/003_scroll.jpg" alt="test image 1" title="test image" width="994" height="620" class="alignnone size-full wp-image-240" /></p>
    </article>

    <article class="post">
    <p><img src="img/scroll/004_scroll.jpg" alt="test image 1" title="test image" width="994" height="620" class="alignnone size-full wp-image-240" /></p>
    </article>

    <article class="post">
    <p><img src="img/scroll/005_scroll.jpg" alt="test image 1" title="test image" width="994" height="620" class="alignnone size-full wp-image-240" /></p>
    </article>
   </div>
</section>

CSS

#wrapper {
     width: 100%; 
     height: 100%;
     min-height: 100%;
     background:#fff;
     position: absolute;
    }   
    .post {
      padding:0 5px 0 0;
      background:#fff;
      height:100%;
      }
     #wrapper img {
      color:#fff;
      width:auto;
      height: 100px;
      background: #ccc;
     }
    #content {
      position: relative;
      width: 60%;
      height: 60%;
      top: 50%;
      left: 50%;
    }