JSFiddle - React, Tailwind, and code Playground

by amindunited

HTML

<div class="background">
<section-frame mm='250' description="25cm Keys"></section-frame>
<section-frame mm='140' description="20cm Pads (14 internal)"></section-frame>
<section-frame mm='140' description="20cm Misc (14 internal)"></section-frame>
<section-frame mm='240' description="30cm Pedals (24 internal)"></section-frame>
</div>

CSS

html, body {
  padding: 0;
  margin: 0;
}

* {
  box-sizing: border-box;
}


.background {
  height: 950px;
  background: rgb(131,58,180);
  background: linear-gradient(0deg, rgba(131,58,180,1) 0%, rgba(253,29,29,1) 50%, rgba(252,176,69,1) 100%);
  border: solid 1px black;
}
.ply {}

.ply.top, .ply.bottom {
  height: 6px;
  border: solid 1px #313131;
  border-radius: 1px;
  background-color: #c7b084;
  opacity: .8;
}

.support-struct {
  height: 24px;
  border: solid 1px #313131;
  border-radius: 1px;
  background-color: #c7b084;
  opacity: .8;
}

/* .body-cavity {
  height: 300px;
} */

JavaScript

class SectionFrame extends HTMLElement {
	constructor () {
  	super();
  	this.doRender();
  }
  
  doRender () {
    console.log('!', this.getAttribute('mm'));
 		const mm = this.getAttribute('mm');
    this.innerHTML = `
	    <div class="ply top"></div>
    	<div class="support-struct"></div>
      <div class="body-cavity" style="height:${mm}px;">
      <div class="description">
      	${this.getAttribute('description')}
      </div> 
      </div>
			<div class="support-struct"></div>
	    <div class="ply bottom"></div>
    `;
  }
}

customElements.define('section-frame', SectionFrame);