JSFiddle - React, Tailwind, and code Playground

by Kelly Hawker

HTML

<div class="mobContCon">

  <a href="" class="eaContIcon">
    Text
    <span class="customHex"></span>
  </a>

  <a href="" class="eaContIcon">
    Text
    <span class="customHex">#0033ff</span>
  </a>

  <a href="" class="eaContIcon">
    Text
    <span class="customHex">#ff00ff</span>
  </a>

</div>

CSS

a.eaContIcon {
  height: 40px;
  padding: 10px;
  background: #ff0000 !important;
  margin: 0 1px;
  color: #fff;
  text-decoration: none;
}

.customHex {
  display: none;
}

JavaScript

$(document).ready(function() {

  $('.mobContCon a').each(function() {
    $(this).addClass('eaContIcon');
  });

  $('.eaContIcon').attr('style', function() {
    return 'background:' + $(this).children('.customHex').text() + ' !important';

  });

});