JSFiddle - React, Tailwind, and code Playground

by molily

HTML

<h1 class="logo fadein f4">9elements</h1>

<p id="show-content"><button type="button">Start</button></p>

<div id="content">

<p>9elements is a small, privately-held software and design agency in the middle of the industrial Ruhr Area, Germany. We are dedicated to create cutting-edge applications with beautiful and functional design.</p>

<o>Our work is influenced by a wide spectrum of backgrounds: from game development and interface design to state-of-the-art computer science research, from business programming to digital culture.</p>

<p>Our objective: to create something that works well, looks and feels great and leaves a unique experience to its users.</p>

</div>

CSS

html {
  font-family: "Neue Helvetica", Helvetica, Arial, sans-serif;
  font-weight: 400;
  line-height: 1.5;
}

body {
  margin: 0;
  padding: 4em;
}

#show-content {
  display: none;
  text-align: center;
}

.transition-supported #show-content {
  display: block;
}

#show-content.hidden {
  display: none;
}

#show-content button {
  margin: 0;
  border: 0;
  padding: 5px 15px;
  background: #ddd;
  font: inherit;
}

.logo {
  margin: auto;
  width: 160px;
  height: 160px;
  margin-bottom: 2rem;
  background: black url(http://web.9elements.com/images/9elements.svg) no-repeat center;
  background-size: 130px auto;
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
}

#content {
  max-width: 30em;
  margin: auto;
  -moz-transition: opacity 1s;
  -webkit-transition: opacity 1s;
  transition: opacity 1s;
}

.transition-supported #content {
  opacity: 0;
}

#content.visible {
  opacity: 1;
}

JavaScript

var testCSSProperty = function(property) {
  var style = document.documentElement.style;
  var stringType = 'string';
  if (typeof style[property] === stringType) {
    return property;
  }
  var prefixes = ['Moz', 'Webkit', 'Khtml', 'O', 'ms'];
  for (var i = 0, l = prefixes.length; i < l; i++) {
    var prefix = prefixes[i];
    var prefixedProperty = prefix +
      property.charAt(0).toUpperCase() +
      property.substring(1);
    if (typeof style[prefixedProperty] === stringType) {
      return prefixedProperty;
    }
  }
  return false;
};

if (testCSSProperty('transition')) {
  document.body.className += " transition-supported";
}

document.getElementById('show-content').onclick = function() {
  document.getElementById('content').className = 'visible';
  this.className = 'hidden';
};