JSFiddle - React, Tailwind, and code Playground

by ksissons

HTML

<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<div class="container-fluid toolsBar" id="toolsBar">
						<div class="navbar navbar-default">
							<div class="navbar-header">
							  <span class="navbar-brand">Test Tools</span></div>
							<div>
							  <ul class="nav navbar-nav" id="toolBarList" style="overflow: overlay;">
                  <li>
                    <a class="btn btn-default btn-outline btn-circle">Test Readiness Status</a>
                  </li>
                  <li>
                    <a class="btn btn-default btn-outline btn-circle">Run Detective Tool</a>
                  </li>
                  <li>
                    <a  class="btn btn-default btn-outline btn-circle">Go to Confluence</a>
                  </li>
                  <li>
                    <a class="btn btn-default btn-outline btn-circle">How to Update mp3 Files</a>
                  </li>
                  <li>
                    <a class="btn btn-default btn-outline btn-circle">Generate &amp; View Report</a>
                  </li>
                  <li>
                     <a class="btn btn-default btn-outline btn-circle">Show Configuration Variables</a>
                  </li>
                  <li>
                     <a class="btn btn-default btn-outline btn-circle">Edit Configuration Variables</a>
                  </li>
                  <li>
                     <a class="btn btn-default btn-outline btn-circle">Update Content Automatically</a>
                  </li>
              </ul>
							</div>
						</div>
					</div>

CSS

.toolsBar .navbar-default {
    margin-bottom: 0px;
    border-color: #e7e7e7;
    border-radius: 4px;
    position: relative;
    min-height: 40px;
    height: 40px;
    line-height: 1.42857143;
    color: #333;
    overflow: overlay;
}

.toolsBar .navbar .nav {
    position: relative;
    left: 0;
    display: list-item;
    float: left;
}

.navbar .nav {
    position: relative;
    left: 0;
    display: block;
    float: left;
    margin: 0 10px 0 0;
}

.toolsBar .navbar-brand {
    float: left;
    height: 40px;
    padding: 0px 12px;
    font-size: 16px;
    line-height: 40px;
}

.toolsBar .navbar-brand {
    position: relative;
    z-index: 2;
}

.toolsBar .navbar-default .navbar-brand {
    color: white;
}

#toolsBar .navbar-default {
    background-color: #566b7f;
}