JSFiddle - React, Tailwind, and code Playground

by megaadriano

HTML

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<div ng-app="myApp">

   <div   ng-controller="myCtrl" >
   <fieldset class="form-group" >
      <div class="form-group">
         <div class="form-check form-check-inline">
            <input class="form-check-input" type="checkbox" id="AUTORIZA_ENVIO" ng-model="moviAberto.AUTORIZA_ENVIO" parse-int="" ng-true-value="1" ng-false-value="0">
            <label class="form-check-label" for="AUTORIZA_ENVIO">
            Autoriza Envio
            </label>
         </div>
      </div>
      <div class="form-group">
         <label class="col-form-label labelMargin" for="ALUNO">Aluno(a)</label>
         <select class="form-control" id="ALUNO" placeholder="ALUNO" ng-model="moviAberto.ID_ALUNO" ng-options="aluno.ID_ALUNO as aluno.NOME for aluno in alunos" disabled>                                     </select>
      </div>
      <div class="form-group">
         <label class="col-form-label labelMargin" for="DATA">Data</label>
         <input type="text" class="form-control" id="DATA" placeholder="DATA" value="{{moviAberto.DATA | date:'MM/dd/yyyy'}}" disabled />
      </div>
      <div class="form-group">
         <label class="col-form-label labelMargin" for="TURMA">Turma</label>
         <select class="form-control" id="TURMA" placeholder="TURMA" ng-model="moviAberto.ID_TURMA" ng-options="turma.ID_TURMA as turma.TURMA for turma in turmas" disabled>                  </select>
      </div>
      <div class="form-group">
         <label class="col-form-label labelMargin destLabel" for="ALIMENTACAO">Alimentação</label>
         <div id="ALIMENTACAO" >
            <div class="form-check form-check-inline">
               <input class="form-check-input" type="checkbox" id="ALI_MAT_LANCHE_MANHA" ng-model="moviAberto.ALI_MAT_LANCHE_MANHA" parse-int="" ng-true-value="1" ng-false-value="0">
               <label class="form-check-label" for="ALI_MAT_LANCHE_MANHA">
            ...

CSS

* {
    -webkit-tap-highlight-color: rgba(0,0,0,0);
}

body {
 
    background-color:#FFFFFF;
   
}
.margens{
  margin-left:5px;
  margin-right:5px;
  margin-top:5px;
  margin-bottom:5px;
}
.img_centro{
    text-align:center;
    margin-left:auto;
    margin-right:auto;
}
.bt_mtop{
    margin-top:10px;
}
.app {
    background: url(../images/cordova.png) no-repeat center top;
    position: absolute;
    left: 50%;
    top: 50%;
    height: 50px;
    width: 225px;
    text-align: center;
    padding: 180px 0px 0px 0px;
    margin: -115px 0px 0px -112px;
}

@media screen and (min-aspect-ratio: 1/1) and (min-width:400px) {
    .app {
        background-position:left center;
        padding:75px 0px 75px 170px;
        margin:-90px 0px 0px -198px;
    }
}

h1 {
    font-size:24px;
    font-weight:normal;
    margin:0px;
    overflow:visible;
    padding:0px;
    text-align:center;
}

.event {
    border-radius:4px;
    -webkit-border-radius:4px;
    color:#FFFFFF;
    font-size:12px;
    margin:0px 30px;
    padding:2px 0px;
}

.event.listening {
    background-color:#333333;
    display:block;
}

.event.received {
    background-color:#4B946A;
    display:none;
}

@keyframes fade {
    from { opacity: 1.0; }
    50% { opacity: 0.4; }
    to { opacity: 1.0; }
}
 
@-webkit-keyframes fade {
    from { opacity: 1.0; }
    50% { opacity: 0.4; }
    to { opacity: 1.0; }
}
 
.blink {
    animation:fade 3000ms infinite;
    -webkit-animation:fade 3000ms infinite;
}
.loginDiv {
    margin-top: 20vh;
}
.centerComp {
    width: 96%;
    margin-left: auto;
    margin-right: auto;
}
.btLogin{
    margin-top:10px !important;
}
.loader {
    border: 16px solid #f3f3f3;
    border-radius: 50%;
    border-top: 16px solid #3498db;
    width: 50px;
    height: 50px;
    -webkit-animation: spin 1s linear infinite;
    animation: spin 1s linear infinite;
}

@-webkit-keyframes spin {
    0% {
        -webkit-transform: rotate(0deg);
    }

    100% {
        -webkit-transform:...

JavaScript

var app = angular.module('myApp', []);
angular.module("myApp").directive('parseInt', [function () {
    return {
        restrict: 'A',
        require: 'ngModel',
        link: function (scope, elem, attrs, controller) {
            controller.$formatters.push(function (modelValue) {
                console.log('model', modelValue, typeof modelValue);
                return '' + modelValue;
            });

            controller.$parsers.push(function (viewValue) {
                console.log('view', viewValue, typeof viewValue);
                return parseInt(viewValue, 10);
            });
        }
    }
}])
function myCtrl($scope) {
   $scope.moviAberto={ID_ALUNO:1, DATA:new Date(),ALI_BER_FRUTA_01:1};
}