JSFiddle - React, Tailwind, and code Playground

1 ROTATED NAVS Rotated left and right navigations HTML <a class="right" href="xyz">Right</a> <a class="left" href="xyz">Left</a> CSS nav a.right { right:-5px; top:26px; -webkit-transform:rotate(90deg);-moz-transform:rotate(90deg);-ms-transform:rotate(90deg);-o-transform:rotate(90deg); } nav a.left { left:0px; bottom:20px; -webkit-transform:rotate(-90deg);-moz-transform:rotate(-90deg);-ms-transform:rotate(-90deg);-o-transform:rotate(-90deg); } 2 MORE INFO Button that shows and hides info. HTML <div id="show"> <a href = "#" tabindex = "1"><span>&#40;i&#41;</span><span>Less Info -</span></a> <p>The second “Less info” is pressed, the “More Info” abruptly appears, shifting the “Less Info” text downwards for a split second.</p> </div> CSS #show > a:not(:focus) + p, #show > a:not(:focus) > span + span, #show > a:focus > span:first-of-type { opacity: 0; } #show > a { position: relative; display: table; margin-bottom: 30px; } #show > a > span { position: absolute; left: 0; white-space: nowrap; } #show > a:focus > span + span { opacity: 1; } #show span, #show p { transition: opacity 0.3s linear; } #show > a:focus { pointer-events: none; }

by Ken Watanabe

HTML

<body>
    <nav>
        
    </nav>
    
    <div class="page">
        
        <section class="text">        
            <article class="project title">
                Formwork<span class="infobutton">&#40;<small>i</small>&#41;</span>
            </article>
            <article class="project info">
                <span class="hidden">Formwork</span> is a new stackable desktop storage system designed by Sam Hecht and Kim Colin for Herman Miller.
            </article>
        </section>

        <section class="images">
            <figure class="thumbnail">
                <img src="http://reform.lt/data/images/2014/11/tumblr-nfk6hahhng1smsuzto1-1280.jpg" alt=""/>
                <figcaption>Fig 001</figcaption>
            </figure>
            <figure class="thumbnail">
                <img src="http://reform.lt/data/images/2014/11/tumblr-nfk6hahhng1smsuzto1-1280.jpg" alt=""/>
                <figcaption>Fig 002</figcaption>
            </figure>
        </section>
        
    </div>
</body>

CSS

html, body { height:100%; width:100%; font-size:100%; color:#212121; }
html, body, figcaption, figure { margin: 0; padding: 0; }
/* get rid of figcaption, figure */

html, html a { -webkit-font-smoothing: antialiased; }
body { font-family: 'Helvetica-Neue', Arial, Helvetica; font-size: 20px; line-height: 24px; letter-spacing: 0.06em; }

/* NAVIGATION */
nav a.top, nav a.right, nav a.bottom, nav a.left { position:fixed; text-decoration:none; color:#222222; }
nav a.top { top:10px; left:10px; }
nav a.bottom { bottom:10px; right:10px; }

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

/* TEXT */
section.text { width:80%; max-width:960px; margin:0 auto; position:fixed; }
section.text { padding-top:10px; }
section.text article.project.title { font-size:18px; line-height:25px; position:fixed; }
section.text article.project.title span.infobutton { font-weight:100; padding-left:10px; }
section.text article.project.title span.infobutton small { font-weight:500; font-family:'Lusitana',serif; font-weight:400; }
section.text article.project.info { display:none; }
section.text article.project.info span.hidden { visibility:hidden }

/* IMAGES */
section.images { padding-top:50px; }
section.images figure.thumbnail { padding:0; margin:0; }
section.images figure.thumbnail img { width:100%; height:auto; }
section.images figure.thumbnail figcaption { padding:10px 0 30px 0; display:none; }

/* TYPOGRAPHY */
<link href='http://fonts.googleapis.com/css?family=Lusitana:400,700' rel='stylesheet' type='text/css'>