JSFiddle - React, Tailwind, and code Playground
HTML
<body>
<nav class="nav">
<h1 class="navh"> Menu</h1>
<ul>
<li>
<a href="#">Menu</a>
</li>
<li>
<a href="#">Menu</a>
</li>
<li>
<a href="#">Menu</a>
</li>
<li>
<a href="#">Menu</a>
</li>
<li>
<a href="#">Menu</a>
</li>
</ul>
<h1 class="navh"> Menu</h1>
<ul>
<li>
<a href="#">Menu</a>
</li>
<li>
<a href="#">Menu</a>
</li>
<li>
<a href="#">Menu</a>
</li>
<li>
<a href="#">Menu</a>
</li>
<li>
<a href="#">Menu</a>
</li>
</ul>
<div class="downnav">
<p>Stopka</p>
</div>
</nav>
<div class="container">
<article>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatibus dignissimos consectetur quod esse vel libero nesciunt
consequuntur accusantium voluptas repellendus? Dolor dolorem quaerat cupiditate, nulla molestias veniam facere nam
perspiciatis.</article>
</div>
CSS
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background-color: #1c2238;
}
.nav {
font-family: 'Lato', sans-serif;
display: flex;
background-color: #252c48;
align-content: flex-start;
width: 17%;
height: 100vh;
flex-direction: column;
align-items: center;
border-right: 1px solid rgb(63, 63, 63);
}
.navh {
padding-top: 5px;
margin-left: 15px;
color: #d4d3e5;
}
nav ul {
padding: 20px;
display: block;
}
.nav li {
list-style: none;
margin-left: 20px;
list-style: none;
padding: 15px;
}
.nav a {
text-decoration: none;
color: #525975;
font-weight: bold;
}
.nav a:hover {
color: #d5d4e6;
transition: all 0.5s ease-in-out;
}
.downnav {
position: absolute;
bottom: 0px;
}
.downnav p {
color: #525975;
padding-bottom: 15px;
font-weight: bold;
font-size: 10px;
}
.container {
}