JSFiddle - React, Tailwind, and code Playground

by Giorgio Malvone

HTML

<link href='http://fonts.googleapis.com/css?family=Open+Sans:300' rel='stylesheet' type='text/css'>
<h1 id="chicken">Create a random hex colour!</h1>
    <h2 id="hexText">#E74C3C</h2>
    <div id="button" onclick="slide()">Generate!</div>

CSS

body{
    color:#ecf0f1;
    background-color:#e74c3c;
    font-family: 'Open Sans', 'sans-serif';
    font-weight:1;
}
h1
{
    margin-top:4%;
    text-align:center;
}
h2{
    font-size:3em;
    margin-top:10%;
    text-align:center;
}
#button{
    margin:auto;
    margin-top:10%;
	text-align: center;
	min-width: 200px;
	max-width: 200px;
	padding: 50px;
	border:2px solid #ecf0f1;
	color:#ecf0f1;
	font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica          
    Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

#button:hover{
	cursor:pointer;	
}

#button:active{
	background-color:#FCFCFC;
	color:#7f8c8d;
	cursor:pointer;	
}
::selection {
	background: rgba(236,240,241, 0.4); 
	}
::-moz-selection {
	background: rgba(236,240,241, 0.4); 
}

JavaScript

var colorDiv = document.getElementsByTagName("body")[0];

var hexText = document.getElementById("hexText");
var colors = ["pink","yellow","aqua","tomato","SpringGreen"];


function slide() {
    var randColor = '#'+(Math.random()*0xFFFFFF<<0).toString(16)
    colorDiv.style.backgroundColor= randColor;
    hexText.innerHTML = randColor;
}