JSFiddle - React, Tailwind, and code Playground

by clayshannon

HTML

<div class="blackBackground">
<h1 class="limeGreenFont">USA Map-O-Rama</h1>
<input id="checkbox" type="checkbox" /><label for="checkbox" class="skyBlueFont">sky blue bold</label>
<input id="checkbox" type="checkbox" /><label for="checkbox" class="indianRedFont">indian red</label>
<input id="checkbox" type="checkbox" /><label for="checkbox" class="orangeFont">orange</label>
<input id="checkbox" type="checkbox" /><label for="checkbox" class="yellowFont">yellow bold</label>
<input id="checkbox" type="checkbox" /><label for="checkbox" class="greenFont">green</label>
<input id="checkbox" type="checkbox" /><label for="checkbox" class="blueFont">blue</label>
<input id="checkbox" type="checkbox" /><label for="checkbox" class="purpleFont">purple</label>
<input id="checkbox" type="checkbox" /><label for="checkbox" class="tealFont">teal</label>
    <label class="limeGreenFont">Contact: [email protected]</label>
</div>

CSS

h1 {
    font-family: 'Segoe UI Light', Baskerville, 'Bookman Old Style', sans-serif;
    display: inline; 
}

.blackBackground {
	background-color: black;
}

.skyBlueFont {
	color: skyblue;	
}

.yellowFont {
	color: yellow;	
}

.blueFont {
	color: blue;
}

.indianRedFont {
	color: indianred;
}

.greenFont {
	color: green;
}

.limeGreenFont {
	color: limegreen;
}

.purpleFont {
	color: purple;
}

.tealFont {
	color: teal;
}

.orangeFont {
	color: orange;
}