JSFiddle - React, Tailwind, and code Playground

by Aggre _--

HTML

<brand-mark></brand-mark>

JavaScript

class BrandMark extends HTMLElement {
	connectedCallback() {
		this
		.attachShadow({ mode: 'open' })
		.innerHTML = `
			<style>
				:host {
					display: grid;
					grid-template-columns: auto 1fr;
					align-items: center;
				}
				img { height: 30px }
				span { font-weight: 700 }
			</style>
			<img src=https://upload.wikimedia.org/wikipedia/commons/thumb/6/61/HTML5_logo_and_wordmark.svg/240px-HTML5_logo_and_wordmark.svg.png />
			<span>HTML5</span>
		`
	}
}

window.customElements.define('brand-mark', BrandMark)