JSFiddle - React, Tailwind, and code Playground

by Muhammad Nugroho

HTML

<head>
<title>View on the Beach — Shiny Demos</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="styles/screen.css">
<link rel="stylesheet" href="/styles/panel.css">
</head>
<body id="room">
<div id="brightness"></div>
<div id="blinds">
<div id="cords"></div>
</div>
<video autoplay loop poster="images/beach.jpg" id="video">
<source src="http://media.shinydemos.com/beach/beach.mp4" type="video/mp4">
<source src="http://media.shinydemos.com/beach/beach.webm" type="video/webm">
</video>
<!-- CC BY 2.0 video by Nattu http://commons.wikimedia.org/wiki/File:Maldives_beach.ogv -->
<div id="switch">
<button id="button">Blinds</button>
</div>
<script src="/scripts/modernizr.js"></script>
<script src="/scripts/panel.js"></script>
<script src="scripts/options.js"></script>
<script>
function init() {
var button = document.getElementById('button');
var room = document.getElementById('room');
button.addEventListener('click', function () {
room.classList.toggle('cover');
}, false);
}
window.addEventListener('load', init, false);
</script>