JSFiddle - React, Tailwind, and code Playground
by Rapha Souza
HTML
<script src="//code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<link rel="stylesheet" href="//stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="//stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<div class="fluig-style-guide">
<form name="form" role="form">
<div class="panel panel-default" id="idPanelItem">
<div class="panel-heading">
<h6 class="panel-title"> <a class="collapse-icon up" data-toggle="collapse" data-parent="#accordionThree" href="#collapseThree">Painel de Itens</a> </h6>
</div>
<div id="collapseThree" class="panel">
<div class="panel-body">
<table tablename="adicionarDespesa" noaddbutton="true" class="table table-striped" id="tableItens" customfndelete="deletaRegistro(this)">
<thead>
<tr class="tableHeadRow">
<th></th>
<th class="tableColumn"></th>
</tr>
</thead>
<tbody>
<tr style="display:none" detail="true" detailname="adicionarDespesa">
<td class="fs-v-align-middle">
<div class="row">
<div class="form-group col-md-6">
<label>Código Grupo Produto</label>
<input type="text" class="form-control" name="codGrupoProd" id="codGrupoProd" readonly>
</div>
<div class="form-field">
<div class="form-input">
<div class="form-group col-md-6">
<label>Descrição do Grupo</label>
<input type="text" id="descricaoGrupo" name="descricaoGrupo"...
CSS
.row {
background: #f8f9fa;
margin-top: 20px;
}
.col {
border: solid 1px #6c757d;
padding: 10px;
}