JSFiddle - React, Tailwind, and code Playground

HTML

<table class="general">
    <thead>
        <tr>
            <th>Title</th>
            <th>Release Date (AUS)</th>
            <th>Hype Level</th>
        </tr>
    </thead>
    <tbody>
        <tr class="odd">
            <td><strong>Anarchy Reigns</strong>
            </td>
            <td style='text-align:center'>10 Jan 2013</td>
            <td>
                <div class="hype">RROOOY</div>
            </td>
        </tr>
        <tr class="odd">
            <td colspan="3">
                <p>I like the unique character designs very much, frantic action from the
                    developers that brought us Bayonetta and Vanquish. However, this game focuses
                    on multiplayer, battle royale type of gameplay. Single player campaign
                    is available, but in my opinion, there's just not much of replay value.</p>
            </td>
        </tr>
        <tr class="even">
            <td><strong>DMC: Devil May Cry</strong>
            </td>
            <td style='text-align:center'>15 Jan 2013</td>
            <td>
                <div class="hype">RROOOYYY</div>
            </td>
        </tr>
        <tr class="even">
            <td colspan="3">
                <p>Capcom is revitalising one of its blockbusters by outsourcing the game
                    development to a UK studio, [link: http://en.wikipedia.org/wiki/Ninja_Theory]Ninja
                    Theory. Heavenly Sword (2007) is beautifully crafted, one of the early
                    games to show what PS3 can offer. However, their follow-up game, Enslaved:
                    Odyssey to the West (2010) is a miss though. The in-game environment takes
                    advantage of different color palettes, character designs are likeable and
                    deep story driven adventure but it's the irresponsive controls and camera
                    angles that broke the gameplay. I shall give this new DMC a go to see how
                    they'd...

CSS

.hype {
      border: 1px solid #555;
      width: 100%;
  }
  .hype span {
      display: inline-block;
      width: 10%;
  }
  .hype .R {
      background-color: #FF3333;
  }
  .hype .O {
      background-color: #FFCC33;
  }
  .hype .Y {
      background-color: #FFFF66;
  }
  .hype .G {
      background-color: #00CC66;
  }

JavaScript

function buildHypeMeter(_class) {
    // divide into 10 partitions (adjust CSS span width accordingly)
    var elements = document.getElementsByClassName(_class);
    var v = '';
    var h = '';

    for (var i = 0; i < elements.length; i++) {
        v = elements[i].innerHTML;
        if (v && v.length >= 0) {
            for (var j = 0; j < v.length; j++) {
                h += '<span class="' + v[j] + '">&nbsp</span>';
            }
        }
        elements[i].innerHTML = h;
        h = '';
    }
}