JSFiddle - React, Tailwind, and code Playground
by voronovam
HTML
<div class="group-list found-item">
<a href="">
<div class="user-name">
<b>Теплов Алексей</b>
<span class="pull-right"><span class="icons icon-phone"></span> 25-354</span>
<div>руководитель группы</div>
</div>
</a>
<a href="">
<div class="user-name">
<b>Теплищев Вадим</b>
<span class="pull-right"><span class="icons icon-phone"></span> 25-354</span>
<div>инженер</div>
</div>
</a>
<a href="">
<div class="user-name">
<b>Теплавина Евгения</b>
<span class="pull-right"><span class="icons icon-phone"></span> 25-354</span>
<div>инженер</div>
</div>
</a>
</div>
CSS
.found-item {
background: #fff;
margin: 5px;
padding: 5px 0;
border-bottom: 1px solid #b6b6ba;
}
.found-item a {
border-bottom: none;
}
.found-item a:hover {
border-bottom: 1px solid #e8440d;
}
.found-item .user-name {
padding: 5px 20px;
}
.found-item .user-name:hover {
background: #e6e5e9;
}
.found-item .user-group {
padding: 0 20px;
}
.found-item .icon-group {
background-position: -13px -1215px;
width: 14px;
height: 14px;
display: inline-block;
}
.group-title {
text-transform: uppercase;
font-weight: 600;
font-size: 12px;
padding-left: 25px;
margin-top: 25px;
}
.group-list .user-name {
border-bottom: 1px solid #e2e2e2;
}
.group-list .user-name:last-child {
border-bottom: none;
}