JSFiddle - React, Tailwind, and code Playground

HTML

<body>

<header>
	<div id="header-text">
		Poradnik Javascript
	</div>

</header>

<main>
	<div class="menu-row">
		<div class="button-box">
			<div class="button" id="variables"> Typy zmiennych </div> <div class="button"></div> <div class="button"></div>
		</div>
	</div>
		
	<div class="menu-row">
		<div class="button-box">
			<div class="button"></div> <div class="button"></div> <div class="button"></div>
		</div>
	</div>
	
	<div class="menu-row">
		<div class="button-box">
			<div class="button"></div> <div class="button"></div> <div class="button"></div>  
		</div>
	</div>
	
</main>

</body>


<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>



	
$(document).ready(function(){

function colorIn(primary){
	 $("header").css("background-color", primary);
	 $(".button").css("background-color", primary);
	}

	function colorOut(secondary){
		$("header").css("background-color", secondary);
		$(".button").css("background-color", secondary);
	}

		$("#variables").hover(colorIn("#ffffff"), colorOut("#111111"));
	

});


</script>

CSS

*{
	padding:0;
	margin:0;
}

body{
	background-color:#7F7F7F;
	overflow:hidden;
}


header{
	background-color:#BEBFBF;
	height:10vh;
	width:100vw;
	position:relative;
	font-family: 'Bungee', cursive;
	color:white;
	font-size:2vmax;
	display:flex;
	justify-content:center;
	align-items:center;
	box-shadow:0px 2px 0px white;
	overflow:hidden;
	transition:1s;
}

#header-text{
	display:flex;
	justify-content:center;
	align-items:center;
}

main{
	height:90vh;
	width:100vw;
	margin-top:5vh;
}

.menu-row{
	width:100%;
	height:30vh;
}

.button-box{
	width:100%;
	height:100%;
	position:relative;
}

.button{
	width:30%;
	height:70%;
	background-color:#BEBFBF;
	position:relative;
	float:left;
	margin-left:2.5%;
	border:2px solid white;
	box-sizing:border-box;
	display:flex;
	justify-content:center;
	align-items:center;
	font-family: 'Bungee', cursive;
	color:white;
	font-size:1.5vmax;
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	cursor:pointer;
	transition:1s;
}

#variables{
	background-color:
}