JSFiddle - React, Tailwind, and code Playground

by Avinash_R

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js"></script>
Audio <span id="audio" class="audio">No</span>
<br /> OGG <span class="audio sub-feature" id="ogg" data-feature="ogg">No</span>
<br /> MP3 <span class="audio sub-feature" id="mp3" data-feature="mp3">No</span>
<br /> WAV <span class="audio sub-feature" id="wav" data-feature="wav">No</span>
<br /> M4A <span class="audio sub-feature" id="m4a" data-feature="m4a">No</span>
<br />

SCSS

span.audio {
  color: gray;
  &.feature-true {
    color: green;
  }
  &.feature-probably {
    background-color: yellow;
  }
  &.feature-maybe {
    color: #fefefe;
    background-color: orange;
  }
}

JavaScript

(($, M) => {
  $("#audio")
    .text(M.audio)
    .addClass('feature-' + M.audio)
  $(".audio.sub-feature").each((i, x) => {
    const $x = $(x),
      value = M.audio[$x.attr('data-feature')]
    $x
      .text(value)
      .addClass('feature-' + value)
  })
})(jQuery, Modernizr)