JSFiddle - React, Tailwind, and code Playground

by Neil Kalman

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<div class="colors-container">
  <div class="swatch-color" data-value="black">
    <p>Black</p>
  </div>
  <div class="swatch-color" data-value="blue">
    <p>Blue</p>
  </div>
  <div class="swatch-color" data-value="brown">
    <p>Brown</p>
  </div>
  <div class="swatch-color" data-value="clear">
    <p>Clear</p>
  </div>
  <div class="swatch-color" data-value="green">
    <p>Green</p>
  </div>
  <div class="swatch-color" data-value="grey">
    <p>Grey</p>
  </div>
  <div class="swatch-color" data-value="light-grey">
    <p>Light Grey</p>
  </div>
  <div class="swatch-color" data-value="orange">
    <p>Orange</p>
  </div>
  <div class="swatch-color" data-value="pink">
    <p>Pink</p>
  </div>
  <div class="swatch-color" data-value="purple">
    <p>Purple</p>
  </div>
  <div class="swatch-color" data-value="red">
    <p>Red</p>
  </div>
  <div class="swatch-color" data-value="white">
    <p>White</p>
  </div>
</div>

CSS

[data-value] {
  background-color: calc(attr(data-value));
}

[data-value]:after {
  content: "" attr(data-value);
}

JavaScript

var colors = $(".swatch-color");
  var dataValues = colors.data("value");
  
  var p = $(".swatch-color p");

colors.each(function(index){
  
 
  if($(this).text().toLowerCase() === $(this).data("value")){
  	p.addClass($(this).data("value"));
  }

});