JSFiddle - React, Tailwind, and code Playground

by Skooljester

HTML

<body>
   <div id="wrapper">
      <header id="mh">
     <h1>3KMW</h1>
      </header>
      <section id="about">
     <h2>About Us</h2>
     <p id="test"></p>
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent interdum pulvinar odio, vel accumsan orci volutpat eu. Ut tempor placerat augue non sollicitudin. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vivamus eu ligula vitae lorem fringilla hendrerit nec hendrerit lorem. Morbi lorem turpis, varius ac sollicitudin eu, posuere sit amet mi. Morbi sodales justo ac quam hendrerit volutpat. Mauris tincidunt eros in nulla facilisis vitae porttitor orci pretium.<em>We rarely agree with what clients ask us to do.</em> Ut nec sem elit. Phasellus eu blandit quam. Praesent adipiscing nisl a purus rutrum in sodales metus sollicitudin. Aenean velit mi, vulputate vel feugiat vitae, tempus a urna. Maecenas massa tortor, pulvinar mattis aliquet ac, pellentesque vel nisi. Nunc justo augue, ultricies id cursus nec, venenatis non metus. Morbi euismod, est in laoreet adipiscing, sem magna pretium neque, at fringilla ipsum enim ut risus. Nam tempus mi id tellus interdum malesuada tincidunt velit scelerisque. Phasellus ut arcu sit amet nisi lacinia luctus in viverra mi. Phasellus nec nibh velit. Sed ut felis urna.
     </p>
      </section>
      <section id="gallery">
     <h2>Our Work</h2>
     <section class="display">
        <img src="http://lorempixum.com/520/520/abstract" />
        <article class="caption">
           <h3>Example Client #1</h3>
           <hr />
           <p>Test text for the second client caption. Go to this <a href="http://google.com">test link.</a> Maecenas massa tortor, pulvinar mattis aliquet ac, pellentesque vel nisi. Nunc justo augue, ultricies id cursus nec, venenatis non metus. Morbi euismod, est in laoreet adipiscing, sem magna pretium neque, at fringilla ipsum enim ut risus. Nam tempus mi id tellus interdum malesuada tincidunt...

CSS

html {
      font-size:14pt;
   }
   p {
      font-size:0.95em;
      line-height:1.3em;
   }
   body {
      padding:0;
      margin:0;
      position:relative;
      z-index:1;
   }
   #wrapper {
      width:520px;
      margin:0 auto;
      height:100%;
      background:#FFF;
      position:relative;
      padding:0 20px;
      z-index:2;
      
      -moz-box-shadow: 0px 0px 5px #000000;
      -webkit-box-shadow: 0px 0px 5px #000000;
      box-shadow: 0px 0px 5px #000000;
   }
   #mh {
      width:520px;
      font-family:sans-serif;
      text-align:center;
      border-bottom:2px solid #484848;
      margin:0;
      position:relative;
      z-index:3;
      padding:20px 0 0 0;
   }
   #mh h1 {
      font-size:8.5em;
      padding:0;
      margin:0;       
      line-height:1em;       
   }
   section {
      width:520px;
      overflow:hidden;
   }
   section h2 {
      line-height:1em;
      font-size:1.5em;
      padding:20px 0;
      margin:0;
   }
   #about {
      height:auto;
   }
   #about p {
      padding:0;
      margin:0;
   }
   .display {
      position:relative;
      height:520px;
      margin-bottom:20px;
   }
   .display img {
      z-index:3;
   }
   .display .caption {
      display:none;
      z-index:5;
      width:520px;
      height:520px;
      background:rgba(180, 180, 144, 0.8);
      position:absolute;
      bottom:0;
   }
   .display .caption hr {
      background:#FFF;
      border:2px solid #FFF;
   }
   .display .caption h3 {
      padding:0 0 0 20px;
   }
   .display .caption p {
      padding:0 20px 0 20px;
   }
   .display .caption h4 {
      padding:0 0 0 20px;
   }
   #contact article {
      float:left;
      margin-right:20px;
      width:160px;
      height:160px;
      background:#000;
      margin-bottom:20px;
   }
   #contact article:last-child {
      margin-right:0;
   }
   #contact ul {
      list-style:none;
      padding:0;
      margin:0;
   }
   #contact article img {
      padding:0;
      margin:0;
   }
  ...

JavaScript

sectionSize = "normal";
$(document).ready(function(){
   $("h2").click(function(){
      var parentSection = $(this).parents("section");
      
      
      if (sectionSize == "normal") {
     sectionHeight = parentSection.height();
     parentSection.animate({height:"68px"},"fast"),
     sectionSize = "collapsed";
      }
      else {
     parentSection.animate({height:sectionHeight},"fast"),   
     sectionSize = "normal";
      }
   });
});