JSFiddle - React, Tailwind, and code Playground

HTML

<!doctype html>
<html lang="ru">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <!-- My Css -->
    <link rel="stylesheet" type="text/css" href="css/style.css">
    <!-- GOOGLE FONTS -->
    <link href="https://fonts.googleapis.com/css?family=Roboto:400,500&amp;subset=cyrillic" rel="stylesheet">
    <title>Нет</title>
  </head>
  <body>
    <div class="top-menu">
      <div class="header">
        <div class="logo">
          <a href="#"><img class="logo_1" src="img/logo3"></a>
          <ul class="main_menu">
            <li><a href="#">Ссылка 1</a></li>  
            <li><a href="#">Ссылка 2</a></li>
            <li><a href="#">Ссылка 3</a></li>  
          </ul>
          <div class="login">
            <a href="#"><img class="login_1" src="img/login.png"></a>
          </div>
      </div>
    </div>
  </div>
    <div class="wrapper">
      <div class="container">
        <div class="content">
          <div class ="text_box">
            <h1>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</h1> 
            <img src="http://via.placeholder.com/200x150">
            Illo optio similique numquam error possimus quisquam quo ut molestiae, assumenda eveniet. Laborum doloremque vel, fuga nobis. Earum sint repellat quae consequuntur rerum, quia recusandae ipsam magnam deleniti architecto repudiandae, iste repellendus, officiis illum. Mollitia error tempore, quaerat fugit possimus odio nisi.
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo optio similique numquam error possimus quisquam quo ut molestiae, assumenda eveniet. Laborum doloremque vel, fuga nobis. Earum sint repellat quae consequuntur rerum, quia recusandae ipsam magnam deleniti architecto repudiandae, iste repellendus, officiis illum. Mollitia error tempore, quaerat fugit possimus odio nisi.</div>
          <div class ="text_box">
            <h1>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</h1> 
            <img...

CSS

body {
	margin: 0;
	padding: 0;
	background-color: #ECEDF0;
	font-family: 'Roboto', sans-serif;
}

.top-menu {
	width: 100%;
	height: 60px;
	background-color:#4B75A7;
}

.header {
	max-width: 1000px;
	margin: auto;
	height: 60px;
}



.logo {
	display: flex;
	max-width: auto;

}

.logo > .login > img {
	justify-content: flex-end;
}

.logo_1 {
	height: 60px;
	max-width: 170px;
	margin-right: 100px;

}


ul.main_menu {
	padding: 0;
	margin:0;
	width: 600px;
	min-width: 570px;
	max-height: 60px;
	display: flex;
	list-style: none;
	justify-content: flex-start;
	align-items: center;
}


.main_menu li a {
	text-decoration: none;
	color: #fff;
	text-transform: uppercase;
	font-size: 14px;
	text-decoration: none;
	margin-right: 50px;


}

.main_menu li:last-child {
	margin-right: 10px;
}


.main_menu a:hover {
	color:black;
}

.login {
	width: 60px;
	height: 60px;
	justify-content: flex-end;
}

.login_1 {
	padding: 0;
	margin: 0;
	height: 60px;
	width: 60px;
}

.wrapper {
	max-width: 1000px;
	margin: auto;
}

.container {
	width: 100%;
	padding-top:10px;
	padding-bottom: 10px;
	display: flex;

}

.content {

	width: 690px;
	background-color: #EBECF0;
	margin-right: 10px;
	word-wrap: break-word;

}

.text_box {
	margin-bottom: 5px;
	background-color: #fff;
}

.text_box img {
	display: flex;
	margin-right: 5px;
}

.sidebar {
	
	max-width: 300px;
	background-color: #EBECF0;

}


.registration {

	background-color: #fff;
	width: 300px;
	height: 300px;
	text-align: center;
	margin-bottom: 5px;

}

.registration-input > a {
	font-size: 12px;
	text-decoration: none;
	text-transform: none;
	color: black;
}

input[type="text"], input[type="password"] {
	width: 250px;
	height: 30px;
	border-radius: 4px;
	padding-left: 10px;
	margin-top:10px;
}
input[type="text"] {

	margin-top: 20px;
}

input[type="password"] {
	margin-bottom: 40px;
}

.submit {
	padding:8px 20px;
	background-color: #4B75A7;
	color: #fff;
	cursor: pointer;
	border:none;
}

.submit_1 {
	padding:15px 20px;
	width:...