JSFiddle - React, Tailwind, and code Playground

HTML

<head>
	<meta charset="UTF-8">
	<title>SUMMER</title>
	<link rel="stylesheet" href="css/style.css">

</head>
<body>
	<header>
		<div class="head">
			<div class="polosa1">
			<button class="btnh">HOT BUTTON</button>
			<button class="btnsu">SUNNY BUTTON</button>
			<button class="btnf">FRESH BUTON</button>
			<button class="btnsk">SKY BUTTON</button>
			<button class="btnhs">Hot select</button>
			<button class="btnsus">Sunny select</button>
			<button class="btnfs">Fresh select</button>
			<button class="btnsks">Sky select</button>

			</div>
			<div class="polosa2">
			<button class="btnh">HOT BUTTON</button>
			<button class="btnsu">SUNNY BUTTON</button>
			<button class="btnf">FRESH BUTON</button>
			<button class="btnsk">SKY BUTTON</button>
			<button class="btnhs">Hot select</button>
			<button class="btnsus">Sunny select</button>
			<button class="btnfs">Fresh select</button>
			<button class="btnsks">Sky select</button>

			</div>
			<div class="polosa3">
			<button class="btnh">HOT BUTTON</button>
			<button class="btnsu">SUNNY BUTTON</button>
			<button class="btnf">FRESH BUTON</button>
			<button class="btnsk">SKY BUTTON</button>
			<button class="btnhs">Hot select</button>
			<button class="btnsus">Sunny select</button>
			<button class="btnfs">Fresh select</button>
			<button class="btnsks">Sky select</button>
			</div>
	</header>
	
	<div class="menu">


	<div class="panel-left">
			
    <label class="switch">
       <input type="checkbox">
      	 <div class="slider">
  	  		 <span class="close">
  	 			  <img src="images/x-Icon.png" alt="" id="x-icon">
	   			  <img src="images/ored.png" alt="" id="o-icon">
	         </span>
	     </div>
	</label>
	<label class="switch">
       <input type="checkbox">
      	 <div class="slider">
  	  		 <span class="close">
  	 			  <img src="images/x-Icon.png" alt="" id="x-icon">
	   			  <img src="images/ored.png" alt="" id="o-icon">
	         </span>
	     </div>
	</label>
	<label class="switch">
       <input...

CSS

*{
	margin: 0;
}
body {
	background: url(../images/background.jpg)   ;
	background-size:100%;
}
/*----------------------------HEADER---------------------*/
.polosa1 {
	
	margin: 80px 80px 25px 80px;
}

.polosa1 button {
	border-radius:5px ;
	margin-right: 30px;
	height: 53px;
	width: 170px;
	border-top:none;
	border-right: none;
	border-left: none;
}


.polosa1 button:last-child {
	margin-right: 0;
}
.polosa2 {
	display:inline-block;
	margin: 0 80px 25px 80px; 
}	
.polosa2 button {
	border-radius:5px ;
	margin-right: 30px;
	height: 53px;
	width: 170px;
	border-top:none;
	border-right: none;
	border-left: none;
}
.polosa2 button:last-child {
	margin-right: 0;
}
.polosa3 {
	display:inline-block;
	margin: 0 80px 30px 80px;
}
.polosa3 button {
	border-radius:5px ;
	margin-right: 30px;
	height: 53px;
	width: 170px;
	border-top:none;
	border-right: none;
	border-left: none;
}
.polosa3 button:last-child {
	margin-right: 0;
}

.btnh, .btnhs {
	background-color:rgb(219,85,101);
	color:#fff;
	border-color: #AF4451;
}
.btnsu, .btnsus {
	background-color:rgb(244,173,73);
	color:#fff;
	border-bottom-color: rgb(195,138,58);
}
.btnf, .btnfs {
	background-color:rgb(81,191,135);
	color:#fff;
	border-bottom-color: rgb(65,153,108);
}
.btnsk, .btnsks {
	background-color:rgb(11,172,211);
	color:#fff;
	border-bottom-color: rgb(9,138,169);
}

/* MENU */
.menu {
	width: 770px;
	height: 332px;
	background-color: #fff;
	margin: 0 30px 0 80px;

}
.panel-left {
	margin: 37px 21px 45px 30px;
	height: 250px;
	width: 225px;
	float:left;
	
}
.panel-right {
	margin: 0  30px 30px 0;
	padding: 30px 0 0 0 ;

}