JSFiddle - React, Tailwind, and code Playground

by mtsys

HTML

<link rel="stylesheet" href="http://jscrollpane.kelvinluck.com/style/jquery.jscrollpane.css">
<script src="http://jscrollpane.kelvinluck.com/script/jquery.jscrollpane.min.js"></script>
<input id="configurar" type="button" value="Config" />

<div id="dialog-modal" title="Configurações">
    <span class="titulo">Configurações</span>
    <fieldset class="linhaIndicador" style="overflow:hidden;">         
        <legend>Sessão: Meus Indicadores</legend>   
        <ul class="sortable" id="sort1" style="margin-top:-24px;">
            <li id="set_1" class="panel panel-default">Encalhe de produto 90 dias</li>
            <li id="set_2" class="panel panel-default">Ruptura curva A e B</li>
            <li id="set_3" class="panel panel-default">Ruptura nos próximos 10 dias</li>
        </ul>        
    </fieldset>
    
    <fieldset class="linhaIndicador" style="height:232px;">
        <legend>Sessão: Outros Indicadores</legend>   
        
        <div class="linhaIndicadorInterno" >    
        <div class="scroll-pane" >    
            <ul class="sortable" id="sort2" style="margin-top:-24px;">
                <li id="set_4" class="panel panel-default">Categoria x Rentabilidade</li>
                <li id="set_5" class="panel panel-default">Preço de vendas inalterados</li>
                <li id="set_6" class="panel panel-default">Produtos sem preço de custo</li>
                <li id="set_7" class="panel panel-default">Acima do giro mensal</li>
                <li id="set_8" class="panel panel-default">Baixa rentabilidade e vol. vendas</li>
                <li id="set_9" class="panel panel-default">Produtos rentaveis</li>
                <li id="set_10" class="panel panel-default">Acima do giro mensal</li>
                <li id="set_11" class="panel panel-default">Baixa rentabilidade e vol. vendas</li>
                <li id="set_12" class="panel panel-default">Produtos rentaveis</li>
            </ul>  
        </div>     
        </div> 
    </fieldset>
   ...

CSS

.linkPadrao
{
    color: #539ACE;
    font-size: 12px;
    font-weight:bold;
    line-height:16px;
}

a.linkPadrao, a.linkPadrao:link, a.linkPadrao:visited { color: #539ACE; text-decoration:none;}

input[type=radio], input[type=checkbox] {
		display:none;
}

input[type=radio] + label, input[type=checkbox] + label {
  -webkit-border-radius: 10;
  -moz-border-radius: 10;
  border-radius: 6px;
  font-family: Arial;
  color: #ffffff;
  font-size: 20px;
  background: #5299CC;
  padding: 10px 20px 10px 20px;
  text-decoration: none;
  border:none;
  cursor:pointer;
}

input[type=radio]:checked + label, input[type=checkbox]:checked + label{
  -webkit-border-radius: 10;
  -moz-border-radius: 10;
  border-radius: 6px;    
  color: #939393;
  font-size: 20px;
  background: #FFF;
  padding: 9px 20px 9px 20px;
  text-decoration: none;  
  border: solid #D7D7D7 1px;
  cursor:auto;  
}

.titulo 
{
 color :#006A85;    
 font-size : 24px;
 font-weight : bold; 
}

.colunas {width:33%; float:left;}

.panel-default {
  border-color: #E2E2E2;  
  margin:8px;
  margin-bottom: 0px;
  position: relative;   
}

.panel {
  margin-bottom: 0px;
  background-color: #fff;    
  -webkit-box-shadow: 0 1px 1px rgba(0,0,0,.05);
  box-shadow: 0 1px 1px rgba(0,0,0,.05);  
  border-radius: 4px;
  border: 1px solid transparent;
  border-color: #E2E2E2;  
}

.panel-default>.panel-heading {
  color: #333;
  background-color: #E2E2E2;
  border-color: #E2E2E2;   
  font-weight : bold;   
  font-size: 16px;
}

.panel-heading {
  padding: 10px 15px;
  border-bottom: 1px solid transparent;
  border-top-right-radius: 3px;
  border-top-left-radius: 3px;
}

.panel-body 
{
    margin:8px;
    font-size: 14px;
    font-weight : bold;   
    color: #939393;
}

.panel-title {
  margin-top: 0;
  margin-bottom: 0;
  font-size: 18px;
  color: inherit;
}

.panel-footer {  
 position : absolute;
 bottom : 8px; 
 font-size: 18px;
 color: red;
 width:100%;
 right: 8px;
 text-align: right; 
}

.carousel
{    
    margin:...

JavaScript

$("#dialog-modal").dialog({
    autoOpen: false,
    height: 300,
    width: 600,
    modal: true
});

$("#configurar").click(function () {
    $("#dialog-modal").dialog("open");
});

$('.scroll-pane').jScrollPane();