JSFiddle - React, Tailwind, and code Playground

by camnpr

HTML

<div class="gap">
    <a href="#top" class="thing"></a>
  </div>

  <div class="section extras" id="more-features">

    <div class="heading l-page">
      <h2><span class="in"><span class="inin"><b>More</b> <i>features<i></span></span></h2>
      <!-- <h2><strong>More</strong> <span>features</span></h2> -->
    </div>

    <div class="examples tree l-page">

      <div class="example slim">
        <div class="in">
          <div class="area">
            <div class="box"></div>
          </div>
          <h3>Delay</h3>
          <p>You can specify a delay.</p>
          <div class="code">
            <pre>$('.box').transition({ scale: 0, <b>delay: 500</b> });</pre>
          </div>
        </div>
      </div>

      <div class="example slim">
        <div class="in">
          <div class="area">
            <div class="box"></div>
          </div>
          <h3>Optional units</h3>
          <p>All units (eg, <code>px</code>, <code>deg</code>, <code>ms</code>) are optional.</p>
          <div class="code">
            <pre>$('.box').transition({ <b>y: 30</b> });</pre>
          </div>
        </div>
      </div>

      <div class="example slim">
        <div class="in">
          <div class="area">
            <div class="box"></div>
          </div>
          <h3>$.fn.css</h3>
          <p>Transform properties work with <code>.css()</code> as well. They're not just for animation!</p>
          <div class="code">
            <pre>$('.box')<b>.css</b>({ rotate: '30deg' });</pre>
          </div>
        </div>
      </div>

      <div class="example slim">
        <div class="in">
          <div class="area">
            <div class="box"></div>
          </div>
          <h3>Vendor prefixes</h3>
          <p>Vendor prefixes are auto-added for <code>transform</code>, <code>transition</code>, and others.</p>
          <div class="code">
            <pre>$('.box').css({ <b>transform: 'scale(0.2)'</b> });</pre>
          </div>
        </div>
      </div>

      <div...

CSS

@import url(http://ricostacruz.com/jquery.transit/assets/style.css?v=14845);