JSFiddle - React, Tailwind, and code Playground

by MirDj

HTML

<div class="toolbarBox">
<div class="rowTB">
 
  <div class="colTB">
  
   <div class="siteLogo display_inline" onclick="window.open('/', '_self')" title="На главную"><span class="sL1">S</span><span class="sL2">ITE</span><span class="sL1">.RU</span></div>
   
  </div>
  
  <div class="colTB">
    <div class="bottonTB display_inline">#ЛИНК 1</div>
    <div class="bottonTB display_inline">#ЛИНК 2</div>
    <div class="bottonTB display_inline">#ЛИНК 3</div>
  </div>
  
  <div class="colTB"  id="rowTB">
  <div class="exitButton">Выход</div>
  </div>
  
</div>
</div>

CSS

.toolbarBox {
width: 100%;
height: 50px;
position: fixed!important;
z-index: 1200!important;
top: 0;
left: 0;
background: #000;
border-bottom: 1px solid #9e9e9e;
vertical-align: bottom;
background: -webkit-linear-gradient(top,#32374a,#0c1224); /*Safari 5.1-6*/
background: -o-linear-gradient(top,#32374a,#0c1224); /*Opera 11.1-12*/
background: -moz-linear-gradient(top,#32374a,#0c1224); /*Fx 3.6-15*/
background: linear-gradient(to bottom, #32374a, #0c1224); /*Standard*/
}

.rowTB {
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-content: space-between;
  align-items: center;
}

.rowTB .colTB{
  flex: 1 0 auto;
  margin: 0px;
 border: 1px solid #9e9e9e;
  line-height: 50px;
  height: 50px;
}

#rowTB div:last-child {
  margin-left: auto;
}

.siteLogo {
font-family: 'Tahoma';
font-weight: bold;
font-size: 30px;
cursor: pointer;
padding-left: 15px;
}

.sL1 {
color: #ff0000;
}

.sL2 {
color: #fff;
}

.bottonTB {
FONT-FAMILY: Roboto;
font-weight: 500;
font-size: 15px;
color: #fff;
margin: 0 15px 0 0;
cursor: pointer;
position: relative;
height: 50px;
vertical-align: top;
}

.display_inline{
	display: inline-block;
}

.exitButton {
font-family: "Roboto";
font-size: 14px;
color: #d4d4d4;
background: #404040;width: 100px;height: 30px;line-height: 28px;
margin: 10px 15px 0 0;

}