JSFiddle - React, Tailwind, and code Playground
HTML
<div class="fixed-cont">
<ul class="t_inject_container">
<li class="t_inject_row">
<ul class="menu">
<li id="LI_4">
<button class="add_button t_intect_button">
+
</button>
</li>
<li>
<button class="minimize_button t_intect_button">
m
</button>
</li>
</ul>
</li>
<li>
<ul class="content_selection_container">
<li>
<form name="search_form" class="search_form">
<input type="text" name="search_input" class="search_bar" />
<input type="submit" value="🔍" class="search_button" name="search_button" />
</form>
</li>
<li id="LI_14">
<button class="content_selection_button">
My Timeline
</button>
</li>
<li>
<button class="content_selection_button">
relevent
</button>
</li>
<li>
<button class="content_selection_button">
mentions
</button>
</li>
</ul>
</li>
</ul>
</div>
CSS
/*------------------------------------------------------------------------------------*/
/*--Entypo Font---*/
/*------------------------------------------------------------------------------------*/
@font-face {
font-family: 'EntypoRegular';
src: url('font/entypo.eot');
src: url('font/entypo.eot?#iefix') format('embedded-opentype'),
url('font/entypo.woff') format('woff'),
url('font/entypo.ttf') format('truetype'),
url('font/entypo.svg#EntypoRegular') format('svg');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'EntypoSocial';
src: url('font/entypo-social.eot');
src: url('font/entypo-social.eot?#iefix') format('embedded-opentype'),
url('font/entypo-social.woff') format('woff'),
url('font/entypo-social.ttf') format('truetype'),
url('font/entypo-social.svg#EntypoRegular') format('svg');
font-weight: normal;
font-style: normal;
}
/*------------------------------------------------------------------------------------*/
/*----Main Page---*/
/*------------------------------------------------------------------------------------*/
.t_inject_container
{
background-color:grey;
margin: 0;
padding: 0;
}
.t_inject_container > li {
display: inline-block;
}
ul{
list-style: none;
}
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
border-radius:5px;
}
.menu {
background-color:lightblue;
border-radius:5px;
margin: 1px;
padding: 2px;
}
.t_intect_button {
background-color:blue;
display:block;
height: 50px;
width: 50px;
margin: 5px;
font-size: 20px;
color: white;
border: 0;
}
.minimize_button{
height: 20px;
width: 20px;
margin: 2px;
font-size: 12px;
}
/*-------------------------------------------------------------------------------------*/
/*Selection...