JSFiddle - React, Tailwind, and code Playground

by A1ex5andr

HTML

<script src="http://coderbit.net/shmigolaTvuna/js/EventHelpers.js"></script>
<script src="http://coderbit.net/shmigolaTvuna/js/cssQuery-p.js"></script>
<script src="http://coderbit.net/shmigolaTvuna/js/jcoglan.com/sylvester.js"></script>
<script src="http://coderbit.net/shmigolaTvuna/js/cssSandpaper.js"></script>


        <header>
      <!-- Fixed navbar -->
      <nav class="navbar navbar-default navbar-fixed-top">
        <div class="container">
          <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
            </button>
          </div>
          <div class="navbar-collapse collapse">
            <ul class="nav navbar-nav">
              <li><a href="#">קצינת קישור</a></li>
              <li><a href="#">לשכת גיוס</a></li>
              <li><a href="#">צב ראשון</a></li>
              <li><a href="#">מורשת קרב</a></li>
              <li><a href="#">שירותים</a></li>
              <li><a class="lastNavLink" href="#">דף הבית</a></li>   
            </ul>
          </div><!--/.nav-collapse -->
        </div>
      </nav>
    </header>

CSS

.navbar-header, .navbar-nav { float: right!important; }
 
.navbar-default .navbar-toggle {
  border-color: #000000;
}


.navbar-default {
  background-color: transparent;
  border-color: transparent;
}
.nav > li > .lastNavLink {
  border-left: 1px solid transparent;
}
	nav    {
	  margin-top: 40px;
	  margin-bottom: 20px;
	  -moz-transform: rotate(-4deg);  /* FF3.5+ */
	  -o-transform: rotate(-4deg);  /* Opera 10.5 */
	  -webkit-transform: rotate(-4deg);  /* Saf3.1+, Chrome */
	  -ms-transform: rotate(-4deg);  /* IE9 */
	  transform: rotate(-4deg);  
	  -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=0.9975640502598243, M12=0.06975647374412515, M21=-0.06975647374412515, M22=0.9975640502598243, SizingMethod='auto expand')";
	  zoom: 1;
	}
	
	
	.nav > li { float: right; }

	.nav > li > a {
		float: right;
		margin-top: 24px;
		padding: 3px 20px;
		border-left: 1px #666666 solid;
		/*display: table-cell;*/
		vertical-align: middle;
	}

	.navbar-collapse {
	  background: #111;  
	  height: 133px !important;
	  width: 100%;
	}

	.navbar-nav {
	  right: 110px;
	  margin: 0;
	  top: 72px;
	  position: relative;
	  direction: rtl;
	}

	.navbar-default .navbar-nav > li > a {
	  color: #FFFFFF;
	  font-size: 20px;
	}

	.navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus {
	  color: #F1A32E;
	  background-color: transparent;
	}