JSFiddle - React, Tailwind, and code Playground

HTML

<div class="#333 @fff">without hover</div>
<div class="#7fe=e7f @000=fff">with hover</div>

<div class="#ef7 %5=8">Background opacity and hover</div>

CSS

html {
  background: url('http://lorempixel.com/400/400/nature') no-repeat;
}
div {
  width: 300px;
  margin-bottom: 10px;
  padding:1em;
}

JavaScript

var cc_gvPatt=/^#([\da-fA-F]{2})([\da-fA-F]{2})([\da-fA-F]{2})$/;cc_fColorClass(1,1,1);function cc_fColorClass(cc_bHover,cc_bTextOpC,cc_bBGOpC){var cc_i=0;var cc_vElement=document.getElementsByTagName("*").item(cc_i);while(cc_vElement!="undefined"&&cc_vElement!="null"){var cc_vString=cc_vElement.getAttribute("class");if(cc_vString!=undefined){var cc_vBackGround=-1;var cc_vBGOpacity=-1;var cc_vBColour="";var cc_vBGOp="";var cc_vText=-1;var cc_vTOpacity=-1;var cc_vTColour="";var cc_vTOp="";if(cc_bTextOpC==1){cc_vText=cc_vString.indexOf("@");cc_vTOpacity=cc_vString.indexOf("!");if(cc_vText!=-1){var cc_vSpace=cc_vString.indexOf(" ",cc_vText);if(cc_vSpace!=-1){cc_vTColour=cc_vString.substring(cc_vText,cc_vSpace);} else{cc_vTColour=cc_vString.substring(cc_vText);} cc_vTColour=cc_vTColour.replace("@","#");} if(cc_vTOpacity!=-1){var cc_vSpace=cc_vString.indexOf(" ",cc_vTOpacity);if(cc_vSpace!=-1){cc_vTOp=cc_vString.substring(cc_vTOpacity,cc_vSpace);} else{cc_vTOp=cc_vString.substring(cc_vTOpacity);} cc_vTOp=cc_vTOp.replace("!","0.");}} if(cc_bBGOpC==1){cc_vBackGround=cc_vString.indexOf("#");cc_vBGOpacity=cc_vString.indexOf("%");if(cc_vBackGround!=-1){var cc_vSpace=cc_vString.indexOf(" ",cc_vBackGround);if(cc_vSpace!=-1){cc_vBColour=cc_vString.substring(cc_vBackGround,cc_vSpace);} else{cc_vBColour=cc_vString.substring(cc_vBackGround);}} if(cc_vBGOpacity!=-1){var cc_vSpace=cc_vString.indexOf(" ",cc_vBGOpacity);if(cc_vSpace!=-1){cc_vBGOp=cc_vString.substring(cc_vBGOpacity,cc_vSpace);} else{cc_vBGOp=cc_vString.substring(cc_vBGOpacity);} cc_vBGOp=cc_vBGOp.replace("%","0.");}} if(cc_vBackGround!=-1||cc_vBGOpacity!=-1||cc_vText!=-1||cc_vTOpacity!=-1){cc_fSetColorsAndOpacities(cc_vElement,cc_vBColour,cc_vBGOp,cc_vTColour,cc_vTOp,cc_bHover);}} cc_i++;cc_vElement=document.getElementsByTagName("*").item(cc_i);}} function cc_fSetColorsAndOpacities(cc_vElement,cc_vBColor,cc_vBGOpacity,cc_vTColor,cc_vTOpacity,cc_bHover){var cc_vTOpHover=cc_vTOpacity.indexOf("=");var...