JSFiddle - React, Tailwind, and code Playground

by brianlmerritt

HTML

<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">
<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap-responsive.css">
<script src="http://twitter.github.com/bootstrap/assets/js/bootstrap-transition.js"></script>
<script src="http://twitter.github.com/bootstrap/assets/js/bootstrap-tab.js"></script>
    <nav class="navbar-wrapper">
      <!-- Wrap the .navbar in .container to center it within the absolutely positioned parent. -->
      <div class="container">

        <div class="navbar navbar-inverse">
          <div class="navbar-inner">
            <!-- Responsive Navbar Part 1: Button for triggering responsive navbar (not covered in tutorial). Include responsive CSS to utilize. -->
            <button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
            </button>
            <img class ="brand" src="pix/logos_inverteds.png" alt="2111 Consulting Logo">  <!--<a class="brand" href="#">2111 Consulting</a>
            <!-- Responsive Navbar Part 2: Place all navbar contents you want collapsed withing .navbar-collapse.collapse. -->
            <div class="nav-collapse collapse" >
              <ul class="nav">
                <li class="active"><a href="#">Home</a></li>
                <li class="dropdown">
                  <a href="#" class="dropdown-toggle" data-toggle="dropdown">Consulting<b class="caret"></b></a>
                  <ul class="dropdown-menu">
                    <li><a href="tmt.html" title="Telecoms Media & Technology (TMT)">Telecoms Media & Technology (TMT)</a></li>
                    <li><a href="cost_savings.html" title="Cost Savings & Effectiveness">Cost Savings & Effectiveness</a></li>
                    <li><a href="cloud_computing.html" title="Cloud Computing & ICT Agility">Cloud...

CSS

/* GLOBAL STYLES
    -------------------------------------------------- */
    /* Padding below the footer and lighter body text */

    body {
      padding-bottom: 40px;
      color: #696969;
      background-color:#fff;
    }
    h1, h2, h3 {
      color:#1b76bc ;
    }


    /* CUSTOMIZE THE NAVBAR
    -------------------------------------------------- */

    /* Special class on .container surrounding .navbar, used for positioning it into place. */
    .navbar-wrapper {
      max-width:1200px ;
      margin-right: auto;
      margin-left: auto;
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      z-index: 10;
      margin-top: 20px;
      margin-bottom: -90px; /* Negative margin to pull up carousel. 90px is roughly margins and height of navbar. */
    }
    .navbar-wrapper .navbar {
    }

    /* Remove border and change up box shadow for more contrast */
    .navbar .navbar-inner {
      border: 0;
      -webkit-box-shadow: 0 2px 10px rgba(0,0,0,.25);
      -moz-box-shadow: 0 2px 10px rgba(0,0,0,.25);
      box-shadow: 0 2px 10px rgba(0,0,0,.25);
      margin-right: 20px ;
      margin-left: 20px ;
    }

    /* Downsize the brand/project name a bit */
    .navbar .brand {
      padding: 2px 10px 2px; /* reduce vertical padding to match navbar links */
      font-size: 16px;
      font-weight: bold;
      text-shadow: 0 -1px 0 rgba(0,0,0,.5);
    }

    /* Navbar links: increase padding for taller navbar */
    .navbar .nav > li > a {
      padding: 15px 20px;
      color: #111 ;
    }
    
    .navbar-inverse .nav > li > a:hover,
    .navbar-inverse .nav > li > a:focus,
    .navbar-inverse .nav > li > a:active{
      color: #fff ;
      background-image: none;
      background-repeat: none;
      background-color: #000;
    }

    /* Offset the responsive button for proper vertical alignment */
    .navbar .btn-navbar {
      margin-top: 10px;
    }

    .navbar-inverse .brand, .navbar-inverse .nav>li>a {
      font-size: 18px;
    ...