JSFiddle - React, Tailwind, and code Playground

HTML

<div id="unknown_background">
  <div><ul class="cg_ul">
    <li class="cg_li">
        <a class="cg_a activeGroup">Tab 1</a></li>
    <li class="cg_li"><a class="cg_a">Tab 2</a></li>
  </ul></div>
  <div style="clear: both;"> </div>
  <div class="cg_content">
     Lorem Ipsum dolor sit amet.
  </div>
</div>

CSS

.cg_ul { list-style-type: none; margin: 0; }
.cg_li { float: left; }
.cg_a { padding: 5px 15px; border: 1px solid #999; 
        margin-right: 3px; text-decoration: none;
        cursor: pointer; display: block;
        margin-bottom: -1px; font-weight: bold; }
.cg_content { border: 1px solid #999; padding: 10px; }

.activeGroup { margin-top: 1px; border-bottom: none;
               background-color: #F4F4F4; }

JavaScript

var cl = Math.round(205+Math.random()*50);
document.getElementById("unknown_background").setAttribute("style", "background-color: rgb("+cl+", "+cl+", "+cl+");");