JSFiddle - React, Tailwind, and code Playground

HTML

<html>

  <head>
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
    <script src="https://rawgit.com/riot/riot/master/riot.min.js"></script>
  </head>
  <style>
  .m-header--navy{
    color: navy;
  }
  .o-header{
    text-align: center;
  }
  </style>
  <body>
    <o-header></o-header>
    <script>
      riot.tag('o-header', '<header class="{ opts.color } { opts.structure }">MY HEADER</header>')
      riot.mount('o-header', { structure: 'o-header', color: 'm-header--navy'});
    </script>
  </body>

</html>