JSFiddle - React, Tailwind, and code Playground

by Cristofer Sousa

HTML

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


<div class="height-cols">
<div class="row">
  <div class="col-md-9 content">    
    Content
    <div class="row">
  <div class="col-md-12">
    <div class="bg-breadcrumb">
      <ol class="breadcrumb">
    <li><a href="#">Principal</a></li>
    <li><a href="#">Cadastro</a></li>
    <li><a href="#">Cliente</a></li>
    <li class="active foco_1">Cliente Novo</li>
  </ol>
  </div>
      </div>
</div>

  </div>
  
  <div class="col-md-3 sidebar">
      <div class="panel-body sidebar-panelbody">
      <div class="progress">
         <div class="progress-bar progress-bar-success progress-bar-striped active" role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" style="width: 45%">
           <span>45% Completo</span>
         </div>
       </div>
        <ul class="nav nav-pills nav-stacked">
          <li role="presentation"><a href="#cliente">Cliente</a></li>
          <li role="presentation"><a href="#principal">Endereço</a></li>
          <li role="presentation"><a href="#endereco">Contatos</a></li>
          <li role="presentation"><a href="#contatos">Dados Padrão</a></li>
          <li role="presentation"><a href="#fidelidade">Fidelidade</a></li>
          <li role="presentation"><a href="#h">Aviso</a></li>
          <li role="presentation"><a href="#obs">Observações</a></li>
          <li role="presentation"><a href="#marcas">Marcas</a></li>
          <li role="presentation"><a href="#representates">Representantes</a></li>
          <li role="presentation"><a href="#outros">Outros</a></li>
          <li role="presentation"><a href="#spc">SPC</a></li>
          <li role="presentation"><a href="#pspc">Pontualidade SPC</a></li>
          <li role="presentation"><a href="#z">Sócios</a></li>
          
       </ul>
     </div>
  </div>
 </div>
</div>


<nav class="navbar navbar-default navbar-fixed-bottom">
  <div class="container">
    <div...

CSS

@import url(https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css);
@import url(https://fonts.googleapis.com/css?family=Open+Sans);

html,body,.height-cols,.row {
  height:100%;
   background-color:#2c3e50;
  font-family:'Open-sans, sans-serif';
}

.row > div {
  height:100%;
}
  
  

.content{
   border:1px solid red;
  background-color:#95a5a6;
}

.sidebar{
   border:1px solid black;
  background-color:#bdc3c7;
  }