JSFiddle - React, Tailwind, and code Playground

by Dhanck

HTML

<div class="alert alert-danger" role="alert">Please note that the icons used are not always the right ones as JSfiddle only uses the halflings</div>



<div class="tool-menu">
  <button class="vrs-btn" title="Save">
    <span class="glyphicon glyphicon-floppy-disk"></span>
    <span class="">Save</span>
  </button>

  <button class="vrs-btn" title="Values...">
    <span class="glyphicon glyphicon-floppy-saved"></span>
    <span class="">Save As...</span>
  </button>

  <button class="vrs-btn" title="Make main primary entity">
    <span class="glyphicon glyphicon-trash"></span>
    <span class="">Delete</span>
  </button>


 <button class="vrs-btn" title="Make main primary entity">
    <span class="glyphicon glyphicon-link"></span>
    <span class="">Component Impact...</span>
  </button>

  
  <button class="vrs-btn pull-right" title="Help">
    <span class="glyphicon glyphicon-th"></span>
  </button>
  <button class="vrs-btn pull-right" title="Help">
    <span class="glyphicon glyphicon-refresh"></span>
  </button>
  <span class="tool-sep"></span>
  
    <button class="vrs-btn pull-right" title="Search">
    <span class="glyphicon glyphicon-search"></span>
  </button>
  <input type="text" class="vrs-tool-filter" placeholder="Filter">
  <span class="tool-sep"></span>
  <button class="vrs-btn pull-right" title="Help">
    <span class="glyphicon glyphicon-question-sign"></span>
  </button>
</div>

CSS

body {
  margin: 20px;
  
}
 .tool-menu {
    border: 1px solid #dddddd;
    height: 24px;
    font-family: century gothic;
}
.tool-sep{
    height: 22px;
    width: 1px;
    background-color: #dddddd;
    float: right;
}
  .vrs-btn {
    background-color: #fff;
    border: none;
    color: #626262;
  }
  .vrs-btn .glyphicon {
    top: 2px;
  }
  .vrs-btn:hover {
    background-color: #626262;
    color: #fff;
  }
  .vrs-tool-filter {
    float: right;
    height: 22px;
    border: none;
    padding-left: 5px;
}
  .disabled {
    cursor: not-allowed;
    opacity: .40;
    filter: alpha(opacity=40);
    -webkit-box-shadow: none;
    box-shadow: none;
    pointer-events: none;
  }

@media only screen and (min-width : 250px)  and (max-width : 1024px){
.vrs-btn span:not(.glyphicon){
    display:none;
  }
}