JSFiddle - React, Tailwind, and code Playground

by krofik

HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Kontakt_2</title>
<meta name="author" content="Administrator">
<meta name="editor" content="html-editor phase 5">
</head>
<body>
<form action="mailto:[email protected]" method="post" name="Formular" enctype="text/plain">
<table class="punkte" width="680" height="530" align="center" bgcolor="#333333" border="0" cellpadding="0" cellspacing="0" id="panel">
 <tr>
  <td valign="top">

   <table  width="680" border="0px" cellpadding="0" cellspacing="0">
    <tr>
             <td>
         <h1>KONTAKTFORMULAR</h1>
     </td>
    </tr>
   </table>

   <table class="punkte2" width="680" cellpadding="0" cellspacing="0">
    <tr>
     <td class="punkte3" valign="top">
         <P>Anrede*</P>
     </td>
     <td class="punkte4">
      <p class="radio"><input style="margin-left: 10px" required type="radio" name="Herr">Herr<input type="radio" name="Frau">Frau</p></td>
    </tr>

    <tr>
     <td class="punkte3">
         <p>Name*</p>
     </td>
     <td class="punkte4">
         <input class="nachricht" required name="Name" type="text" size="60">
     </td>
    </tr>

    <tr>
     <td class="punkte3">
         <P>Vorname*</P>
     </td>
     <td class="punkte4">
         <input class="nachricht" required name="Vormane" type="text" size="60">
     </td>
    </tr>

    <tr>
     <td class="punkte3">
         <P>Straße, Nr.</P>
     </td>
     <td class="punkte4">
         <input class="nachricht" name="Strasse" type="text" size="47"><input class="nachricht" style="margin-left: 3px" name="Nr" type="text" size="8">
     </td>
    </tr>

    <tr>
     <td class="punkte3">
          <p>PLZ, Ort</p>
     </td>
     <td class="punkte4">
         <input class="nachricht" name="PLZ" type="text" size="10"><input class="nachricht" style="margin-left: 3px" name="Ort" type="text" size="45">
     </td>
    </tr>

    <tr>
     <td class="punkte3">
        ...

CSS

h1{
         color: #B1EE0C;
         font-size: 50px;
         font-weight: normal;
         text-decoration: none;
         font-family: Times, "serif";
         margin-bottom: 25px;
         margin-top: 25px;
         text-align: center;
         }
p{
         font-weight: bolder;
         color: #ffffff;
         font-size: 15px;
         font-weight: bolder;
         text-decoration: none;
         font-family: Arial, "serif";
         margin-left: 10px;
         margin-bottom: 10px;
         margin-right: 10px;
         margin-top: 0px;
         text-align: left;
         }
.p1{
         color: #000000;
         font-size: 15px;
         font-weight: normal;
         text-decoration: none;
         font-family: Arial, "serif";
         margin-left: 10px;
         margin-bottom: 10px;
         margin-right: 10px;
         margin-top: 0px;
         text-align: left;
         line-height: 1;
         }
#panel P {
         padding: 2px;
         margin: 0;
         }
.radio{
         color: #ffffff;
         }
.nachricht{
         background-color: #f0f0f0;
         color: #000000;
         margin-left: 10px;
         }
.absenden{
         margin-left: 10px;
         }
.p2{
         color: ffffff;
         }

.punkte {

         border: 2px dotted #ff0000;
}
.punkte2 {

         border-top: 2px dashed #ff0000;
         border-left: 2px dotted #ff0000;
         border-right: 2px dotted #ff0000;
         border-bottom: 2px dashed #ff0000;
         }

.punkte2 {

         border-top: 0;
         border-left: 0;
         border-right: 0;
         border-bottom: 0;
         }
.punkte3{
         border: 2px dotted #ff0000;
         border-left: 0px dotted #ff0000;
         border-right: 2px;
         border-top: 0px dashed #ff0000;
         border-bottom: 2px dotted #ff0000;
         }
.punkte4{
         border: 2px dotted #ff0000;
         border-left: 0px dotted #ff0000;
         border-right: 0px;
         border-top: 0px dashed #ff0000;
         border-bottom:...