JSFiddle - React, Tailwind, and code Playground

by Kiril Vigdorchick

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<body>
    <nav class="navbar navbar-custom navbar-fixed-top"> <a class="navbar-brand" href="#">
            <img alt="Brand" src="images/logo70.png" /></a>

        <div class="container">
            <div class="navbar-header">
                <div class="btn-group pull-left">
                    <button type="button" class="btn btn-oldstyle navbar-btn dropdown-toggle" data-toggle="dropdown" aria-expanded="false">כניסת עובד&nbsp;&nbsp;&nbsp;<span class="glyphicon glyphicon-log-in" aria-hidden="true"></span>
                    </button>
                    <ul class="dropdown-menu dropdown-menu-left" role="menu" style="padding: 15px; min-width: 250px;">
                        <form>
                            <input type="email" class="form-control" id="exampleInputEmail1" style="direction: ltr;" placeholder="Username" required="required" autofocus="autofocus" />
                            <input type="password" class="form-control" id="exampleInputPassword1" style="direction: ltr;" placeholder="Password" required="required" />
                            <div class="checkbox pull-right">
                                <label>
                                    <input type="checkbox" /><span style="padding-right: 25px;">זכור אותי</span>

                                </label>
                            </div>
                            <button type="submit" class="btn btn-oldstyle btn-block">כניסה</button>
                        </form>
                    </ul>
                </div>
                <div class="btn-group navbar-left visible-sm" style="padding-left:...

CSS

body {
    direction: rtl;
}
.navbar-brand {
    position: absolute;
    left: 50%;
    margin-left: -35px !important;
    /* 50% of your logo width */
    display: block;
    padding: 0;
}
.container {
    padding-top: 25px;
}
.navbar-custom {
    background-color: #ce3974;
    border-color: #b82e65;
    background-image: -webkit-gradient(linear, left 0%, left 100%, from(#d86291), to(#ce3974));
    background-image: -webkit-linear-gradient(top, #d86291, 0%, #ce3974, 100%);
    background-image: -moz-linear-gradient(top, #d86291 0%, #ce3974 100%);
    background-image: linear-gradient(to bottom, #d86291 0%, #ce3974 100%);
    background-repeat: repeat-x;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffd86291', endColorstr='#ffce3974', GradientType=0);
}
.navbar-custom .navbar-brand {
    color: #ffffff;
}
.navbar-custom .navbar-brand:hover, .navbar-custom .navbar-brand:focus {
    color: #e6e6e6;
    background-color: transparent;
}
.navbar-custom .navbar-text {
    color: #ffffff;
}
.navbar-custom .navbar-nav > li > a {
    color: #ffffff;
    border-left: 1px solid #b82e65;
}
.navbar-custom .navbar-nav > li:last-child > a {
    border-left: none;
}
.navbar-custom .navbar-nav > li > a:hover, .navbar-custom .navbar-nav > li > a:focus {
    color: #ffffff;
    background-color: #b82e65;
    background-image: -webkit-gradient(linear, left 0%, left 100%, from(#b82e65), to(#d2477e));
    background-image: -webkit-linear-gradient(top, #b82e65, 0%, #d2477e, 100%);
    background-image: -moz-linear-gradient(top, #b82e65 0%, #d2477e 100%);
    background-image: linear-gradient(to bottom, #b82e65 0%, #d2477e 100%);
    background-repeat: repeat-x;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffb82e65', endColorstr='#ffd2477e', GradientType=0);
}
.navbar-custom .navbar-nav > .active > a, .navbar-custom .navbar-nav > .active > a:hover, .navbar-custom .navbar-nav > .active > a:focus {
    color: #ffffff;
   ...