JSFiddle - React, Tailwind, and code Playground

by Philippe Gioseffi

HTML

<form class='content' novalidate [formGroup]="edicaoForm">
	<div class="k-i-loading" *ngIf="loading"></div>
	<div class="row"></div>

	<div class="clear-fix mt-4"></div>
	<div class="row">
		<div class="col-sm-12">
			<div class="col-sm-4 pull-left">
				<label [for]="logomarca">Logo</label>
				<kendo-uploaddropzone zoneId="myZone">Somente arquivos do tipo JPG, JPEG, PNG e SVG s&atilde;o permitidos.</kendo-uploaddropzone>
				<kendo-upload zoneId="myZone" [saveField]="logomarca" [saveUrl]="uploadLogoURL" [restrictions]="restrictions" #logomarca [multiple]="false"
					[autoUpload]="true" formControlName="logomarca">
				<kendo-upload-messages select="Selecionar arquivo"
					uploadSelectedFiles="Enviar arquivo"
					clearSelectedFiles="Cancelar sele&ccedil;&atilde;o de arquivo"
					dropFilesHere="Solte arquivos aqui para carregar"
					invalidFileExtension="Tipo de arquivo n&atilde;o permitido."
					remove="Remover" cancel="Cancelar"
					fileStatusUploaded="Arquivo carregado com sucesso."
					externalDropFilesHere="Arraste e solte arquivos aqui para carregar"
					resume="Concluir" pause="Pausar"
					headerStatusUploaded="Conclu&iacute;do"
					headerStatusUploading="Carregando..." headerStatusPaused="Pausado"
					fileStatusFailed="Falha ao carregar arquivo."></kendo-upload-messages>
				</kendo-upload>
			</div>

			<div class="row">
				<div class="col-sm-6"
					[ngClass]="{'has-error': displayMessages.empresaId }">
					<label>Empresa</label>
					<div>
						<kendo-combobox [data]="empresasData" [allowCustom]="false" [placeholder]="'Empresa'" [textField]="'nomeFantasia'" [valueField]="'gid'"
							[filterable]="true" class="w-100" formControlName="empresaId" (filterChange)="empresaHandleFilter($event)" (open)="empresaHandleOpen()" required
							[suggest]="true" [valuePrimitive]="true" (blur)="blur('empresaId')"></kendo-combobox>
						<span class="text-danger" *ngIf="displayMessages.empresaId">
							<p...