[html]
<style>
#wrapper{
width:510px;
height: 340px;
background-color: #eee;
margin: 0 auto;
}
.tab-container{position: relative;}
.tab-wrapper{
display: flex;
width: 100%;
font-family: sans-serif;
flex-direction: column;
align-items: flex-start;
gap: 14px;
}
.tab-wrapper .tab-item,
.tab-wrapper input{display: none;}
.tab-wrapper .tab-item{
background-color: #fff;
padding: 20px;
position: absolute;
left: 170px;
height: 300px;
top: 0;
border: 1px solid #ddd;
}
.tab-wrapper label{
background-color: #f5f5f5;
min-height: 35px;
line-height: 35px;
width: 120px;
padding: 0px 20px;
text-align: center;
float: left;
color: #878685;
white-space: nowrap;
border: 1px solid #ddd;
}
.tab-wrapper input:checked + label{
background-color: #000;
color: #fff;
}
.tab-wrapper input:checked + label + .tab-item{display: block;}
.tab-item {
width: 300px;
}
.post-list {
line-height: 30px;
padding-left: 10px;
}
.post-list:not(:last-child) {
border-bottom: 1px solid #ddd;
}
</style>
<div id="wrapper">
<div class="tab-container">
<div class="tab-wrapper">
<input type="radio" name="tab" id="tab1" checked />
<label class="tab-label" for="tab1" nth="1">политика</label>
<div class="tab-item" id="tab-content1">
<il>
</il>
</div>
<input type="radio" name="tab" id="tab2" />
<label class="tab-label" for="tab2" nth="2">бизнес</label>
<div class="tab-item" id="tab-content2">
</div>
<input type="radio" name="tab" id="tab3" />
<label class="tab-label" for="tab3" nth="3">медицина</label>
<div class="tab-item" id="tab-content3">
</div>
<input type="radio" name="tab" id="tab4" />
<label class="tab-label" for="tab4" nth="4">образование</label>
<div class="tab-item" id="tab-content4">
</div>
<input type="radio" name="tab" id="tab5" />
<label class="tab-label" for="tab5" nth="5">полиция</label>
<div class="tab-item" id="tab-content5">
</div>
<input type="radio" name="tab" id="tab6" />
<label class="tab-label" for="tab6" nth="6">церковь</label>
<div class="tab-item" id="tab-content6">
</div>
<input type="radio" name="tab" id="tab7" />
<label class="tab-label" for="tab7" nth="7">сми</label>
<div class="tab-item" id="tab-content6">
</div>
</div>
</div>
[/html]
<li class="post-list"><a href="ссылка на профиль">name surname</a> — должность</li>