JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="bazaoglo">
<img src="https://i.imgur.com/bnwWDtU.png" style="width: 780px; height:100px; border: 1px solid #1f1e1d; margin-left:5px;">
<div class="oglobaza1">
<table>
<td>
<div class="oglokolumna1;">
<div class="oglokolumnabela1">regulamin</div>
<div class="oglokolumnabela1">wademekum</div>
<div class="oglokolumnabela1">wydarzenia</div>
<div class="oglokolumnabela1">od administracji</div>
<div class="oglokolumnabela1">zajęte wyglądy</div>
<div class="oglokolumnabela1">zajęte miejsca pracy</div>
<div class="oglokolumnabela1">nieobecności</div>
<div class="oglokolumnabela1">poszukiwania</div>
<div class="oglokolumnabela1">punkt MG</div>
<div class="oglokolumnabela1">pytania i propozycje</div>
</div>
</td>
<td>
<div class="kolumnaoglosrodek">Czterdzieści lat temu Rode pełniło funkcję międzynarodowej kolonii karnej, do której transportowano większość kryminalistów. Więźniowie stali się nie tylko pierwszymi budowlańcami osady, ale i wykonywali pracę, za którą otrzymywali środki
do życia. Z biegiem lat Rode stało się miasteczkiem, wciąż zależnym jednak od pozostałych. Po kilku powstaniach oraz żmudnej pracy wybranego w sadzie rządu udało się uzyskać niepodległość oraz prawa. Imigranci pojawiają się na Rode rzadko. Reputacja
oraz historia miasteczka nie zostały przez nikogo zapomniane. Handel zależy od dużych miast, które skutecznie utrudniają prowadzenie interesów. Mieści się tu kilka fabryk, które przesyłają swoje towary dalej - wszystkie są pod kontrolą. Sami
mieszkańcy Rode utrzymują się głównie z łowiectwa oraz handlu wewnętrznego.
</div>
</td>
<td>
<div class="kolumnaoglobok">
<div class="oglokolumnabela11">aktualnie</div>
...
CSS
.bazaoglo {
width: 780px;
height: 200px;
}
.oglobaza1 {
width: 780px;
height: 220px;
font-family: 'Calibri';
background-color: #272625;
color: #696664;
margin: 5px;
border: 1px solid #1f1e1d;
}
.oglokolumna1 {
width: 220px;
height: 200px;
padding: 10px;
}
.oglokolumnabela1 {
width: 130px;
text-align: center;
font-size: 12px;
margin-left: 10px;
border-bottom: 2px solid #393836;
padding: 3px;
text-transform: lowercase;
}
.oglokolumnabela1:hover {
border-bottom: 2px dotted #393836;
}
.kolumnaoglosrodek {
width: 390px;
text-align: justify;
padding: 2px;
font-size: 12px;
height: 300px;
overflow-y: auto;
}
.kolumnaoglobok {
width: 220px;
text-align: justify;
padding: 2px;
color: #7b7775;
height: 300px;
overflow-y: auto;
font-size: 11px;
float: right;
position: relative;
}
.oglokolumnabela11 {
width: 216px;
text-align: center;
font-size: 12px;
border-bottom: 2px solid #393836;
padding: 2px;
text-transform: lowercase;
letter-spacing: 2px;
}
label .fa {
font-size: 1.3em;
margin: 0 0.4em 0 0;
}