JSFiddle - React, Tailwind, and code Playground

HTML

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>.f 1.9</title>
<link href="site.css" rel="stylesheet" type="text/css" media="all" />
<link href="dot-f.dev.css" rel="stylesheet" type="text/css" media="all" />
</head>
<body>
<!--  start of dot.f form -->
<form method="post" action="#contactform" id="contactform" class="f">
  <input type="hidden" name="contactform" value="1" />
  <fieldset>
  <legend>Demo .f 1.9 </legend>
  <ol>
    <li class="w la1-i2 required" id="pay-select-1-top">
      <p>Zahlungsweise select Zahlungsweise select Zahlungsweise</p>
      <label for="pay-select-1" title="Pflicht">Zahlungsweise<span>*</span>: </label>
      <select name="pay-select-1" id="pay-select-1" size="1" title="Bitte geben Sie die Zahlungsweise an.">
        <option value="">------------------</option>
        <option value="master-c">Mastercard</option>
        <option value="visa">Visa</option>
        <option value="gold-3">Visa Gold</option>
        <option value="silver">Visa Silver</option>
      </select>
    </li>
    <li class="w la12-i34 required" id="pay-select-2-top">
      <label for="pay-select-2" title="erforderlich">Zahlungsweise<span>*</span>: </label>
      <select name="pay-select-2" id="pay-select-2" size="1" title="Bitte geben Sie die Zahlungsweise an.">
        <option value="">------------------</option>
        <option value="master-c">Mastercard</option>
        <option value="visa">Visa</option>
        <option value="gold-3">Visa Gold</option>
        <option value="silver">Visa Silver</option>
      </select>
    </li>
    <li class="w le12-ol4 required" id="pay-radio-top">
      <fieldset>
      <legend title="Pflichtangabe">Zahlungsweise<span>*</span>: </legend>
      <ol>
        <li>
          <input type="radio" name="pay-radio" id="pay-radio-1" value="master-c"  checked="checked" />
          <label for="pay-radio-1">Mastercard</label>
        </li>
       ...

CSS

.f .clear{
    clear                : both;
}

/****************************************/
form.f{
    font-size            : 0.75em;
    width                : 45em;
}

.f{
    color                : #000;
    background-color    : #fff;
}

.f input:focus,
.f text{
    outline                : 0;
}

.f label,
.f select,
.f button,
.f input[type=checkbox],
.f input[type=radio],
.f input[type=button],
.f input[type=submit]{
    cursor                : pointer;
}
/****************************************/


/* e l e m e n t s *********************/
.f fieldset{
    font-size            : 1em;
    padding                : 6px 6px 0 6px;
    margin                : 1em 0 0 0;
    border                : none;
    color                : #000;
    background-color    : #fff;
    /* border            : 1px solid #eee; */
}

.f fieldset legend{
    font-size            : 1.2em;
    font-weight            : bold;
    color                : #000;
    background-color    : #fff;
}

.f label{
    font-size            : 1em;
}

.f input[type=text],
.f input[type=password]{
    width                : 26em;
}

/*  hack IE6 */
* html .f input.text{
    width                : 20em;
}

/* same width as input[type=text] */
.f select{
    width                : 26.4em;
    font-size            : 1em;
    padding                : 1px 0 0 0;
    border                : 1px solid #999;
    background-color    : #fff;
}

.f textarea{
    font-size            : 1em;
}

.f textarea,
.f select,
.f input[type=text],
.f input[type=password]{
    border                : 1px dotted #333;
    padding                : 1px;
    background-color    : #fff;
    color                : #000;
    font-weight            : normal;
    font-size            : 1em;
    font-family            : Arial, Helvetica, sans-serif;
}

/*  hack IE6 dotted is buggy */
* html .f textarea,
* html .f input.text{
    border                : 1px solid #666;
}

.f textarea:focus,
.f input[type=text]:focus,
.f...