JSFiddle - React, Tailwind, and code Playground

by Luca Zanolini

HTML

<body>
<div id="questionario"><table>
	<tr>
		<td rowspan="2" class="logo"><img class="logoimg" src="images/logo_APRIE.png" alt="logo aprie" /></td>
		<td colspan="3" class="verde altro">Questionario rivolto ai gestori di
			impianti di produzione di energia <br>alimentati con fonti
			rinnovabili, anche in modo non esclusivo
		</td>
	</tr>

	<tr>
		<td class="annorif"><b>Anno di riferimento:</b></td>
		<td class="giallo anno">2015</td>
		<td class="altro">&nbsp;</td>
	</tr>

	<tr>
		<td colspan="4" class="altro"><b>I dati sono dovuti ai termini del comma  dell'art.
				 della LEGGE PROVINCIALE :</b><br> <br> <i>I
				soggetti pubblici e privati che esercitano sul territorio
				provinciale attività energetiche soggette a concessione,
				autorizzazione o altro titolo comunque denominato, o che realizzano
				progetti finanziati con contributi provinciali, devono fornire
				all'osservatorio provinciale dell'energia le informazioni, i dati e
				i documenti, se richiesti, per l'esercizio dei compiti e delle
				attività previste da questa legge.</i><br> <br> <b>e del punto 6
				della Delibera della Giunta Provinciale <br>
				<br> Per eventuali dubbi o chiarimenti si prega di contattare presso
				john doe (0123-456789 -
				john.doe@prova.it)
		</b></td>
	</tr>

	<tr>
		<td colspan="4" class="altro"><b>Avvertenze:</b></td>
	</tr>

	<tr>
		<td colspan="4" class="altro">- il questionario è rivolto ai gestori di impianti di
			produzione di energia (inclusi gli impianti di teleriscaldamento) che
			utilizzano anche, o esclusivamente, fonti rinnovabili.</td>
	</tr>

	<tr>
		<td colspan="4" class="altro">- nel caso una società gestisca più impianti o un
			sistema complesso composto da più reti</td>
	</tr>

	<tr>
		<td colspan="2" class="giallo altro"><b>- compilare solo le celle di colore
				giallo compatibili con la tipologia d'impianto</b></td>
		<td colspan="2" class="required altro"><b>- I campi con bordo di colore
						blue sono...

CSS

#questionario{
	font-family:arial;
	background-color:#808080;
	font-size: 0.7em;
	width:100%;
    /*overflow: Auto;
	margin-bottom: 30px;
	height:90vh;
    scrollbar-base-color: #000000;
    scrollbar-arrow-color: #CCCCCC;
    scrollbar-track-color: #CCCCCC;*/
}

/*Simulazione Tabella via div*/
#questionario #tree{
	margin:10px;
	float: left;
	width: 500px;
}

#salvatutto{
	margin: 5px;
}
.table
{
	display:table;
	border-collapse:collapse;
	border-spacing:2px;
}
.thead
{
	display:table-header-group;
	color:white;
	font-weight:bold;
	background-color:#646464;
}
.tbody
{
	display:table-row-group;
}
.tr
{
	display:table-row;
}
.td
{
	display:table-cell;
	border:0px solid black;
	padding:0px;
}

/*  ------------------ fine -------------- */

/* --------- layout tabelle -------------*/
col.nome_riga{
	width: 3em;
}
col.desc_riga{
	width: 20em;
}
col.normale{
	width: auto;
}
col.ultima{
	width: 60em;
}
/* -------------------------------*/
#questionario ol{
	list-style-type: lower-alpha;
}
.allsin li{
	margin:0;
	padding-left:0;
	text-align:left;

}
.allsin{
	margin:0;
	padding-left:1,5em;
}

button img{
	height: 15px;
}

button {
	border-radius: 5px;
}

.modifica {
    width: 45px;
    height: 45px;
    background-image: url(../images/success.png);
    background-size:90%;
	background-position: center;
    background-repeat: no-repeat;
    font-size:0%;
    line-height: 0;


}

.annulla {
    width: 45px;
    height: 45px;
    background-image: url(../images/delete.png);
    background-size:90%;
    background-position: center;
    background-repeat: no-repeat;
    font-size:0%;
    line-height: 0;
}

.contenitore{
	display:block;
	margin: 2px;
}
#InsInq .contenitore {
	display:inline-block;
}
.btmod{
	display:none;
}
.error{
	background:red !important;
	color:#FFF !important
	padding:1em;
	font-size:1em;
}
.evidenziato {
  border: red 2px solid;
}

.required{
	border: blue 2px solid;
}
#questionario table {
	width:100%;
	background-color:white;
}

#questionario...