JSFiddle - React, Tailwind, and code Playground

Guru React

by herodrigues

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.2/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.2/react-dom.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<div id="guru-container">
    <!-- This element's contents will be replaced with your component. -->
</div>

CSS

body {
    
}

@font-face {
    font-family: Arkhip;
    src: url('chrome-extension://__MSG_@@extension_id__/assets/fonts/Arkhip_font.otf');
}

@font-face {
    font-family: AvenirNextLTPro-Regular;
    src: url('chrome-extension://__MSG_@@extension_id__/assets/fonts/AvenirNextLTPro-Regular.otf');
}

@font-face {
    font-family: AvenirNextLTPro-Demi;
    src: url('chrome-extension://__MSG_@@extension_id__/assets/fonts/AvenirNextLTPro-Demi.otf');
}

@font-face {
    font-family: AvenirNextLTPro-Bold;
    src: url('chrome-extension://__MSG_@@extension_id__/assets/fonts/AvenirNextLTPro-Bold.otf');
}

@font-face {
    font-family: AvenirNextLTPro-MediumCn;
    src: url('chrome-extension://__MSG_@@extension_id__/assets/fonts/AvenirNextLTPro-MediumCn.otf');
}

@font-face {
    font-family: FontAwesome;
    src: url('chrome-extension://__MSG_@@extension_id__/vendor/fonts/FontAwesome.otf');
}

#guru-widget {
    text-transform: none !important;
}

div#guru {
    color: initial;
    font-family: initial;
    font-kerning: initial;
    font-size: initial;
    font-stretch: initial;
    font-style: initial;
    font-variant: initial;
    font-weight: initial;
    font-feature-settings: initial;
    -webkit-font-smoothing: initial;
    -webkit-locale: initial;
    text-orientation: initial;
    -webkit-text-orientation: initial;
    writing-mode: initial;
    -webkit-writing-mode: initial;
    text-rendering: initial;
    zoom: initial;
    align-content: initial;
    align-items: initial;
    alignment-baseline: initial;
    align-self: initial;
    animation: initial;
    backface-visibility: initial;
    background: initial;
    background-blend-mode: initial;
    baseline-shift: initial;
    border: initial;
    border-radius: initial;
    border-collapse: initial;
    bottom: initial;
    box-shadow: initial;
    box-sizing: initial;
    break-after: initial;
    break-before: initial;
    break-inside: initial;
    buffered-rendering: initial;
    caption-side:...

Babel + JSX

const Header = React.createClass({
  render: function () {
    return (
      <div className="guru-header">
        <a className="close" data-dismiss="alert" data-target="#GuruSidebar" aria-label="Close"><span aria-hidden="true">&times;</span></a>
        <span className="guru-logo">Guru</span>
      </div>
    );
  }
});

const Codes = React.createClass({
  render: function () {
    return (
      <div className="guru-codes">
        <div className="guru-parent-hexagon">
          <div className="guru-hexagon">
            <div className="guru-hexagon-content guru-num-codes">0</div>
          </div>
        </div>
        <div className="guru-see-codes">
          <p><span className="we-found">We found </span> <span className="guru-num-codes">0</span> <span className="codes-to-try">codes to try!</span></p>
          <p><a id="see-codes" className="see-codes" style="text-decoration: underline;">See the codes</a></p>
        </div>
        <div className="guru-try-codes">Try codes</div>
      </div>
    );
  }
});

const Sidebar = React.createClass({
  render: function () {
    return (
      <div id="GuruSidebar">
        <div className="content">
            <Header />
        </div>
      </div>
    );
  }
});

const Guru = React.createClass({
  render: function () {
    return (
      <div id="guru">
        <Sidebar />
      </div>
    );
  }
});

ReactDOM.render(
  <Guru />,
  document.getElementById('guru-container')
);