JSFiddle - React, Tailwind, and code Playground

by MadhawaMB

HTML

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<div class="container">
    <div class="navbar">
        <ul class="nav nav-pills">
            <li role="presentation"><a href="#"><span class="glyphicon glyphicon-home" aria-hidden="true"></span></a></li>
            <li role="presentation" class="dropdown">
            <a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Students<span class="caret"></span></a>
        <ul class="dropdown-menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li><a href="#">Separated link</a></li>
        </ul>
            </li>
            <li role="presentation" class="dropdown">
            <a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Digital Library<span class="caret" aria-hidden="true"></span></a>
        <ul class="dropdown-menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li><a href="#">Separated link</a></li>
        </ul>
            </li>
            <li role="presentation" class="dropdown">
            <a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Search<span class="caret"></span></a>
        <ul class="dropdown-menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li><a href="#">Separated link</a></li>
        </ul>
            </li>
   ...

CSS

.header {
    width: 100%;
    height: 120px;
    background-color: black;
    color: white;
    font-family: 'Metrophobic', Arial, Serif;
    font-size: 18px;
    position: fixed;
    top: 0;
    z-index: 10;
 }

 .header img {
     width: 105px;
     height: 110px;
     float: left;
     padding-top: 10px;
 }

 .header a {
     color: white;
     text-decoration: none;
     position: relative;
     top: 20px;
     left: 10px;
 }



 .header .btn-group {
    margin-top: 30px;
    float: right; 
 }


 .header .input-group {
    margin-top: 31px;
    margin-right: 50px;
 }

 .header .form-control {
    border-style: hidden;
    border-radius: 0px;
 }


 .header .btn {
    color: white;
    background-color: rgba(51,51,51,1);
    padding: 6px 40px;
    border-radius: 0px;
    border-style: hidden;
 }

.header .dropdown-toggle {
    background-color: rgba(140,140,140,1);
}



.caret {
    color: black;
}