JSFiddle - React, Tailwind, and code Playground

HTML <div class="pagewrap"> <section class="text"> <h1 class="title"> Project Title </h1> <p class="information"> Project Text. A hidden class that was swapped with .title. </p> </section><!-- /text --> <section class="image"> <figure class="whole"> <img src="http://i58.tinypic.com/rvf574.jpg"/> <figcaption> Image01 caption, width:100%. </figcaption> </figure> <figure class="three-forth"> <img src="http://i58.tinypic.com/rvf574.jpg"/> <figcaption> Image02 caption, width:75%. </figcaption> </figure> <figure class="two-forth"> <img src="http://i58.tinypic.com/rvf574.jpg"/> <figcaption> Image03 caption, width:50%. </figcaption> </figure> </section><!-- /image --> </div><!-- /pagewrap --> CSS /* General */ html, body { height:100%; width:100%; font-size:100%; color:#212121; } html, html a, section, p, h1, body, img, figure, figcaption { margin:0; padding:0; } /* Wrap */ div.pagewrap { width:80%; max-width:960px; margin:0 auto; } /* Text */ section.text { padding-top:20px; position:fixed; } section.text h1.title { opacity:1; } section.text p.information { opacity:0; } /* Image */ section.image { padding-top:100px; } section.image figure.whole img { width:100%; } section.image figure.three-forth img { width:75%; } section.image figure.two-forth img { width:50%; } section.image figcaption { opacity:0; } /* Typography */ body, h1 { font-family:"HelveticaNeue"; font-size:20px; line-height:24px; letter-spacing:0.06em; font-weight:normal; font-style:normal; }

by Ken Watanabe

HTML

<div class="pagewrap">

        <section class="text">
            <h1 class="title">
                Project Title
            </h1>
            <p class="information">
                Project Text. A hidden class that was swapped with .title.
            </p>
        </section><!-- /text -->
        
        <section class="image">
            <figure class="whole">
                <img src="http://i58.tinypic.com/rvf574.jpg"/>
                <figcaption>
                    Image01 caption, width:100%.
                </figcaption>
            </figure>
            <figure class="three-forth">
                <img src="http://i58.tinypic.com/rvf574.jpg"/>
                <figcaption>
                    Image02 caption, width:75%.
                </figcaption>
            </figure>
            <figure class="two-forth">
                <img src="http://i58.tinypic.com/rvf574.jpg"/>
                <figcaption>
                    Image03 caption, width:50%.
                </figcaption>
            </figure>
        </section><!-- /image -->
        
    </div><!-- /pagewrap -->

CSS

/* General */
html, body { height:100%; width:100%; font-size:100%; color:#212121; }
html, html a, section, p, h1, body, img, figure, figcaption { margin:0; padding:0; }

/* Wrap */
div.pagewrap { width:80%; max-width:960px; margin:0 auto; }

/* Text */
section.text { padding-top:20px; position:fixed; }
section.text h1.title { opacity:1; }
section.text p.information { opacity:0; }

/* Image */
section.image { padding-top:100px; }
section.image figure.whole img { width:100%; }
section.image figure.three-forth img { width:75%; }
section.image figure.two-forth img { width:50%; }
section.image figcaption { opacity:0; }

/* Typography */
body, h1 { font-family:"HelveticaNeue"; font-size:20px; line-height:24px; letter-spacing:0.06em; font-weight:normal; font-style:normal; }