JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <body>

    <nav class="navbar navbar-default">
      <div class="container">
        <div class="navbar-header navbar-right">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <p class="navbar-brand" >کاربر گرامی آرمان نجاحی خوش آمدید.</p>
        </div>
        <div id="navbar" class="collapse navbar-collapse">
          <ul class="nav navbar-nav">
          </ul>
          <ul class="nav navbar-nav navbar-right">
            <li><a href="login.html">خروج</a></li>
          </ul>
        </div><!--/.nav-collapse -->
      </div>
    </nav>

    <header id="header">
      <div class="container">
        <div class="row">
          <div class="col-md-10 pull-right">
            <h1><span class="glyphicon glyphicon-cog" aria-hidden="true"></span> مدیریت <small>صفحات اینستاگرام خود را مدیریت نمایید.</small></h1>
          </div>
          <div class="col-md-2 navbar-left">
				<div class="dropdown create navbar-left">
					<button class="btn btn-default">
						تنظیمات
					</button>
			  </div>
          </div>
        </div>
      </div>
    </header>

    <section id="breadcrumb">
      <div class="container">
        <ol class="breadcrumb">
          <li class="active">مدیریت</li>
        </ol>
      </div>
    </section>

    <section id="main">
      <div class="container">
        <div class="row">
          <div class="col-md-3">
            <div class="list-group">
				<p class="list-group-item active main-color-bg">
					اطلاعات
				</p>
              <p class="list-group-item"><span class="glyphicon glyphicon-usd"...

CSS

body{
  background:#f4f4f4;
}
@font-face {
            font-family: 'Google';
            src: url('/fonts/Google.eot?#') format('eot'), /* IE6–8 */
            url('/fonts/Google.woff') format('woff'), /* FF3.6+, IE9, Chrome6+, Saf5.1+*/
            url('/fonts/Google.ttf') format('truetype'); /* Saf3—5, Chrome4+, FF3.5, Opera 10+ */
}
		
*{
	font-family: Google, Arial, Helvetica, sans-serif;
	direction: rtl;
}
/* Navbar */
.navbar{
  min-height: 33px !important;
  margin-bottom:0;
  border-radius:0;
}

.navbar-nav > li > a, .navbar-brand{
  padding-top:6px !important;
  padding-bottom:0 !important;
  height: 33px;
}

.navbar-default {
  background-color: #e74c3c;
  border-color: #c0392b;
}
.navbar-default .navbar-brand {
  color: #ecf0f1;
}
.navbar-default .navbar-brand:hover,
.navbar-default .navbar-brand:focus {
  color: #ffbbbc;
}
.navbar-default .navbar-text {
  color: #ecf0f1;
}
.navbar-default .navbar-nav > li > a {
  color: #ecf0f1;
}
.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus {
  color: #ffbbbc;
}
.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:hover,
.navbar-default .navbar-nav > .active > a:focus {
  color: #ffbbbc;
  background-color: #c0392b;
}
.navbar-default .navbar-nav > .open > a,
.navbar-default .navbar-nav > .open > a:hover,
.navbar-default .navbar-nav > .open > a:focus {
  color: #ffbbbc;
  background-color: #c0392b;
}
.navbar-default .navbar-toggle {
  border-color: #c0392b;
}
.navbar-default .navbar-toggle:hover,
.navbar-default .navbar-toggle:focus {
  background-color: #c0392b;
}
.navbar-default .navbar-toggle .icon-bar {
  background-color: #ecf0f1;
}
.navbar-default .navbar-collapse,
.navbar-default .navbar-form {
  border-color: #ecf0f1;
}
.navbar-default .navbar-link {
  color: #ecf0f1;
}
.navbar-default .navbar-link:hover {
  color: #ffbbbc;
}

/* Custom */
.main-color-bg{
  background-color: #e74c3c !important;
  border-color: #c0392b !important;
 ...