JSFiddle - React, Tailwind, and code Playground

by Vanessa RC

HTML

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 18.1.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 viewBox="0 0 1400 980" enable-background="new 0 0 1400 980" xml:space="preserve">
<rect fill="#04111A" width="1409" height="983"/>
<g>
	<polygon fill="none" points="58,230 58,166.2 93.1,84.2 129,166.2 129,258 156,258 156,87 173,87 173,127 217,127 217,87 237,87 
		237,292 289,292 289,371 346,371 346,206 457,206 457,359 499,359 499,278 500.8,278 544.5,197.1 590.1,278 591,278 591,359 
		637,359 637,298.8 655,350.7 655,359 669,359 669,292 735,292 735,166 765,166 765,199 789,199 789,110 813,110 813,199 841,199 
		841,183 830.3,183 874.6,101 920.9,183 907,183 907,388 989,388 989,258 1068.8,258 1076,251.3 1076,258 1119,258 1119,342 
		1201,342 1201,120 1208.3,120 1252,39.1 1297.6,120 1305,120 1305,235 1336,235 1336,66 1365,66 1365,159 1379,159 1379,17 
		1409,17 1409,0 0,0 0,230 	"/>
	<polygon fill="#2B1F38" points="34,587 48,587 48,494 75,494 75,462.1 130.7,519.4 148,489.3 148,438 188,438 188,516.5 204.7,547 
		212,547 212,572 258,572 258,545 305,545 305,572 327,572 327,606 394,606 394,471.8 428,392.9 462,471.8 462,545 528.8,545 
		534,535.1 534,461 567,461 567,580.2 574.1,594 600,594 600,538 624,538 624,594 637,594 637,359 591,359 591,278 590.1,278 
		544.5,197.1 500.8,278 499,278 499,359 457,359 457,206 346,206 346,371 289,371 289,292 237,292 237,87 217,87 217,127 173,127 
		173,87 156,87 156,258 129,258 129,166.2 93.1,84.2 58,166.2 58,230 0,230 0,445 34,445 	"/>
	<polygon fill="#2B1F38" points="1379,159 1365,159 1365,66 1336,66 1336,235 1305,235 1305,120 1297.6,120 1252,39.1 1208.3,120 
		1201,120 1201,342 1119,342 1119,258 1076,258 1076,519 1146,519 1146,366 1166,366 1166,519 1177,519 1177,515 1196,515 1196,519 
		1235,519 1235,365.9 1327,519.4 1327,404 1409,404 1409,17 1379,17 	"/>
<polygon fill="#2B1F38"...

CSS

*{
  margin: 0;
  padding: 0;
}


.lights-on{
  opacity: 1;
}

.lights-off{
  opacity: 0;
}

JavaScript

// Select the rectangular windows
var _squareWindows = document.querySelectorAll('rect[fill="#EF9D3C"]');
var _squareWindowsB = document.querySelectorAll('rect[fill="#F8B04C"]');
var _roundedWindows = document.querySelectorAll('circle[fill="#EF9D3C"], circle[fill="#F8B04C"]');
var _stars = document.querySelectorAll('path[fill="#FFFFFF"]');
var _moon = document.querySelectorAll('circle[fill="#F9C485"]');

/* Make all square windows go off */
function lightsOff(_squareWindows, _squareWindowsB){
  for (var i=0; i<_squareWindows.length; i++){
    _squareWindows[i].style.opacity = 0;
  }
  for (var i=0; i<_squareWindowsB.length; i++){
    _squareWindowsB[i].style.opacity = 0;
  }
  for (var i=0; i<_roundedWindows.length; i++){
    _roundedWindows[i].style.opacity = 0;
  }
  for (var i=0; i<_stars.length; i++){
    _stars[i].style.opacity = 0;
  }
};

lightsOff(_squareWindows, _squareWindowsB, _roundedWindows, _stars);

function lOn(elements){
	for (var y=0; y<elements.length; y++){
  	elements[y].style.opacity = Math.random();
  }
};

lightsOff(_squareWindows, _squareWindowsB, _roundedWindows, _stars);
lOn(_squareWindowsB, _squareWindows, _roundedWindows);