JSFiddle - React, Tailwind, and code Playground

by Travis Almand

HTML

<div id="panel">
	<label id="font-size__panel">
		<span>font-size</span>
		<input type="number" step="0.1" />
	</label>
	<label id="margin__panel">
		<span>margin</span>
		<input type="number" />
	</label>
	
	<button id="update_example">Update Example</button>
</div>

<div id="example">
	<div class="margin">
		<div class="border">
			<div class="padding">
				<div class="element">
					
				</div>
			</div>
		</div>
	</div>
</div>

<div id="elements">
	<h1>headline 1</h1>
	<h2>headline 2</h2>
	<h3>headline 3</h3>
	<h4>headline 4</h4>
	<h5>headline 5</h5>
	<h6>headline 6</h6>
	<p>paragraph</p>
</div>

SCSS

:root {
	--h1_border-color: black;
	--h1_border-style: solid;
	--h1_border-width: 2px;
	--h1_color: #333;
	--h1_font-size: 1.8rem;
	--h1_font-style: normal;
	--h1_font-weight: 700;
	--h1_margin: 1.8rem 1.2rem;
	--h1_padding: 0;
	--h1_text-align: center;
	
	--h2_color: #333;
	--h2_font-size: 1.6rem;
	--h2_font-style: normal;
	--h2_font-weight: 700;
	--h2_margin: 1.6rem 1.2rem;
	--h2_padding: 0;
	
	--h3_color: #333;
	--h3_font-size: 1.4rem;
	--h3_font-style: normal;
	--h3_font-weight: 700;
	--h3_margin: 1.4rem 1.2rem;
	--h3_padding: 0;
	
	--h4_color: #333;
	--h4_font-size: 1.2rem;
	--h4_font-style: normal;
	--h4_font-weight: 700;
	--h4_margin: 1.2rem 1.2rem;
	--h4_padding: 0;
	
	--h5_color: #333;
	--h5_font-size: 1.2rem;
	--h5_font-style: normal;
	--h5_font-weight: 700;
	--h5_margin: 1.2rem 1.2rem;
	--h5_padding: 0;
	
	--h6_color: #333;
	--h6_font-size: 1.2rem;
	--h6_font-style: normal;
	--h6_font-weight: 700;
	--h6_margin: 1.2rem 1.2rem;
	--h6_padding: 0;
	
	--p_color: #333;
	--p_font-size: 1.2rem;
	--p_font-style: normal;
	--p_font-weight: 500;
	--p_margin: 1.2rem 1.2rem;
	--p_padding: 0;
}

html {
  box-sizing: border-box;
}
*, *:before, *:after {
  box-sizing: inherit;
}

body {
	font-size: 10px;
	margin: 0;
	padding: 0;
}

#panel {
	align-items: center;
	border: 1px solid black;
	display: flex;
	flex-wrap: wrap;
	font-size: 1rem;
	justify-content: space-around;
	margin: 20px;
	padding: 10px;
	
	label {
		margin: 10px auto;
	}
}
#update_example {
	flex-basis: 50%;
	padding: 10px;
}

.margin {
	background-color: #ffff9f;
	transition: 0.25s;
}
.border {
	background-color: #513f3f;
	transition: 0.25s;
}
.padding {
	background-color: #9f779f;
	transition: 0.25s;
}
.element {
	background-color: #b6b6ff;
	transition: 0.25s;
	
	 * {
		border: none !important;
		margin: 0 !important;
		padding: 0 !important;
	}
}

h1 {
	border-color: var(--h1_border-color);
	border-style: var(--h1_border-style);
	border-width: var(--h1_border-width);
	color:...

JavaScript

console.clear();

var example = (function (element) {
	var public = {};
	
	public.update = function (e) {		
		var el = e.target;
		var ex = document.querySelector('#example');
		
		var el_margin;
		var el_border;
		var el_padding;
		var ex_margin;
		var ex_border;
		var ex_padding;
		
		if (e.target.id !== 'elements') {
			el_margin = window.getComputedStyle(document.documentElement).getPropertyValue('--' + el.tagName.toLowerCase() + '_margin');
			el_border = window.getComputedStyle(document.documentElement).getPropertyValue('--' + el.tagName.toLowerCase() + '_border-width');
			el_padding = window.getComputedStyle(document.documentElement).getPropertyValue('--' + el.tagName.toLowerCase() + '_padding');

			ex_margin = document.querySelector('#example .margin');
			ex_border = document.querySelector('#example .border');
			ex_padding = document.querySelector('#example .padding');
			
			document.querySelector('#example .element').innerHTML = e.target.outerHTML;
			
			ex_margin.style.padding = el_margin;
			ex_border.style.padding = el_border;
			ex_padding.style.padding = el_padding;
		}
	};
	
	return public;
})();

document.querySelector('#elements').addEventListener('click', example.update);