JSFiddle - React, Tailwind, and code Playground

by ilyabezp

HTML

<div class="h"><div class="h_p h_pl"><div class="h_t">Title of beseda</div><div class="h_cu">5 members</div></div><span class="h_l"></span><div class="h_p h_pr"><div align="center" class="h_link"><div class="h_d"></div> <span>5</span></div></div><span class="h_l"></span><div class="h_p" style="background-color:rgba(0,0,0,0.5)"><div class="h_c">Отмена</div></div>

CSS

.h{position:fixed;top:0px;width:360px;height:47.5px;border-top:1px solid #5C779A;background-color:#416189;z-index:3;}
.h_a{position:absolute;width:40px;height:40px;border-radius:20px;margin:3px 0px 3px 8px;}
.h_c{line-height:47.5px;right:20px;position:absolute;}
.h_p{display:inline-block;position:relative;min-width:90px;height:100%;}
.h_pa{width:360px;}
.h_pc{position:absolute;left:60px;top:4px;}
.h_pc{text-shadow:0px 1px 0.25px #273A52;}
.h_pl{margin:3px 0px 0px 5px;text-shadow:0px 1px 0.25px #273A52;width:165px;}/*width:255px;*/
.h_pr{width:100px;bottom:10px;background-color:rgba(0,0,0,0.5)}/*width:100px;*/
.h_cu{font-size:15px;margin-top:1px;}

.h_d {display:inline-block;width:36px;height:36px;background:url(http://oppa.ucoz.ru/header_icon_group.png);background-size:36px 36px;}
.h_link{color:#fff;padding-top:6px;}
.h_link span{font-size:18px;vertical-align:middle}
.h_link div{vertical-align:middle;}

.h_t{display:inline;margin-top:4.5px;font-size:18.25px;}
.h_st{font-size:15px;}
.h_l{margin:0px;
border-right:1px solid #8393A3;
position:absolute;
top:5px;
z-index:1;
height:35px;
display:inline-block;
}