JSFiddle - React, Tailwind, and code Playground
HTML
<div id=reklama>eee</div>
<div id="center">
<div id=tekst-naglowek>eeee</div>
<div id=tekst>eee</div>
</div>
<div id="right">
<div id=bok-naglowek>ee</div>
<div id=bok>ee</div>
</div>
CSS
#reklama {
float: left;
margin: 0 20px;
border-radius: 10px;
background-color: rgba(0, 0, 0, 0.21);
height: 500px;
width: 260px;
}
#center{width: 48%;}
#center,#right{float:left;}
#tekst-naglowek {
height: 24px;
background-color: rgba(0, 0, 0, 0.70);
border-top-left-radius: 10px;
border-top-right-radius: 10px;
text-shadow: 0.1em 0.1em 0.2em black;
color: white;
word-wrap: break-word;
overflow: hidden;
padding-left: 8px;
padding-right: 8px;
padding-top: 4px;
font-size: 20px;
font-family: fantasy;
position: relative;
}
#tekst {
height: 400px;
background-color: rgba(0, 0, 0, 0.31);
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
color: white;
word-wrap: break-word;
overflow: hidden;
padding-left: 8px;
padding-right: 8px;
padding-top: 4px;
}
#bok-naglowek {
margin: 20px;
margin-bottom: 0px;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
background-color: rgba(0, 0, 0, 0.50);
height: 20px;
width: 260px;
text-align: center;
margin-top: 0px;
}
#bok {
margin: 20px;
margin-top: 0px;
background-color: rgba(0, 0, 0, 0.21);
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
width: 260px;
height: 480px;
}