JSFiddle - React, Tailwind, and code Playground

by Stanislav Litvinenko

HTML

<h3>Placeholders</h3>
<ul>
  <li><svg class="gem gem-round gem-gray gem-outline" viewBox="-2 -2 64 64"></svg></li> 
  <li><svg class="gem gem-oval gem-gray gem-outline" viewBox="-2 -2 52 64" ></svg></li>
  <li><svg class="gem gem-marquise gem-gray gem-outline" viewBox="-2 -2 36 64"></svg></li>
  <li><svg class="gem gem-cushion gem-gray gem-outline" viewBox="-2 -2 64 64"></svg></li>
  <li><svg class="gem gem-princess gem-gray gem-outline" viewBox="-2 -2 64 64"></svg></li>
  <li><svg class="gem gem-pear gem-gray gem-outline" viewBox="-2 -2 48 64"></svg></li>
  <li><svg class="gem gem-radiant gem-gray gem-outline" viewBox="-2 -2 58 64"></svg></li>
  <li><svg class="gem gem-emerald gem-gray gem-outline" viewBox="-2 -2 50 64"></svg></li>
  <li><svg class="gem gem-asscher gem-gray gem-outline" viewBox="-2 -2 64 64"></svg></li>
  <li><svg class="gem gem-heart gem-gray gem-outline" viewBox="-2 -4 64 64"></svg></li>
</ul>

SCSS

ul {
  list-style: none;
  margin: 0;
  padding: 10px 30px;
  display: block;
  li {
    margin: 0 10px 10px 0;
    display: block;
    width: 1000px;
    height: 1000px;
    background-color: rgba(0,0,0,0);
    border-radius: 3px;
    border: 1px solid red;
    position: relative;
    float: left;
  }
}

.gem-yellow {polygon, path {fill: #edc000; stroke: #edc000; stroke-width: "1%"; stroke-opacity: 0.1;}}
.gem-pink {polygon, path {fill: #ff1433; stroke: #ff1433; stroke-width: "1%"; stroke-opacity: 0.1;}}
.gem-blue {polygon, path {fill: #006dbf; stroke: #006dbf; stroke-width: "1%"; stroke-opacity: 0.1;}}
.gem-green {polygon, path {fill: #01a920; stroke: #01a920; stroke-width: "1%"; stroke-opacity: 0.1;}}
.gem-orange {polygon, path {fill: #ff6302; stroke: #ff6302; stroke-width: "1%"; stroke-opacity: 0.1;}}
.gem-brown {polygon, path {fill: #9c8032; stroke: #9c8032; stroke-width: "1%"; stroke-opacity: 0.1;}}
.gem-red {polygon, path {fill: #ff0000; stroke: #ff0000; stroke-width: "1%"; stroke-opacity: 0.1;}}
.gem-purple {polygon, path {fill: #6b208a; stroke: #6b208a; stroke-width: "1%"; stroke-opacity: 0.1;}}
.gem-black {polygon, path {fill: #000; stroke: #000; stroke-width: "1%"; stroke-opacity: 0.1;}}
.gem-gray {polygon, path {fill: #878787; stroke: #878787; stroke-width: "1%"; stroke-opacity: 0.1;}}
.gem-outline {polygon, path {fill: none; stroke: #006dbf; stroke-width: 0.5; stroke-opacity: 1; stroke-linecap: round; stroke-miterlimit: 1;} *[class^='cls-'] {opacity: 2 !important;}}


.gem {
  width: 60%;
  height: 60%;
  position: absolute;
  padding: 20%;
  left: 0;
  top: 0;
  opacity: 0.3;

  .cls-1 {opacity: 0.1;}
  .cls-2 {opacity: 0.2;}
  .cls-3 {opacity: 0.3;}
  .cls-4 {opacity: 0.4;}
  .cls-5 {opacity: 0.5;}
  .cls-6 {opacity: 0.6;}
  .cls-7 {opacity: 0.7;}
  .cls-8 {opacity: 0.8;}
  .cls-9 {opacity: 0.9;}
  .cls-10 {opacity: 1;}
}

h3 { margin: 0; padding: 10px; font-family: sans-serif; font-size: 14px; }

CoffeeScript

svg_gem_round = '<polygon class="cls-1" points="30 0 21.86 10.32 30.01 14.23 38.16 10.33 30 0"/> <polygon class="cls-8" points="51.21 8.79 38.16 10.33 41.15 18.86 49.68 21.86 51.21 8.79"/> <polygon class="cls-10" points="60 30 49.68 21.86 45.77 30.01 49.67 38.16 60 30"/> <polygon class="cls-8" points="51.21 51.21 49.67 38.16 41.14 41.15 38.14 49.68 51.21 51.21"/> <polygon class="cls-10" points="30 60 38.14 49.68 29.99 45.77 21.84 49.67 30 60"/> <polygon class="cls-8" points="8.79 51.21 21.84 49.67 18.85 41.14 10.32 38.14 8.79 51.21"/> <polygon class="cls-10" points="0 30 10.32 38.14 14.23 29.99 10.33 21.84 0 30"/> <polygon class="cls-8" points="8.79 8.79 10.33 21.84 18.86 18.85 21.86 10.32 8.79 8.79"/> <polygon class="cls-4" points="21.86 10.32 18.86 18.85 30.01 14.23 21.86 10.32"/> <polygon class="cls-4" points="38.16 10.33 30.01 14.23 41.15 18.86 38.16 10.33"/> <polygon class="cls-4" points="49.68 21.86 41.15 18.86 45.77 30.01 49.68 21.86"/> <polygon class="cls-4" points="38.14 49.68 41.14 41.15 29.99 45.77 38.14 49.68"/> <polygon class="cls-4" points="10.32 38.14 18.85 41.14 14.23 29.99 10.32 38.14"/> <path class="cls-5" d="M41.48,2.28h0A29.91,29.91,0,0,0,30,0l8.16,10.33Z"/> <path class="cls-7" d="M41.48,2.28l-3.32,8L51.21,8.79a30,30,0,0,0-9.73-6.51Z"/> <path class="cls-5" d="M57.72,18.52h0a30,30,0,0,0-6.51-9.73L49.68,21.86Z"/> <path class="cls-7" d="M57.72,18.52l-8,3.34L60,30a29.91,29.91,0,0,0-2.28-11.48Z"/> <path class="cls-5" d="M57.72,41.48h0A29.91,29.91,0,0,0,60,30L49.67,38.16Z"/> <path class="cls-7" d="M57.72,41.48l-8-3.32,1.54,13.06a30,30,0,0,0,6.51-9.73Z"/> <path class="cls-5" d="M41.48,57.72h0a30,30,0,0,0,9.73-6.51L38.14,49.68Z"/> <path class="cls-7" d="M41.48,57.72l-3.34-8L30,60a29.91,29.91,0,0,0,11.48-2.28Z"/> <path class="cls-5" d="M18.52,57.72h0A29.91,29.91,0,0,0,30,60L21.84,49.67Z"/> <path class="cls-7" d="M18.52,57.72l3.32-8L8.79,51.21a30,30,0,0,0,9.73,6.51Z"/> <path class="cls-5" d="M2.28,41.48h0a30,30,0,0,0,6.51,9.73l1.54-13.07Z"/> <path...