JSFiddle - React, Tailwind, and code Playground
HTML
<div class="wrapper">
<div class="sidebar">
<div class="block">
<div class="block_header">
Название блока
</div>
<div class="block_content">
Здесь будет содержание блока. Это может быть любой текст: описание какого-нибудь материала, новость, что угодно.
</div>
</div>
</div>
<div class="content">
Здесь будет содержание блока. Это может быть любой текст: описание какого-нибудь материала, новость, что угодно.
</div>
</div>
CSS
body {
background: #eee;
}
.wrapper {
width: 950px;
height: 100%;
padding: 5px;
background: rgba(0, 0, 0, 0.2);
margin: 30px auto;
border-radius: 5px;
}
.content {
float: right;
width: 615px;
background: #fff;
padding: 15px 35px 0px 35px;
border-radius: 3px;
}
.sidebar {
width: 260px;
float: left;
border-radius: 3px;
}
.block {
background: #fff;
width: 260px;
margin-bottom: 5px;
display: block;
border-radius: 3px;
}
.block_header {
border-bottom: solid 1px #ececec;
color: #cc2727;
font-size: 14px;
font-weight: bold;
text-transform: uppercase;
padding: 10px;
}
.block_content {
padding: 10px;
}