JSFiddle - React, Tailwind, and code Playground

by Glynne Turner

HTML

<div class="container">
  <div class="container-inner">
    <div class="background"></div>
    <section id="intro" class="wrapper" style="display: none;">
      <h1 class="name" style="transform: translate3d(0px, -5.52302px, 0px) scale(1) rotate(0deg); opacity: 0.96055;">Parallax Demo</h1>
      <h2 class="byline" style="transform: translate3d(0px, -4.33952px, 0px) scale(1) rotate(0deg); opacity: 0.96055;">An experiment by Dave Gamache</h2>
    </section>
    <section id="explosion" class="wrapper" style="display: none;">
      <p class="explosion-byline" style="transform: translate3d(0px, -370.339px, 0px) scale(1) rotate(0deg); opacity: 0.00331557;">Here's an example of 16 elements scaling, fading and moving at once.</p>
      <ul id="domExplosionList" style="transform: translate3d(0px, -11.4621px, 0px) scale(1) rotate(0deg); opacity: 0.017664;">
        <li class="dom-explosion-item dei-1" style="transform: translate3d(-177.598px, -139.048px, 0px) scale(1.99999) rotate(0deg); opacity: 1.14852e-05;"></li>
        <li class="dom-explosion-item dei-2" style="transform: translate3d(-71.0392px, -46.3495px, 0px) scale(1) rotate(0deg); opacity: 1.14852e-05;"></li>
        <li class="dom-explosion-item dei-3" style="transform: translate3d(35.5196px, -83.429px, 0px) scale(1.2) rotate(0deg); opacity: 1.14852e-05;"></li>
        <li class="dom-explosion-item dei-4" style="transform: translate3d(142.078px, -157.588px, 0px) scale(1.49999) rotate(0deg); opacity: 1.14852e-05;"></li>
        <li class="dom-explosion-item dei-5" style="transform: translate3d(-266.397px, -18.5398px, 0px) scale(1.99999) rotate(0deg); opacity: 1.14852e-05;"></li>
        <li class="dom-explosion-item dei-6" style="transform: translate3d(-124.319px, -9.26989px, 0px) scale(1.2) rotate(0deg); opacity: 1.14852e-05;"></li>
        <li class="dom-explosion-item dei-7" style="transform: translate3d(35.5196px, -37.0796px, 0px) scale(1.1) rotate(0deg); opacity: 1.14852e-05;"></li>
        <li...