JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrapper">
<p>Click on the button to see the magic happen!</p>
<input value="Click Me" class="button" type="button" >

CSS

.wrapper{
text-align: center;
}
.button{
display: inline-block;
padding: 15px 25px;
font-size: 24px;
cursor: pointer;
text-align: center;
text-decoration: none;
outline: none;
color: #fff;
background-color: #EE835A;
border: none;
border-radius: 15px;
box-shadow: 0 9px #999;
}
.button:hover {background-color: #EE8354A}

.button:active {
background-color: #4A6273;
box-shadow: 0 5px #F68B8B;
transform: translateY(4px);
}

JavaScript

$('.button').click(function(e){
	e.preventDefault();
	$('body').css({'background':'red'});
});