JSFiddle - React, Tailwind, and code Playground

by Valentinka

HTML

<title>test</title>

<body>
	<section class="all">
			<!--Шапка-->
			<header class="head">
                <!--<img src="img/head_logo.jpg" alt="" title="" class="head_logo" />-->
                <div class="test">
                <a href="index.html"><img src="img/logo.png" alt="" title="" class="logo"/></a>
                    блок с логотипом
                </div>
			</header>
			<content class="content">
			<!--Левое меню-->
			<nav class="left_menu">
                </nav>	 
			<!--Основное содержимое-->
			<article class="con">
				 Основное содержимое
                </article>
		</content>
		<!--Футер-->
		<footer>футер-</footer>
		</section>
</body>
</html>

CSS

*{
	margin:0; padding:0;
}
body {	
	font-family:Verdana;	
	
}
img, a {
	border:none;
}
.all{margin:0 auto;
	width:100%; min-width:50%;
	background:#ffff80;
}

/*Шапка сайта*/
.head {  
	width:100%; height:280px; min-width:900px;
	display:block;
	background:#2F4F4F; 
	border-bottom:4px solid #d5d3d3;
}
.test{background:#D3D3D3;
     border:1px solid;
    width:250px; height:280px;
}
}
.head_logo{ border:1px solid;
	position: absolute;
	z-index:1;
}
 
.logo{ border:1px solid;
	z-index:3;
	position: absolute;
	margin:107px 21px;
	width:210px; height:77px;
}

/*Основное содержимое*/
.content{ border:1px solid;
	float:left;
	width:100%;
	background:#605f5f;
}
 

/*Футер сайта*/
footer{border:1px solid;
	float:left;
	width:100%; height: 20px;
	background:#605f5f;
}