JSFiddle - React, Tailwind, and code Playground

by aflynt

HTML

<script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<script src="https://google-code-prettify.googlecode.com/svn/loader/run_prettify.js?lang=css"></script>
<div class="jumbotron">
        <div class="container-fluid">

           <ul class="navitems">
                                <li>
                                    <a href="#">Community Development
                                    </a>
                                </li>
                                <li>
                                    <a href="#">Economic Development
                                    </a>
                                </li>
                                <li>
                                    <a href="#">Education
                                    </a>
                                </li>
                                <li>
                                    <a href="#">Learning Power
                                    </a>
                                </li>
                                <li>
                                    <a href="#">Workforce Development
                                    </a>
                                </li>
                            </ul>

CSS

body {
  padding-bottom: 40px;
  color: #666;
}
pre { margin: 0; padding: 10px 20px !important;}

footer {
  margin-top: 200px;
}

.container, .jumbotron .container { width: auto; max-width: 1170px; }

.jumbotron {
  margin: 60px 0;
  padding-left: 0;
  padding-right: 0;
}
  .jumbotron.intro {
    margin-top: 0;
  }

  .jumbotron .navbar {
    font-size: 14px;
    line-height: 1.6;
  }

/* menu styes */
.list-unstyled,
.list-unstyled ul { min-width: 120px }

@media ( min-width: 767px ) {
  .panel-group { width: 400px; }
  .thumbnail { margin: 0; }
}

/* Grid demo styles */
.grid-demo {
  padding: 10px 30px;
}

  .grid-demo [class*="col-"] {
    margin-top: 5px;
    margin-bottom: 5px;
    font-size: 1em;
    text-align: center;
    line-height: 2;
    background-color: #e5e1ea;
    border: 1px solid #d1d1d1;
  }


ul.dropdown-menu{
    right: 77px !important; 
    left: 77px !important; 

}
.yamm .nav,
.yamm .collapse,
.yamm .dropup,
.yamm .dropdown {
  position: static;
}
.yamm .container {
  position: relative;
}
.yamm .dropdown-menu {
  left: auto;
}
.yamm .yamm-content {
  padding: 20px 30px;
}
.yamm .dropdown.yamm-fw .dropdown-menu {
  left: 0;
  right: 0;
}



.active{
  text-decoration:none;
    color:#DC0000 !important;
}

JavaScript

!function (d, s, id) {
            var js, fjs = d.getElementsByTagName(s)[0];
            if (!d.getElementById(id)) {
                js = d.createElement(s); js.id = id; js.src = "https://platform.twitter.com/widgets.js";
                fjs.parentNode.insertBefore(js, fjs);
            }
        }(document, "script", "twitter-wjs");

        $('ul.dropdown-menu [data-toggle=dropdown]').on('click', function (event) {
            // Avoid following the href location when clicking
            event.preventDefault();
            // Avoid having the menu to close when clicking
            event.stopPropagation();
            // If a menu is already open we close it
           $('ul.dropdown-menu [data-toggle=dropdown]').parent().removeClass('open');
            // opening the one you clicked on
            $(this).parent().addClass('open');

            var menu = $(this).parent().find("ul");
            var menupos = menu.offset();

            if ((menupos.left + menu.width()) + 30 > $(window).width()) {
                var newpos = -menu.width();
            } else {
                var newpos = $(this).parent().width();
            }
            menu.css({ left: newpos });
       });

$('.navitems li a').click(function () {
    // reset all 
    $('.navitems li a').removeClass('active');
    
    $(this).addClass('active');
    $(this).parents('li').find('a.dropdown-toggle').filter(function () {
        return !$(this).closest('ul').hasClass('dropdown-menu');
    }).addClass('active');    
});