JSFiddle - React, Tailwind, and code Playground

HTML

<message-box kind="success">
  <span slot="title">Hurah!</span>
  <span slot="body">Everything went swimmingly</span>
</message-box>

JavaScript

class MessageBox extends HTMLElement {

  // Set the "kind" property
  set kind(option) {
    this.setAttribute("kind", option);
  }

  // Get the "kind" property (default to 'info')
  get kind() {
    return this.hasAttribute("kind")
      ? this.getAttribute("kind")
      : 'info';
  }

  // Called when inserted into the DOM
  connectedCallback() {

    const shadowRoot = this.attachShadow({ mode: 'open' });

    shadowRoot.innerHTML = `<style>
    	#msg-box {
        padding: 10px;
        border-style: solid;
        border-width: 2px;
        border-radius: 5px;
        font-family: sans-serif;
      }
      #msg-box > h3 {
        margin: 0 0 10px;
        padding: 0;
        font-size: 16px;
      }
      #msg-box > p {
        margin: 0;
        padding: 0;
        font-size: 12px;
      }
      .msg-box--success {
        border-color: #059669;
        background-color: #a7f3d0;
      }
      .msg-box--warn {
        border-color: #eab308;
        background-color: #fef08a;
      }
      .msg-box--info {
        border-color: #2563eb;
        background-color: #bfdbfe;
      }
    </style>
    <div id="msg-box" class="msg-box--${this.kind}">
    	<h3><slot name="title">Default Message Title</slot></h3>
      <p><slot name="body">Deafult Message Body</slot></p>
    </div>`;

  }

}

window.customElements.define('message-box', MessageBox);