JSFiddle - React, Tailwind, and code Playground

by Oussama Ben Mahmoud

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.5/handlebars.min.js"></script>
<script src="https://code.cloudcms.com/alpaca/1.5.18/bootstrap/alpaca.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://code.cloudcms.com/alpaca/1.5.18/bootstrap/alpaca.min.css">
<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<div id="container">
  <!-- This element's contents will be replaced with your component. -->
</div>

<div id="field4"></div>

CSS

button {
  margin-left: 5px;
}

input {
  margin: 5px;
}

form {
  padding-right: 10px;
}


}

Babel + JSX

class AlpacaFrom extends React.Component {
  componentDidMount() {
      var el = ReactDOM.findDOMNode(this.refs.alpacaForm);
      $(el).alpaca({
          "data": "Mint Chocolate",
          "schema": {
              "minLength": 3,
              "maxLength": 8
          },
          "options": {
              "label": "Ice Cream",
              "helper": "Please tell us the kind of ice cream you love most!",
              "size": 30,
              "placeholder": "Enter an ice cream flavor"
          }
      });
    }

    render() {
      return ( <div ref="alpacaForm"></div>);
    }
}

ReactDOM.render(
  React.createElement(AlpacaFrom),
  document.getElementById('container')
);