JSFiddle - React, Tailwind, and code Playground

HTML

<div id="hideAbout">Close </div>
<div id="showAbout">Work</div>
<div id="about" style="display: block;" class="show">
    <div id="about-inner">
      <article id="bio">
        <h4>000-A</h4>
        <h1>Hello.</h1>
        <div id="bio-copy">

          <p>My name is pataprout. I’m a designer. Design is my number 3 dream job (behind <a href="http://seanjklassen.com/images/hockey.jpg" target="_blank">pro hockey player</a> and <a href="http://seanjklassen.com/images/rockstar.jpg" target="_blank">rock star</a>).
            I spend 40 hours a week focused on brand and product innovation at <a href="http://instrument.com" target="_blank">Instrument</a>.</p>

          <p>I also like to write <a href="https://en.wikipedia.org/wiki/Pet_Sounds" target="_blank">Pet Sounds</a> inspired songs in my spare bedroom, go bowling on Monday nights, and hang out with <a href="http://seanjklassen.com/images/bruce.jpg" target="_blank">Bruce Beagle</a>.</p>

          <p><a href="mailto:[email protected]">Email</a> / <a href="https://www.linkedin.com/in/klassen" target="_blank">LinkedIn</a></p>

        </div>
      </article>
      <article id="recognition">
        <h4>000-B</h4>
        <div id="recognition-lists" class="cf">

          <ul>
            <li data-cnt="01">Select Clients</li>

            <li>—Chrysler</li>

            <li>—Google</li>

            <li>—Reuters</li>

            <li>—Sony</li>

            <li>—WKKF</li>

          </ul>

          <ul>
            <li data-cnt="02">Design Juror</li>

            <li>—AIGA</li>

            <li>—Awwwards</li>

            <li>—Comm Arts</li>

            <li>—FWA</li>

            <li>—Webby Awards</li>

          </ul>

          <ul>
            <li data-cnt="03">Editorial Features</li>

            <li>—Ad Age</li>

            <li>—Apple Commercial</li>

            <li>—Comm Arts</li>

            <li>—New York Times</li>

            <li>—Net Magazine</li>

          </ul>

          <ul>
           ...

CSS

#hideAbout{
  color:white;
  cursor:pointer;
  z-index:150;
}

#showAbout{ 
  cursor:pointer;
  
}


.slide-in {
  animation: slide-in 0.5s forwards;
  -webkit-animation: slide-in 0.5s forwards;
}

.slide-out {
  animation: slide-out 0.5s forwards;
  -webkit-animation: slide-out 0.5s forwards;
}

@keyframes slide-in {
  100% {
    transform: translateX(0%);
  }
}

@-webkit-keyframes slide-in {
  100% {
    -webkit-transform: translateX(0%);
  }
}

@keyframes slide-out {
  0% {
    transform: translateX(0%);
  }
  100% {
    transform: translateX(-100%);
  }
}

@-webkit-keyframes slide-out {
  0% {
    -webkit-transform: translateX(0%);
  }
  100% {
    -webkit-transform: translateX(-100%);
  }
}

a,
abbr,
acronym,
address,
applet,
article,
aside,
audio,
b,
big,
blockquote,
body,
canvas,
caption,
center,
cite,
code,
dd,
del,
details,
dfn,
div,
dl,
dt,
em,
embed,
fieldset,
figcaption,
figure,
footer,
form,
h1,
h2,
h3,
h4,
h5,
h6,
header,
hgroup,
html,
i,
iframe,
img,
ins,
kbd,
label,
legend,
li,
mark,
menu,
nav,
object,
ol,
output,
p,
pre,
q,
ruby,
s,
samp,
section,
small,
span,
strike,
strong,
sub,
summary,
sup,
table,
tbody,
td,
tfoot,
th,
thead,
time,
tr,
tt,
u,
ul,
var,
video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
  display: block
}

body {
  line-height: 1
}

ol,
ul {
  list-style: none
}

#about {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #000;
  color: #ddd;
  overflow: hidden;
  transform: translateX(-100%);
  -webkit-transform: translateX(-100%);
  z-index:-1;
}

#about #about-inner {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow-x: hidden;
  overflow-y: scroll;
}

#about article {
  margin: 0 10%;
  padding: 24px 0 0;
  max-width: 540px
}

#about article h4 {
  color: #ccc;
  font-family: simplon-mono, helvetica,...

JavaScript

$(document).ready(function(){
			$('#hideAbout').hide();
  $("#showAbout").click(function(){   
  		$('#hideAbout').show();
      $('#showAbout').hide();
      $('#about').removeClass('slide-out');
      $('#about').toggleClass('slide-in'); 
  });
  $("#hideAbout").click(function(){
  		$('#showAbout').show();   
      $('#hideAbout').hide();
    	$('#about').removeClass('slide-in');      $("#about").toggleClass('slide-out');   
  });
});