JSFiddle - React, Tailwind, and code Playground

by Daniele Cedro

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<form class="form-inline container" id="CMS_FORM" enctype="multipart/form-data" method="post" action="default.aspx?3*0*1" role="navigation">
  <input type="hidden" name="CMS_HiddenTableSort" id="CMS_HiddenTableSort" value="" />
  <div id="CMS_H1">
    <div class="resetfloat"></div>
  </div>
  <div id="CMS_Logo">
    <div class="resetfloat"></div>
  </div>
  <div id="CMS_H2">
    <div class="resetfloat"></div>
  </div>
  <div class="text-" id="CMS_Menu">
    <div class="resetfloat"></div>
  </div>
  <div class="row" id="CMS_Contenuti">
    <div class="col-xs-12" id="CMS_ColCx">
      <div id="CMS_Dati">
        <h1>Attestazioni OIV o struttura analoga</h1>
        <h1>Attestazione dell'OIV o di altra struttura analoga nell'assolvimento degli obblighi di pubblicazione</h1>
        <!-- MODULO SUPERIORE -->
        <div class="row"> 
          <!-- MODULO DI RICERCA -->
          <div class="col-sm-6">
            <fieldset>
              <legend>Ricerca</legend>
              <label for="ParolaDaCercare" class="formlabel label_ParolaDaCercare">Parola da Cercare</label>
              <br />
              <div class="form-group inner-addon left-addon">
                  <span aria-hidden="true" class="glyphicon glyphicon-search"></span>
                  <input class="form-control" name="ParolaDaCercare" type="text" id="ParolaDaCercare" title="Lunghezza Massima: 50 Caratteri" value=""  placeholder="cerca" />
              </div>
              <input class="btn btn-primary" type="submit" name="filter" value="Cerca" id="filter" />
            </fieldset>
          </div>
          <!-- END MODULO DI RICERCA --> 
          <!-- MODULO DI DOWNLOAD -->
          <div class="col-sm-offset-1 col-sm-5">
            <fieldset>
              <legend>Download</legend>
              <ul...

CSS

#ParolaDaCercare {min-width:270px;}
a.xls, a.xml, a.csv, a.pdf, a.doc, a.docx, a.ppt {
    padding-left:30px;
    background-image: url("http://beta.consulenzait.it/risorse/sprite_ico-doc.png");
    background-repeat: no-repeat;
    min-height:30px;
    display: block;
}
a.xls {
    background-position: 0 0
}
a.xml {
    background-position: 0 -30px;
}
a.csv {
    background-position: 0 -60px;
}
a.pdf {
    background-position: 0 -90px;
}
a.doc, a.docx {
    background-position: 0 -120px;
}
a.ppt {
   background-position: 0 -150px; 
}
.table th {
    min-width: 150px;
    vertical-align: middle !important;
}

.inner-addon { 
    position: relative; 
}

.inner-addon .glyphicon {
  position: absolute;
  padding: 10px;
}

.left-addon .glyphicon {
    left: 0;
}
.right-addon .glyphicon {
    right: 0;
}

.left-addon input {
    padding-left: 30px;
}
.right-addon input {
    padding-right: 30px;
}
bs-callout + .bs-callout {
    margin-top: -5px;
}

.bs-callout {
    -moz-border-bottom-colors: none;
    -moz-border-left-colors: none;
    -moz-border-right-colors: none;
    -moz-border-top-colors: none;
    border-color: #eee;
    border-image: none;
    border-radius: 3px;
    border-style: solid;
    border-width: 1px 1px 1px 5px;
}
.bs-callout-info {
    border-left-color: #1b809e;
}