JSFiddle - React, Tailwind, and code Playground

by Andrew Bone

HTML

<script src="https://unpkg.com/@webcomponents/webcomponentsjs@latest/webcomponents-loader.js"></script>

<script type="module">
  import { LitElement, html } from 'https://unpkg.com/lit-element/lit-element.js?module';
  
  class MdSwitch extends LitElement {
    static get properties() {
      return {
        checked:  { type: Boolean, attribute: true },
        disabled: { type: Boolean, attribute: true }
      };
    }
  
    render() {
      return html`
        <label class="md_switch">
          <input type="checkbox" />
          <span class="md_switch__toggle"></span>
          <slot></slot>
        </label>
      `;
    }
  }
  
  customElements.define('md-switch', MdSwitch);
</script>

<md-switch>Hello world!</md-switch>