JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <base href="https://polygit.org/components/">
    <script src="webcomponentsjs/webcomponents-lite.js"></script>
    <link rel="import" href="polymer/polymer.html">
    <link rel="import" href="polymer/polymer-element.html">
</head>
<body>
    <my-input></my-input>

    <dom-module id="my-input">

        <template>
            <div><input type="text" value="{{text::input}}"></div>
            <div>[[text]]</div>
        </template>

        <script>
// For Firefox
// https://github.com/Polymer/polymer-bundler/issues/234#issuecomment-133379949
window.addEventListener("WebComponentsReady", function(){

            class MyInput extends Polymer.Element {
                static get is() {
                    return 'my-input';
                }
                static get properties() {
                    return {
                        text: String,
                    }
                }
                constructor() {
                    super();
                }
            }
            customElements.define(MyInput.is, MyInput);

});
        </script>

    </dom-module>

</body>
</html>