JSFiddle - React, Tailwind, and code Playground
by jim31415
HTML
<html>
<head>
<style>
html {
font-size: 100%;
}
menu {
display: block;
height: 40px; /*width: 390px;*/
padding: 5px; margin: 5px;
background: #f1f1f1;
border: solid 1px #d2d2d2;
border-radius: 4px;
box-shadow: rgba(0,0,0,0.10) 0px 1px 3px;
}
menu > div {
Xheight: 40px;
Xfloat: left;
}
menu command {
position: relative;
display: block;
float: left;
width: 53px;
height: 38px;
Xmargin-left: 5px;
background: #f3f3f3;
border: solid 1px #d9d9d9;
border-radius: 2px;
cursor: pointer;
}
menu command:hover {
z-index: 100;
border-color: #bbb;
box-shadow: inset #CCC 0px 1px 5px;
background: -moz-linear-gradient(top, #eeeeee 0%, #e0e0e0 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#eeeeee), color-stop(100%,#e0e0e0));
background: -webkit-linear-gradient(top, #eeeeee 0%,#e0e0e0 100%);
background: -o-linear-gradient(top, #eeeeee 0%,#e0e0e0 100%);
background: -ms-linear-gradient(top, #eeeeee 0%,#e0e0e0 100%);
background: linear-gradient(top, #eeeeee 0%,#e0e0e0 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eeeeee', endColorstr='#e0e0e0',GradientType=0 );
}
menu command:active {
box-shadow: inset #f5f5f5 1px 1px 0px, inset #f5f5f5 -1px -1px 0px, inset #CCC 0px 1px 5px;
border-color: #4D90FE;
}
/** changes here **/
menu {display:table; width:100%;}
menu > div {display:table-cell; height: 40px; width: 20%; min-width: 118px;}
menu > div.spacer {min-width:4px;}
menu command{margin:0 4px 0 0;}
.less {float:left;}
.more {float:left;}
.save {float:left;}
.vote {float:left;}
.send {float:right;}
.exit {float:right;}
</style>
</head>
<body>
<menu>
<div>
<command class="less" />
<command class="more" />
</div>
<div class="spacer"></div>
<div>
<div style="background: #0f6898; width: 118px; margin: 0 auto;">
...