JSFiddle - React, Tailwind, and code Playground

by Scott Kaye

HTML

<div class="dashboard">
  <div class="item chosen"></div>
</div>

<grid-dashboard>
  <grid-item></grid-item>
</grid-dashboard>

CSS

.dashboard {
  display: grid;
  height: 200px;
  grid-template-columns: repeat(12, 1fr);
}

.item {
  border: 1px solid red;
}

.chosen {
  background: red;
  grid-row: 2 / span 2;
  grid-column: 4 / span 3;
}

JavaScript

class GridDashboard extends HTMLElement {
	constructor() {
  	super();
    
    let shadow = this.attachShadow({ mode: "open" });
    let style = document.createElement("style");

		style.textContent = `
    .grid {
    	display: grid;
      grid-template-columns: repeat(12, 1fr);
    }
    
    .item {
    	border: 1px solid red;
    }
    `;

    let grid = document.createElement("div");
    grid.classList.add("grid");
    
    shadow.appendChild(style);
    shadow.appendChild(grid);
  }
}

window.customElements.define("grid-dashboard", GridDashboard);