JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE HTML>
<html lang="pl">
<head>
	<meta charset="utf-8" />
		<title>Asystent Szefa</title>
	<meta name="description" content="Poradniki i narzędzia niezbędne każdemu prowadzącemu działalność gospodarczą"/>
    <meta name="keywords" content="pracy, prawo, prawo pracy, franczyza"/>
	<meta name="author" content="Zespół Asystenta Szefa"/>
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
	<link rel="stylesheet" href="style.css" type="text/css" />
</head>

<body>

	<div id="cointainer">
	
		<div id="logo">
		Asystent Szefa :)
		</div>
		
		<div id="menu">
			<div class="option">Home</div>
			<div class="option">Legalność zatrudnienia</div>
			<div class="option">Prawo pracy</div>
			<div class="option">BHP</div>
			<div class="option">O nas</div>
			<div style="clear:both;"></div>
		</div>
		
		<div id="topbar">
		
			<div id="topbarL">
				<img src="img/logo.png" width="150px" height="150px"/>
			</div>
			
			<div id="topbarR">
				<span class="bigtitle">Czołem załoga!</span> <br /> 
				Tu robi się zajebisty projekt. PS. za miliony monet. 
			</div>
			
			<div style="clear:both;"></div>
		
		</div>
		
		
		<div id="content">
			<div id="sidebar">
				<div class="optionL">Home</div>
				<div class="optionL">Legalność zatrudnienia</div>
				<div class="optionL">Prawo pracy</div>
				<div class="optionL">BHP</div>
				<div class="optionL">O nas</div>
				<div style="clear:both;"></div>
			</div>
		
			<div id="text">
			<span class="bigtitle"> Dlaczego warto dbać o dokumentację pracowniczą </span> <br>
			<div class="dottedline"> </div>
			Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer tempus velit eros, a iaculis est lobortis vel. Aenean viverra vulputate lectus eget suscipit. Vivamus tempus fringilla urna. Integer sed justo purus. Vivamus sed tempus dui. Nam ullamcorper ex ullamcorper facilisis tincidunt. Duis enim urna, ultricies ut ante quis, suscipit consequat diam. Aliquam pulvinar rhoncus vestibulum. Curabitur tempor...

CSS

body
{
	background-color: #404040;
}

#cointainer
{
	width: 1000px;
	margin-left:auto;
	margin-right:auto;
}

#logo
{
	color: white;
	margin-top: 25px;
	font-size: 44px;
	text-align: center;
	font-weight: 700;
	letter-spacing: 3px;
}

#menu
{
	background-color: #303030;
	margin-top: 10px;
	margin-bottom: 10px;
	color: #ffffff;
	pading: 10px;
	margin-left: auto;
	margin-right: auto;
}

#topbar
{
	background-color: #128870;
	color: white;
	padding: 10px;
	margin-top: 10px;
	margin-bottom: 10px;
	height: 170px;
	width: 1000px;
}

#topbarL
{
	float: left;
	padding: 10px;
	width: 148px;
	text-align: center;
	border-right: 2px dotted #cccccc;
}

#topbarR
{
	float: left;
	padding: 25px;
	width: 750px;
	font-size: 20px;
	text-align: justify;
}

#content
{
	background-color: lightgray;
	color: black;
	padding: 10px;
	margin-top: 20px;
	margin-bottom: 25px;
	width: 1000px;
}

#sidebar
{
	float: left;
	width: 148px;
	min-height: 620px;
	padding: 10px;
	text-align: center;
	font-size: 18px;
	border-right: 2px dotted #666666;
}

#text
{
	float:left;
	padding: 40px;
	width: 730px;
	min-height: 620px;
	text-align: justify;
}

#footer
{
	clear: both;
	color: white;
	text-align: center;
	padding: 20px;
	font-size: 18px;
}

.option
{
	float: left;
	min-width: 150px;
	height: 25px;
	font-size: 18px;
	padding: 10px;
	text-align: center;
	border-right: 2px dotted #505050;
	opacity: 0.7;
}

.option:hover
{
	background-color: #000000;
	cursor: pointer;
}

.optionL
{
	font-size: 16px;
	height: 40px;
	padding: 5px;
	border-bottom: 2px dotted #444444;
}

.optionL:hover
{
	background-color: #f36742;
	color: white;
	cursor: pointer;
}

.bigtitle
{
	font-size: 28px;
	font-weight: 900;	
	letter-spacing: 2px;
}

.dottedline
{
	height: 5px;
	margin-top: 15px;
	margin-bottom: 15px;
	border-bottom: 2px dotted #444444;
}