JSFiddle - React, Tailwind, and code Playground
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Tytuł</title>
<link rel="stylesheet" href="style.css" type="text/css">
</head>
<body>
<div id="wrapper">
<header>
<h1>Nazwa</h1>
<ul>
<li>Numer 1</li>
<li>Numer 2</li>
</ul>
</header>
<section id="content">
<!-- pierwsza kolumna -->
<section id="content_main">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In aliquam suscipit lectus, rutrum tincidunt lorem interdum molestie. Sed id posuere ipsum. Praesent volutpat consectetur aliquam. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Suspendisse dictum lacus sed augue porttitor ac adipiscing ipsum feugiat. Curabitur dolor augue, adipiscing eu viverra sed, euismod ac turpis. Quisque ut purus mauris, eget pellentesque tortor. Pellentesque consequat vulputate orci, egestas porttitor turpis luctus nec. Quisque accumsan mattis arcu, sit amet fringilla enim mattis eget.
Aenean massa elit, luctus nec rhoncus eget, tincidunt id lectus. Etiam nec tellus justo. Pellentesque id mi vitae purus dignissim volutpat quis vel purus. Phasellus id dui enim. Sed non congue lacus. Vivamus a enim ac dolor consequat tempus. Etiam adipiscing hendrerit dapibus. Fusce semper arcu ut purus accumsan tristique. Ut sit amet lacinia tortor.
Suspendisse potenti. Cras facilisis orci et ipsum feugiat tempor. Sed augue lorem, congue vitae adipiscing id, auctor ut risus. Suspendisse condimentum porta sem sed consequat. Phasellus a turpis rutrum velit ultrices eleifend. Nam posuere rhoncus varius. Donec tellus urna, semper eu vulputate at, dapibus sit amet massa. Aliquam congue leo mauris, id ultricies erat.</p>
</section>
<!-- druga kolumna -->
<aside>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In aliquam suscipit lectus, rutrum tincidunt lorem interdum molestie. Sed id posuere ipsum. Praesent...
CSS
@charset "utf-8";
body {
font: 100%/2 Tahoma, Verdana, sans-serif;
color: #333;
background: #eee;
}
#wrapper {
width: 65%;
margin: 0 auto;
text-align: left;
}
#content {
width: 100%;
background: #eee;
overflow: auto;
}
section#content_main {
float: right;
width: 65%;
margin: 0;
padding: 0;
background: #3366FF;
border-radius: 5px;
}
aside {
float: left;
width: 34%;
margin: 0;
padding: 0;
margin-right: 1%;
background: #66FF99;
border-radius: 5px;
}
footer {
margin-top: 1%;
width: 100%;
background: #ccc;
border-radius: 5px;
box-shadow: 3px 4px 2px #666;
}
p {
padding: 1em 0;
margin: 0 1em;
}
header {
height: 150px;
background: #CC66FF;
overflow: auto;
margin-bottom: 1%;
margin-top: 2%;
border-radius: 5px;
}
header h1 {
height: 30%;
float: left;
margin-left: 1%;
}
header ul {
margin-left: -3%;
margin-top: 9%;
}
ul li {
float: left;
list-style-type: none;
background: #666;
width: 8%;
padding: 0.5%;
color: white;
border-right: 2px solid #CC66FF;
border-radius: 5px;
}