JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://unpkg.com/webcompose@latest/dist/webcompose.min.js"></script>
<blog-post>
  <span slot="title">How To Cook An Egg</span>
  <p>
    1. Crack egg
    2. Butter pan
    3. Put egg in pan
  </p>
  <p>
    Mix egg thoroughly before putting in pan. Add 
    a little salt. Putting a lid on top can help 
    cook the top faster along with bottom of egg.
  </p>
</blog-post>

JavaScript

const { ComposableElement, html } = window.webcompose

class BlogPost extends ComposableElement {
  static render({left, right, result}){
    return html`
      <style>
        .blogpost {
          border: solid 1px black;
          padding: 15px;
          width: 100%;
        }
        
        .blogpost--title {
          font-size: 20px;
        }
        
        .blogpost--body {
          font-size: 12px;
        }
      </style>
      <div class="blogpost">
        <div class="blogpost--title"><slot name="title"></slot></h1>
        <div class="blogpost--body"><slot></slot></div>
      </div>
    `
  }
}

customElements.define("blog-post", BlogPost);