JSFiddle - React, Tailwind, and code Playground

by gevgeny

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.4.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.4.1/umd/react-dom.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/styled-components/3.3.3/styled-components.js"></script>
<div id="root"></div>

Babel + JSX

const { React, ReactDOM, styled: { default: styled } } = window;

const Button = styled('button')([
  'color: coral;' +
  'padding: 0.25rem 1rem;' + 
  'border: solid 2px coral;' +
  'border-radius: 3px;' +
  'margin: 0.5rem;' +
  'font-size: 1rem;'
]);

ReactDOM.render(
  <Button>I'm a button</Button>,
  document.getElementById('root')
);