JSFiddle - React, Tailwind, and code Playground

by Muhammad Nugroho

HTML

<head>
	<title>Tatami — Shiny Demos</title>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	<link rel="stylesheet" href="styles/screen.css">
	<link rel="stylesheet" href="/styles/panel.css">
</head>
<body>

<img src="https://raw.githubusercontent.com/github-adi/shinydemos/master/demos/tatami/images/tatami.jpg" target="_blank"></img>

<script>
function init() {
	var s6 = document.getElementById('s6');
	var s8 = document.getElementById('s8');
	var s10 = document.getElementById('s10');
	var s12 = document.getElementById('s12');
	var f6 = document.getElementById('f6');
	var f8 = document.getElementById('f8');
	var f10 = document.getElementById('f10');
	var f12 = document.getElementById('f12');
	var room = document.getElementById('room');
	var normal = document.getElementById('normal');
	var fancy = document.getElementById('fancy');
	s6.addEventListener('click', function (s6) {
		s6.preventDefault();
		room.classList.add('s6');
		room.classList.remove('s8');
		room.classList.remove('s10');
		room.classList.remove('s12');
		room.classList.remove('f6');
		room.classList.remove('f8');
		room.classList.remove('f10');
		room.classList.remove('f12');
	}, false);
	s8.addEventListener('click', function (s8) {
		s8.preventDefault();
		room.classList.add('s8');
		room.classList.remove('s6');
		room.classList.remove('s10');
		room.classList.remove('s12');
		room.classList.remove('f6');
		room.classList.remove('f8');
		room.classList.remove('f10');
		room.classList.remove('f12');
	}, false);
	s10.addEventListener('click', function (s10) {
		s10.preventDefault();
		room.classList.add('s10');
		room.classList.remove('s6');
		room.classList.remove('s8');
		room.classList.remove('s12');
		room.classList.remove('f6');
		room.classList.remove('f8');
		room.classList.remove('f10');
		room.classList.remove('f12');
	}, false);
	s12.addEventListener('click', function (s12)...