JSFiddle - React, Tailwind, and code Playground

by JuanMa Garrido

HTML

<div id="impl"></div>

CSS

.box {
  border: 1px solid #ccc;
  padding: 10px;
}

.button {
  background-color: #174E7D;
  border-radius: 5px;
  color: #fff;
  display: inline-block;
  margin-bottom: 5px;
  padding: 5px 15px;
  text-decoration: none;
}

Babel + JSX

var ipsumText = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero.';

React.render(
  <div>
    <a href="#" className="button">Button</a>
    <div>{ipsumText}</div>
  </div>,
  document.getElementById('impl')
);

// Remember that we use className in React instead of class.
// Because there are braces around `ipsumText`, it is evaluated as a JavaScript expression. Try removing the braces, what happens?