JSFiddle - React, Tailwind, and code Playground

by Olga Leonteva

HTML

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
	<title>Home</title>
 
  <link rel="stylesheet"
  href="style.css">
  <link rel="stylesheet" href="css/font-awesome.min.css">
</head>
<body>
 
<div class="container"> 
    <div class="header">
      <div class="logo"><img src="surfhouse logo.png" alt="Письма мастера дзен"></div> 
      <div class="title"><img src="title slide.png" alt="Письма мастера дзен"></div>
      <div class="welcome"></div>
    </div>
      <div class="content">
      <div class="wrapper">
          <div class="aside">
           <!-- <div class="nav">  -->
             <ol>
          			<li><a href="#">MENU</a></li>
                <li><a href="#">ABOUT</a></li>
                <li><a href="#">APPAREL</a></li>
                <li><a href="#">SURF APPAREL</a></li>
                <li><a href="#">WINDSURF</a></li>
                <li><a href="#">KITESURF</a></li>
                <li><a href="#">ACCESSORIES</a></li>
                <li><a href="#">SALE</a></li>
                <li><a href="#">BRANDS</a></li>
                <li><a href="#">BLOG</a></li>
                <li><a href="#">GADGETS</a></li>
                <li><a href="#">CONTACTS</a></li>
             </ol>
             </div>
              
              <!--<div class="now_is_open"></div>
          	 </div> -->
          
    	      <div class="main"></div>
      </div>

      <div class="brand"></div>
      <div class="instagram"></div>
      <div class="social_bottom">
      	<div class="facebook"><i class="fa fa-facebook" aria-hidden="true"></i></div>
      	<div class="twitter"><i class="fa fa-twitter" aria-hidden="true"></i></div>
      	<div class="pinterest"><i class="fa fa-pinterest" aria-hidden="true"></i></div>
      	<!-- эти блоки должны быть <a> (то есть ссылкой) f/t/p-->
      </div>
    </div>
   <!-- <div class="footer"></div>-->
    <div class="footer">
  <div class="footer-wrapper">
    <ul class="menu-bottom">
      <li>Category</li>
     ...

CSS

.container{
	width: 1500px;
  height: 3365px;
  margin: 0 auto;
}

.header{
  background-color:  #abeafa;
  width: 1500px;
  height: 700px;
  padding-top: 1px;
  box-sizing: border-box;
}

.logo{
	width: 125px;
  height: 111px;
  margin-top: 24px;
  margin-left: 234px;
}

.title{
  width: 313px;
  height: 169px;
  margin-top: 243px;
  margin-left: 913px;
}

.welcome{
background-color:  #fff51f;
width: 270px;
height: 300px;
/*margin-top: 336px;
margin-left: 165px;*/
margin-right: 1065px;
margin-bottom: 64px;
}

.content{
	width: 1500px;
	height: 2317px;
	border: 1px solid red;
	background-color: rgb(249, 249, 249);
}

.wrapper {
	width: 1170px;
	margin: 0 auto;
}

.aside{
	width: 270px;
  height: 475px;
  float: left;
	border: 1px solid red;
	margin-top: -18px;
}

ol {
    margin: 0;
    padding: 0;
    border: 1px solid black;
    width: 270px;
    background-color:  #26d2fc;
}


 ol li {
    border: 2px solid #008080;  
    width: 100%;
    list-style-type: none;
    font-family: Roboto;
    color: #333;
    font-size: 14px;
    font-weight: 900;
    line-height: 37px;
    text-align: left;
    text-align: center;
}

a:visited {
    color: #333;
    text-decoration: none;
}

a:link {
    text-decoration: none;
    color: #333;
}

ol li:hover {
    background-color: #333333;

}

ol li:hover a{
    color: rgb(255, 255, 255);

}

.main {
	background-color:  #f8f8f8;
  width: 870px;
  height: 1644px;
  float: right;
  margin-bottom: 12px;
  border: 1px solid red;
  margin-top: -18px;
}

.now_is_open {
  width: 270px;
  height: 300px;
  float: left;
  border: 1px solid red;
  background-color:  #e0e0e0;
  margin-top: 239px;
  margin-left: 1186px;
 
}

.brand, .instagram, .social_bottom {
	margin: 0 auto;
}

.brand {
	background-color:  #ffffff;
  width: 1170px;
  height: 160px;
  border: 1px solid red;
  clear: both;
}

.instagram {
	background-color:  #eaeaea;
  width: 1170px;
  height: 350px;
  border: 1px solid aqua;
}

.social_bottom {
	width: 1170px;
  height:...