JSFiddle - React, Tailwind, and code Playground

by Avi Algaly

HTML

<ul id="colors">
  <li name="soft_blue">#00B9FF</li>
  <li name="soft_green">#B3D459</li>
  <li name="soft_pink">#FF3D6E</li>
  <li name="soft_pink_for_button">#FF3366</li>
  <li name="feed_bg">#F1F1F1</li>
  <li name="pinned_post_bg">#CDEAF4</li>
  <li name="medical_green">#2ECC71</li>
  <li name="workflow_purple">#D667CF</li>
  <li name="feed_counter_bluish">#2BB1E2</li>
  <li name="family_soft_green">#B3D459</li>
  <li name="family_soft_orange">#FCAF5C</li>
  <li name="family_soft_pink">#FF7C90</li>
  <li name="feed_counter_text_greysh">#282828</li>
  <li name="role_member_green">#1CBB2F</li>
  <li name="role_member_orange">#ED5C42</li>
  <li name="role_mentor_light_orange">#F5BD03</li>
  <li name="role_mentor_orange">#E58E1D</li>
  <li name="role_provider_blue">#6586BE</li>
  <li name="profile_info_param_li">#ABABAB</li>
  <li name="profile_info_gender_off">#929292</li>
  <li name="post_date_black">#999999</li>
  <li name="post_name_black">#1D1D26</li>
  <li name="post_write_comment_bg">#E5E5E5</li>
  <li name="green">#13AC59</li>
  <li name="graph_green">#2FFC2F</li>
  <li name="blue">#1B64AE</li>
  <li name="tutorial_blue">#007AFF</li>
  <li name="dark_blue">#1E3F76</li>
  <li name="orange">#F22B0B</li>
  <li name="red">#FF0000</li>
  <li name="white">#FFFFFF</li>
  <li name="light_grey">#F6F6F6</li>
  <li name="off_li">#D9D6DB</li>
  <li name="title_grey">#EBE8EC</li>
  <li name="grey">#DDDDDD</li>
  <li name="background_grey">#D5D5D5</li>
  <li name="light_dark_grey">#ACACAC</li>
  <li name="off_grey">#ACACAC</li>
  <li name="dark_grey">#5C5C5C</li>
  <li name="black_light">#3A3A3A</li>
  <li name="black_overlay">#66000000</li>
  <li name="black_overlay_type">#44000000</li>
  <li name="black_complete">#000000</li>
  <li name="black_opaque">#553A3A3A</li>
  <li name="white_opaque">#99FFFFFF</li>

  <!-- MiniDashBoard colors-->
  <li name="green_graph_circle">#46B171</li>
  <li name="minidash_seperator_line">#4E92BF</li>
  <li...

CSS

ul {
  list-style: none;
}

li {
  height: 70px;
  width: 90px;
  float: left;
  text-align: center;
  color: #000;
  word-wrap: break-word;
  padding: 5px;
}

JavaScript

document.querySelectorAll('#colors li').forEach(function(el) {
  el.style.backgroundColor = el.textContent;
  el.innerHTML += "<br/>" + el.getAttribute("name");
});