JSFiddle - React, Tailwind, and code Playground

by Gwyn Milcote

HTML

For colours https://codepen.io/sosuke/pen/Pjoqqp<br>
<img src="http://icons.iconarchive.com/icons/iconsmind/outline/256/Compass-Rose-icon.png">
<img src="http://icons.iconarchive.com/icons/iconsmind/outline/256/Compass-Rose-icon.png" class="orange">
<img src="http://icons.iconarchive.com/icons/iconsmind/outline/256/Compass-Rose-icon.png" class="teal">

<img src="http://icons.iconarchive.com/icons/iconsmind/outline/256/Compass-Rose-icon.png" class="scarlet">
<img src="http://icons.iconarchive.com/icons/iconsmind/outline/256/Compass-Rose-icon.png" class="midnight">
<img src="http://icons.iconarchive.com/icons/iconsmind/outline/256/Compass-Rose-icon.png" class="pearl">

<img src="http://icons.iconarchive.com/icons/iconsmind/outline/256/Compass-Rose-icon.png" class="olive">
<img src="http://icons.iconarchive.com/icons/iconsmind/outline/256/Compass-Rose-icon.png" class="stone">
<img src="http://icons.iconarchive.com/icons/iconsmind/outline/256/Compass-Rose-icon.png" class="rose">
<br><br>
<img src="http://icons.iconarchive.com/icons/iconsmind/outline/256/Compass-Rose-icon.png" class='fire01'>
<img src="http://icons.iconarchive.com/icons/iconsmind/outline/256/Compass-Rose-icon.png" class="fire02">
<img src="http://icons.iconarchive.com/icons/iconsmind/outline/256/Compass-Rose-icon.png" class="fire03">

<img src="http://icons.iconarchive.com/icons/iconsmind/outline/256/Compass-Rose-icon.png" class="fire04">
<img src="http://icons.iconarchive.com/icons/iconsmind/outline/256/Compass-Rose-icon.png" class="fire05">
<img src="http://icons.iconarchive.com/icons/iconsmind/outline/256/Compass-Rose-icon.png" class="fire06">

<img src="http://icons.iconarchive.com/icons/iconsmind/outline/256/Compass-Rose-icon.png" class="fire07">
<img src="http://icons.iconarchive.com/icons/iconsmind/outline/256/Compass-Rose-icon.png" class="fire08">
<img src="http://icons.iconarchive.com/icons/iconsmind/outline/256/Compass-Rose-icon.png" class="fire09">

<img...

CSS

body {background-color:gold;}
img {width:30%;}

.orange {filter: invert(45%) sepia(66%) saturate(931%) hue-rotate(354deg) brightness(102%) contrast(104%);}
.teal {filter: invert(51%) sepia(84%) saturate(1511%) hue-rotate(119deg) brightness(99%) contrast(97%);}
.scarlet {filter: invert(15%) sepia(87%) saturate(3567%) hue-rotate(1deg) brightness(99%) contrast(102%);}
.midnight {filter: invert(9%) sepia(91%) saturate(7230%) hue-rotate(266deg) brightness(62%) contrast(106%);}
.pearl {filter: invert(100%) sepia(98%) saturate(291%) hue-rotate(294deg) brightness(101%) contrast(87%);}
.olive {filter: invert(91%) sepia(56%) saturate(430%) hue-rotate(12deg) brightness(89%) contrast(87%);}
.stone {filter: invert(42%) sepia(13%) saturate(189%) hue-rotate(173deg) brightness(90%) contrast(87%);}
.rose {filter: invert(85%) sepia(31%) saturate(761%) hue-rotate(281deg) brightness(101%) contrast(94%);}

.sepia01 {filter: invert(95%) sepia(100%);}
.sepia02 {filter: invert(86%) sepia(100%);}
.sepia03 {filter: invert(79%) sepia(100%);}
.sepia04 {filter: invert(72%) sepia(100%);}
.sepia05 {filter: invert(65%) sepia(100%);}
.sepia06 {filter: invert(57%) sepia(100%);}
.sepia07 {filter: invert(50%) sepia(100%);}
.sepia08 {filter: invert(43%) sepia(100%);}
.sepia09 {filter: invert(36%) sepia(100%);}
.sepia10 {filter: invert(28%) sepia(100%);}
.sepia11 {filter: invert(21%) sepia(100%);}
.sepia12 {filter: invert(15%) sepia(100%);}
.sepia13 {filter: invert(10%) sepia(100%);}

.mono01 {filter: invert(95%);}
.mono02 {filter: invert(86%);}
.mono03 {filter: invert(79%);}
.mono04 {filter: invert(72%);}
.mono05 {filter: invert(65%);}
.mono06 {filter: invert(57%);}
.mono07 {filter: invert(50%);}
.mono08 {filter: invert(43%);}
.mono09 {filter: invert(36%);}
.mono10 {filter: invert(28%);}
.mono11 {filter: invert(21%);}
.mono12 {filter: invert(15%);}
.mono13 {filter: invert(10%);}

.ice01,.ice13 {filter: invert(95%) sepia(100%) hue-rotate(90deg);}
.ice02,.ice12 {filter: invert(80%) sepia(100%)...