JSFiddle - React, Tailwind, and code Playground

by Jordan Sayner

HTML

<!DOCTYPE html><html lang='en' class=''>
<head><script src='//static.codepen.io/assets/editor/live/console_runner-ce3034e6bde3912cc25f83cccb7caa2b0f976196f2f2d52303a462c826d54a73.js'></script><script src='//static.codepen.io/assets/editor/live/css_live_reload_init-e9c0cc5bb634d3d14b840de051920ac153d7d3d36fb050abad285779d7e5e8bd.js'></script><meta charset='UTF-8'><meta name="robots" content="noindex"><link rel="shortcut icon" type="image/x-icon" href="//static.codepen.io/assets/favicon/favicon-8ea04875e70c4b0bb41da869e81236e54394d63638a1ef12fa558a4a835f1164.ico" /><link rel="mask-icon" type="" href="//static.codepen.io/assets/favicon/logo-pin-f2d2b6d2c61838f7e76325261b7195c27224080bc099486ddd6dccb469b8e8e6.svg" color="#111" /><link rel="canonical" href="https://codepen.io/yoksel/pen/BiExv" />

<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css'>
<style class="cp-pen-styles">BODY {
  padding: 2em;
  text-align: center;
  font: 16px/1.4 Trebichet MS, Arial, sans-serif;
}

svg {
  display: block;
}

.svg-defs {
  position: absolute;
  left: -100%;
}

.intro {
  margin: 0 0 1em;
}

H2 {
  margin: 0 0 .5em;
  font-size: 2.5em;
}

H4 {
  margin-bottom: 5px;
  background: #c4e0ee;
  font-size: 1.3em;
  line-height: 1.6;
}

LI {
  display: inline-block;
  margin-bottom: 1.2em;
  border: 1px solid #c4e0ee;
}

B {
  font-weight: bold;
}
</style></head><body>
<svg class="svg-defs">  
  <filter id="normal">
    <feBlend mode="normal" in2="SourceGraphic"/>
  </filter>

  <filter id="multiply">
    <feFlood flood-color="orangered" flood-opacity="1" result="flood"/>
    <feBlend mode="multiply" in2="SourceGraphic"/>
  </filter>

  <filter id="screen">
    <feFlood flood-color="orangered" flood-opacity="1" result="flood"/>
    <feBlend mode="screen" in2="SourceGraphic"/>
  </filter>

  <filter id="darken">
    <feFlood flood-color="orangered" flood-opacity="1" result="flood"/>
    <feBlend mode="darken" in2="SourceGraphic"/>
 ...