JSFiddle - React, Tailwind, and code Playground

by Dominic Farolino

HTML

<cool-card></cool-card>
<cool-card></cool-card>
<cool-card></cool-card>
<cool-card></cool-card>
<cool-card></cool-card>

JavaScript

class CoolCard extends HTMLElement {
  constructor() {
    // MUST to allow HTMLElement interface to set
    // itself up so we can take advantage of it
    super();
  }

  connectedCallback() {
    // Every time a cool-card gets inserted into a
    // document this asynchronous callback gets called
    const shadow = this.attachShadow({mode: 'open'});

    shadow.innerHTML = `
      <style>
        div.card {
          width: 100%;
          max-width: 300px;
          display: inline-block;
          box-shadow: 0px 1px 3px rgba(0, 0, 0, .6);
          margin: 10px;
          padding: 10px;
          background: white;
        }
      </style>

      <div class="card">
        <h2>CoolCard Title</h2>
      </div>
    `;
  }
}

// Tell the browser about our 'cool-card' custom element
customElements.define('cool-card', CoolCard);