JSFiddle - React, Tailwind, and code Playground

by ian_smithz

HTML

<section class="features">
      <section class="features-sidebar feature">
        <p class="callout animate-in">Instant access to all your projects.</p>
        <p class="details animate-in">You'll find all projects that you're working on listed in the sidebar. If you want to create a new repository, or clone one from GitHub or GitHub Enterprise, it just takes a second through the repository popover.</p>
        <p class="details animate-in">With GitHub for Windows 2.0, you can get up and running even faster by initializing your project with a Git ignore of your choice.</p>
      </section>

      <div class="section-wrapper">
        <section class="features-sync feature">
          <p class="callout animate-in">Staying in sync has never been this easy.</p>
          <p class="details animate-in">The sync button turns the cumbersome workflow of pulling and pushing into a single operation. It notifies you when there are changes to pull down, and lets you easily share local changes.</p>
        </section>
      </div>

</section>

    <section class="footer-download">
     <p class="callout animate-in pre-animate">What are you waiting for?</p>

     <div class="animate-in pre-animate"><a class="download" href="https://github-windows.s3.amazonaws.com/GitHubSetup.exe"><span class="download-icon">Download</span><span class="v">Download GitHub for Windows 2.0</span></a></div>
    </section>




  


</body>

CSS

html, body, div, span, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, 
small, strike, strong, sub, sup, tt, 
dl, dt, dd, ol, ul, li,
 form, label, 
table, caption, tbody, tfoot, thead, tr, th, td, embed, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
  display: block;
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
}

blockquote, q {
  quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
  content: '';
  content: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

/* #### Styles #### */

a {
  color: #ffffff;
  text-decoration: none;
}

.feature a {
  color: #3592dd;
}

.feature a:hover {
  color: #60adeb;  
}

body {
  background-color: #252525;
  font-family: "Segoe WP", "Segoe UI", "Helvetica Neue", "Arial", sans-serif;
  color: #333;
  -webkit-font-smoothing: antialiased;
  line-height: 1;
}

.animate-in {
  -webkit-transition: all 0.6s ease-in-out 0s;
  -moz-transition: all 0.6s ease-in-out 0s;
  transition: all 0.6s ease-in-out 0s;
  -webkit-transform: translateZ(0);
  -moz-transform: translateZ(0);
  transform: translateZ(0);
}

.pre-animate {
  opacity: 0;
  -webkit-transform: translateX(25px);
  -moz-transform: translateX(25px);
  transform: translateX(25px);
}

.features-sync > .pre-animate, .footer-download .pre-animate, .branches-popover.pre-animate, .repo-create.pre-animate {
  -webkit-transform: scale(0.9);
  -moz-transform: scale(0.9);
  transform: scale(0.9);
}

#page {
	background-color: #fff;
}

.header {
  padding: 12px 0;
  position: relative;
  text-align: center;
  background-color: #3592dd;
}

h1 {
  margin: 14px 0 0px;
  text-align: center;
  padding: 0;
  border: 0;
  vertical-align: baseline;
}

h1 > a...

JavaScript

$(function() {

  $.ajax({
    url: '//github-windows.s3.amazonaws.com/changelog.jsonp',
    dataType: 'jsonp'
  })

  $animateIn = $(".animate-in");
  var animateInOffset = 100;

  // Only animate in elements if the browser supports animations
  if (browserSupportsCSSProperty('animation') && browserSupportsCSSProperty('transition')) {
    $animateIn.addClass("pre-animate");
  }

  $(window).scroll(function(e) {
    var windowHeight = $(window).height(),
      windowScrollPosition = $(window).scrollTop(),
      bottomScrollPosition = windowHeight + windowScrollPosition;

    $animateIn.each(function(i, element) {
      if ($(element).offset().top + animateInOffset < bottomScrollPosition) {
        $(element).removeClass('pre-animate');
      }
    });
  });

  if (isUsingUnsupportedOS()) {
    $('body').addClass('unsupported-os');
  }
})

// Called from changelog.jsonp
function JsonParse(data) {
  buildReleaseNotesFromData(data);
}

function buildReleaseNotesFromData(data) {
  var releases = $("<ul class='releases'/>")
    .append($.map(data.releases, createRelease));

  $("#changelog").empty().append(releases);
}

function createRelease(r) {
  return $("<li/>")
    .append($("<span class='release-version'/>").text(r.version))
    .append($("<h2 class='release-header'/>").text(r.description))
    .append($("<ul class='changes'/>")
      .append($.map(r.changes, createChange)));
}

function createChange(changeText) {
  var m = changeText.match(/^(fixed|improved|removed|added)\s*:\s*(.*)/i);

  if (m) {
    return $("<li/>")
      .append($("<div class='change-label-container'/>")
        .append($("<em/>").addClass('change-label change-' + m[1].toLowerCase()).text(m[1])))
      .append(document.createTextNode(m[2]));
  }

  return $("<li/>").text(changeText);
}

function isUsingUnsupportedOS() {
  // Windows XP is not supported
  var userAgent = window.navigator.userAgent;
  return userAgent.indexOf('Windows NT 5.1') > -1 ||
    userAgent.indexOf('Windows NT 5.2')...