JSFiddle - React, Tailwind, and code Playground

by Lal Prakash

HTML

<div class="mainmenu">

	<div class="mainbox"> 
    WHAT
    </div>
    
    <div class="mainbox">
    WHO
    </div>
    
  	<div class="mainbox">
    WHEN
    </div>
    
    <div class="mainbox">
    WHY
    </div>  
    
    
</div>

CSS

.mainmenu {
	background-color: grey;
	width: 100%;
	margin: 0;
	min-height: 50px;
  text-align: center;
}

.mainbox {
	background-color: grey;
	width: 100px;
	margin: 0 auto;
	min-height: 30px;
	float: none;
  display:inline-block;
}

@media screen and (max-width: 800px) {
  
 .mainbox {
	background-color: #DABA11;
	width: 200px;
	font-style: italic;
 }

}