JSFiddle - React, Tailwind, and code Playground

by mtambulut

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<div id="demo-top-bar">

  <div id="demo-bar-inside">

    <h2 id="demo-bar-badge">
      <a href="/">CSS-Tricks Example</a>
    </h2>

    <div id="demo-bar-buttons">
      <a class='header-button' href='#'>&larr; Back to Article</a>    </div>

  </div>

</div>
    <div class="page-wrap">
        <div class="gallery">
            <a href="/peter.php">
                <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/14179/bill.png" alt="Peter" class="peter" data-name="peter"/>
            </a>
            <a href="/ray.php">
                <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/14179/dan.png" alt="Ray" class="ray" data-name="ray"/>
            </a>
            <a href="/egon.php">
                <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/14179/egon.png" alt="Egon" class="egon" data-name="egon"/>
            </a>
            <a href="/winston.php">
                <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/14179/winston.png" alt="Winston" class="winston" data-name="winston">
            </a>
        </div>

        <p class="selected">Ghostbusters</p>
        <p class="highlight"></p>

        <div class="content"></div>
    </div>

CSS

* {
    box-sizing: border-box;
}

body, html {
    min-height: 800px;
    height: 100%;
}

.page-wrap {
    height: 100%;
    height: calc(100% - 82px);
    margin: 0;
    padding: 0 0 40px 0;
    background-color: #333;
    font-family: "Georgia", sans-serif;
    text-align: center;
    border: 15px solid #222;
    border-top: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    -webkit-font-smoothing: antialiased;
}

.ray {
    -webkit-filter: grayscale(100%) brightness(1) contrast(140%);
    filter: grayscale(100%) brightness(1) contrast(140%);
}

.gallery {
    min-height: 300px;
}
.gallery:before {
    visibility: hidden;
    display: block;
    font-size: 0;
    content: " ";
    clear: both;
    height: 0;
}
.gallery a {
    color: transparent;
}
img {
    transition: all .3s ease;
    border-radius: 100%;
    margin-right: 20px;
    margin-bottom: 10px;
    border: 20px solid transparent;
    -webkit-filter: grayscale(100%);
    width: 150px;
    height: 150px;
    margin-bottom: 0;
}

@media screen and (min-width: 600px){
    img {
        width: 200px;
        height: 200px;
    }
}
p {
    color: white;
    font-size: 18px;
}

.selected {
    margin-bottom: 0;
    text-transform: uppercase;
    font-size: 14px;
    letter-spacing: .8px;
    color: #666;
    font-weight: bold;
}

a {
    color: #777;
}

small {
    text-align: center;
    display: block;
}

h1 {
    color: white;
}

.content {
    text-align: left;
    line-height: 1.5;
    max-width: 750px;
    padding: 0 20px;
    margin: 0 auto;
}

.content p {
    color: white;
    font-size: 18px;
    line-height: 1.5;
}

.current {
    -webkit-filter: grayscale(0) brightness(1.2);
    filter: grayscale(0) brightness(1.2) ;
}

.current:hover {
    -webkit-filter: grayscale(0) brightness(1.4);
    filter: grayscale(0) brightness(1.4);
}

img:hover {
    cursor: pointer;
    -webkit-filter: grayscale(100%) brightness(1.4);
    filter:...

JavaScript

var container = document.querySelector('.gallery');

container.addEventListener('click', function(e) {
  if (e.target != e.currentTarget) {
    e.preventDefault();
    // e.target is the image inside the link we just clicked.
  }
  e.stopPropagation();
}, false);

var data = e.target.getAttribute('data-name'),
  url = data + ".html";
  history.pushState(null, null, url);
  
  function requestContent(file) {
  $('.content').load(file + ' .content');
}

window.addEventListener('popstate', function(e) {
  var character = e.state;

  if (character == null) {
    removeCurrentClass();
    textWrapper.innerHTML = " ";
    content.innerHTML = " ";
    document.title = defaultTitle;
  } else {
      updateText(character);
      requestContent(character + ".html");
      addCurrentClass(character);
      document.title = "Ghostbuster | " + character;
  }
});