JSFiddle - React, Tailwind, and code Playground

by megaadriano

HTML

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<div class="d-flex flex-wrap w-100 no-gutters " id="mydiv">
  <div class="item d-flex justify-content-between flex-column" style="width: 86%; border: none; padding: 0cm 1.5pt; height: unset;">
    <h5 style="color:red" ng-show="fcadastro.$error.required.length >0 && cadastro.ID_RELATORIO">{{fcadastro.$error.required.length}} {{fcadastro.$error.required.length > 1?'campos não preenchidos':'campo não preenchido'}}</h5>
    <span style="font-size:18.0pt;font-weight:bold;font-family:Calibri Light&quot;,sans-serif;">
      LEVANTAMENTO DE CAMPO | VASO ou PERMUTADOR
    </span>
  </div>
  <div class="item d-flex justify-content-between flex-column" style="width: 14%;padding: 0cm 1.5pt; height: unset;">
    <img src="Imagen/image001.png" alt="Logotipo-SGS">
  </div>
  <h6 class="item d-flex  flex-wrap" style="width: 100%;padding: 0cm 1.5pt; height: unset;text-align:left;font-size">
    CAMPOS SISTÊMICOS ANTERIORES
  </h6>
  <div class="item d-flex justify-content-between flex-column" style="width: 50%; padding: 0cm 1.5pt; height: unset;">

  </div>
  <div class="item d-flex justify-content-between flex-column" style="width: 25%; padding: 0cm 1.5pt; height: unset;">
    <label for="ENTRELACADO">ENTRELAÇADO/RELACIONADO</label>
    <div id="ENTRELACADO" style="width:100%;font-size:20px !important;font-weight:bold;color:{{cadastro.ID_ATIVO!=0 && cadastro.ID_ATIVO?'green':'red'}}">
      {{cadastro.ENTRELACADO}}
    </div>
  </div>
  <div class="item d-flex justify-content-between flex-column" style="visibility: hidden;width:25%;height:50px !important; padding: 0cm 1.5pt; height: unset;background-color:orange">
    <label for="RELACIONA_TAG" style="margin-bottom:10px;width:100%;text-align:right">RELACIONA...

CSS

.jumbotron {
    padding: 0.5rem 1rem 0rem 1rem !important;
}

label, div, input, select {
    font-size: 12px !important;
}

@media only screen and (min-width: 600px) {
    . {
        max-width: 100% !important;
        width: 100% !important;
    }
}


@media only screen and (min-width: 768px) {
    . {
        max-width: 19.9% !important;
        width: 19.9% !important;
    }
}
.cabecalho {
    padding: 0cm 3.5pt;
    height: unset;
    font-weight:bold;
}
input#TAG {
    font-size: 14px !important;
    font-weight: bold;
    color: darkorange;
}


input#DESC_EQUIPAMENTO {
    font-size: 14px !important;
    font-weight: bold;
    color: darkorange !important;
}

label[for="TAG"] {
    font-size: 14px !important;
    font-weight: bold;
    color: black;
}
label[for="DESC_EQUIPAMENTO"] {
    font-size: 14px !important;
    font-weight: bold;
    color: black
}
input:not(#TAG):not(#DESC_EQUIPAMENTO) {
    color: black !important;
    font-weight: 500;
}
#EXCLUIR {
    color: red !important;
}
label[for="EXCLUIR"] {
    font-size: 14px !important;
    font-weight: bold;
    color: red !important;
}
body {
    background-color: #e9ecef;
}

h6 {
    font-size: 17px;
    font-weight: bold;
    color: black;
    border: 1px solid gray;
    background-color: lightgray;
}

.formularioDv {
    width: 760px !important;
}

.pdf-div {
    width: 760px;
}

iframe {
    width: 100%;
    overflow-y: auto;
    height: 100%;
}

.flexbox {
    display: flex;
    flex-wrap: wrap;
}

.cadastro-container {
    width: 2399px;
}

.item {
    text-align: center
}

@media only screen and (max-width: 700px) {
    .item {
        width: 99% !important;
    }

    .cadastro-container {
        width: 100% !important;
        padding-left: 1px;
        padding-right: 3px;
    }
}

JavaScript

var temp = '<div class="item d-flex flex-wrap  " style="width: 25%;  padding: 0cm 1.5pt; height: unset;"> \r\n'+
'    <label for="NR_13" style="height:20px;width:100%">#LABEL#</label> \r\n'+
'       <div style="width:50%;height:20px" > \r\n'+
'          <input type="checkbox"  style="height:20px;" name="#COLUNA#" class="position-static" id="#COLUNA#_PO"  ng-model="cadastro.#COLUNA#_PO" parse-int ng-true-value="1" ng-false-value="0" required/> \r\n'+
'        </div> \r\n'+
'        <div style="width:50%;height:20px" ><input type="checkbox"  style="height:20px" class="position-static"  name="#COLUNA#" id="#COLUNA#_NP" ng-model="cadastro.#COLUNA#_NP" parse-int ng-true-value="1" ng-false-value="0" required/> \r\n'+
'        </div> \r\n'+
'        <div class="w-50" style="height:20px" ><label >Possui</label></div> \r\n'+
'        <div class="w-50" style="height:20px" ><label >Não Possui</label></div> \r\n'+
'       \r\n'+
' \r\n'+
'  </div>\r\n';
var items = [{COLUNA:'ESP_TUB',LABEL:'Especificação Aplicável a Tubulação'},{COLUNA:'FLUX_ENG',LABEL:'Fluxograma de Engenharia'},
	{COLUNA:'LIVRO_REG',LABEL:'Livro de Registro de Segurança'},{COLUNA:'DISP_SEG',LABEL:'Dispositivo de Segurança'},
  {COLUNA:'CERT_SEG',LABEL:'Certificado de Calibração do Dispositivo de Segurança'},{COLUNA:'IND_PRESSAO',LABEL:'Indicador de Pressão'},{COLUNA:'CAL_PRESSAO',LABEL:'Calibração do Indicador de Pressão'}
]
var codigo = '';
for(var i=0;i<items.length;i++){
	codigo += temp.replace(/#COLUNA#/gi,items[i].COLUNA).replace(/#LABEL#/gi,items[i].LABEL)
}		
console.log(codigo);
codigo = '';
var tmp1 ='    <div class="item d-flex justify-content-between flex-column" style="width: 15%; padding: 0cm 3.5pt; height: unset;"> \r\n'+
'        <input type="text" maxlength="10" id="RECO_ITEM_#"  name="RECO_ITEM_#" class="form-control w-100  {{fcadastro.RECO_ITEM_#.$error.required?\'is-invalid\':\'\'}}" ng-model="cadastro.RECO_ITEM_#" required> \r\n'+
'    </div> \r\n'+
'    <div class="item d-flex...