<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"> <div class="container"> <div class="row"> <h3>Company "XXXX"</h3> <div class="pull-right"> <div > <a class="btn btn-default" href="#my-tabs" data-toggle="collapse"> <i class="glyphicon glyphicon-eye-open"></i> </a> </div> </div> <div class="row collapse" id="my-tabs" > <ul class="nav nav-tabs"> <li class="active"><a data-toggle="tab" href="#home">Dados gerais</a></li> <li><a data-toggle="tab" href="#menu-team">Time</a></li> <li><a data-toggle="tab" href="#menu-transactions">Transações</a></li> </ul> <div class="tab-content"> <div id="home" class="tab-pane fade in active"> <p>Nome: </p> <p>Endereço: </p> <p>Breve descrição: </p> </div> <div id="menu-team" class="tab-pane fade"> <div class="row"> <div class="col-md-12"> <table class="table table-condensed table-bordered table-hover small"> <thead> <tr> <th>Mame</th> <th>Email</th> <th>Roles</th> <th>.</th> </tr> </thead> <tbody> <tr> <td>João da Silva</td> <td>joao@minha_empresa.com</td> <td>admin</td> <td> <a href="#"> <i class="glyphicon glyphicon-eye-open"></i></a> <a href="#"> <i class="glyphicon glyphicon-edit"></i></a> </td> </tr> </tbody> </table> </div> </div> </div> <div id="menu-transactions" class="tab-pane fade"> <table class="table table-condensed table-bordered table-hover small"> <thead> <tr> <th>Operation</th> <th>Date</th> <th>Value</th> <th>Details</th> </tr> </thead> <tbody> <tr class="panel-default"> <td>Due dilligence</td> <td>04/03/2017</td> <td>-</td> <td> Análise dos documentos contábeis </td> </tr> <tr class="panel-success"> <td>Funding</td> <td>14/03/2017</td> <td>R$ 150 k</td> <td> </td> </tr> </tbody> </table> </div> </div> </div> </div> <div class="row"> <div class="col-md-2"> <div class="panel panel-success"> <div class="panel-heading"> <div class="row"> <div class="col-xs-4"> <i class="fa fa-money fa-2x"></i> </div> <div class="col-xs-8 text-right"> <p class="announcement-heading"> $ 250 k</p> <p class="announcement-text">{t}Invested{/t} <i class=""></i> </p> </div> </div> </div> <a href="#"> <div class="panel-footer announcement-bottom"> <div class="row"> <div class="col-xs-6"> {t}Details{/t} </div> <div class="col-xs-6 text-right"> <i class="fa fa-arrow-circle-right"></i> </div> </div> </div> </a> </div> </div> <div class="col-md-2"> <div class="panel panel-info"> <div class="panel-heading"> <div class="row"> <div class="col-xs-4"> <i class="fa fa-asterisk fa-2x"></i> </div> <div class="col-xs-8 text-right"> <p class="announcement-heading"> $ 25.76 </p> <p class="announcement-text">{t}CAC{/t} <i class=""></i> </p> </div> </div> </div> <a href="#"> <div class="panel-footer announcement-bottom"> <div class="row"> <div class="col-xs-6"> {t}Details{/t} </div> <div class="col-xs-6 text-right"> <i class="fa fa-arrow-circle-right"></i> </div> </div> </div> </a> </div> </div> <div class="col-md-2"> <div class="panel panel-danger"> <div class="panel-heading"> <div class="row"> <div class="col-xs-4"> <i class="fa fa-arrow-down fa-2x"></i> </div> <div class="col-xs-8 text-right"> <p class="announcement-heading"> 13.46 % </p> <p class="announcement-text">{t}Churn{/t} <i class=""></i> </p> </div> </div> </div> <a href="#"> <div class="panel-footer announcement-bottom"> <div class="row"> <div class="col-xs-6"> {t}Details{/t} </div> <div class="col-xs-6 text-right"> <i class="fa fa-arrow-circle-right"></i> </div> </div> </div> </a> </div> </div> <div class="col-md-2"> <div class="panel panel-default"> <div class="panel-heading"> <div class="row"> <div class="col-xs-4"> <i class="fa fa-arrow-up fa-2x"></i> </div> <div class="col-xs-8 text-right"> <p class="announcement-heading"> 6.83 </p> <p class="announcement-text">{t}CAC/LTV{/t} <i class=""></i> </p> </div> </div> </div> <a href="#"> <div class="panel-footer announcement-bottom"> <div class="row"> <div class="col-xs-6"> {t}Details{/t} </div> <div class="col-xs-6 text-right"> <i class="fa fa-arrow-circle-right"></i> </div> </div> </div> </a> </div> </div> <div class="col-md-2"> <div class="panel panel-default"> <div class="panel-heading"> <div class="row"> <div class="col-xs-4"> <i class="fa fa-users fa-2x"></i> </div> <div class="col-xs-8 text-right"> <p class="announcement-heading"> 6 / 10 </p> <p class="announcement-text">Users </p> </div> </div> </div> <a href="#"> <div class="panel-footer announcement-bottom"> <div class="row"> <div class="col-xs-6"> {t}Details{/t} </div> <div class="col-xs-6 text-right"> <i class="fa fa-arrow-circle-right"></i> </div> </div> </div> </a> </div> </div> <div class="col-md-2"> <div class="panel panel-warning"> <div class="panel-heading"> <div class="row"> <div class="col-xs-4"> <i class="fa fa-at fa-2x"></i> </div> <div class="col-xs-8 text-right"> <p class="announcement-heading"> 3 </p> <p class="announcement-text">{t}Messages{/t} <i class=""></i> </p> </div> </div> </div> <a href="#"> <div class="panel-footer announcement-bottom"> <div class="row"> <div class="col-xs-6"> {t}Details{/t} </div> <div class="col-xs-6 text-right"> <i class="fa fa-arrow-circle-right"></i> </div> </div> </div> </a> </div> </div> </div> <div class="row"> <div class="col-md-4"> <div>Evolução do CAC</div> </div> <div class="col-md-4"> <div>Evolução do Churn</div> </div> <div class="col-md-4"> <div>Fluxo de Caixa</div> </div> <div class="col-md-4"> <div>Runaway</div> </div> </div> </div>