JSFiddle - React, Tailwind, and code Playground

by jlongster

HTML

<div class="left">
   <code>div</code> element
   <div class="render-raw"></div>
</div>

<div class="left">
   clipped
   <div class="render-clipped"></div>
</div>

<p>
  <pre>

background: -moz-linear-gradient(45deg, #00FF00 50%, transparent 0);</pre>
</p>

<div class="sidenote">
      Note: WebKit and Opera support the same property except
      with <code>-webkit</code> and <code>-o</code> prefixes.
</div>

CSS

.render-raw {
      width: 50px;
      height: 50px;
      background-color: #00FF00;
}

.render-clipped {
      width: 50px;
      height: 50px;
      background: -moz-linear-gradient(-45deg, #00FF00 50%, transparent 0);
      background: -o-linear-gradient(-45deg, #00FF00 50%, transparent 0);
      background: -webkit-gradient(linear, 0 0, 50 50, from(#00FF00), color-stop(0.5, #00FF00), color-stop(0.5, transparent), to(transparent));
}

.left {
    float: left;
    margin: 0 1em;
}

.sidenote {
      font-size: .9em;
      color: grey;
}

p {
    clear: both;
    margin: 1em 0;
}

JavaScript

// Press the play button at the top