JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/0.7.23/webcomponents-lite.js"></script>

<base href="https://polygit.org/polymer+:master/components/">
<link href="polymer/polymer.html" rel="import">

<link href="paper-input/paper-input.html" rel="import">

<test-element></test-element>

<dom-module id="test-element">
  <template>
    
    <paper-input id="inputElement" type="text" value="{{inputValue::input}}"></paper-input>

    <div>
      [[inputValue]]
    </div>

    <div>
      <button on-tap="checkInputValue">
        validate
      </button>
    </div>
  </template>
  <script>
    HTMLImports.whenReady(() => {
      Polymer({
        is: 'test-element',
        checkInputValue() {
          console.log(this.inputValue, this.$.inputElement.value);
        }
      });
    });
  </script>
</dom-module>