JSFiddle - React, Tailwind, and code Playground

by Akram kamal

HTML

<script src="http://jquery.bassistance.de/validate/jquery.validate.js"></script>
<form class="emailformular" method="post" action="">
        <fieldset>
            <span class="einteilung">
                <label for="name" >Name/ Firma:*</label>
                <input type="text" class="required" minlength="1" name="name" id="name" />
                <p class="hidden">Bitte Name eingeben</p>
            </span>
            <span class="einteilung">
                <label for="vorname">Vorname:</label>
                <input type="text" name="vorname" id="vorname" />
                <p class="hidden">Bitte geben Sie Ihren Vornamen ein.</p>
            </span>
            <span class="einteilung">
                <label for="email">E-Mail:*</label>
                <input type="email" name="email" id="email" />
                <p class="hidden">Bitte geben Sie Ihre vollständige E-Mailadresse ein.</p>
            </span>
            <span class="einteilung">
                <label for="strasse">Strasse:</label>
                <input type="text" name="strasse" id="strasse" />
                <p class="hidden">Bitte geben Sie Ihren Strassennamen ein.</p>
            </span>
            <span class="einteilung">
                <label for="plz">PLZ&nbsp;-&nbsp;Ort:</label>
                <input type="text" name="plz" id="plz" /><input type="text" name="ort" id="ort" />
                <p class="hidden">Bitte geben Sie Ihren PLZ und Ort ein.</p>
            </span>
            <span class="einteilung">
                <label for="telefon">Telefon:</label>
                <input type="text" name="telefon" id="telefon" />
                <p class="hidden">Bitte geben Sie eine Rückrufnummer an.</p>
            </span>
            <span class="einteilung">
                <select name="betreff" style="margin-top: 3px;">
                    <option>Anfrage</option>
                    <option>Rückruf</option>
                    <option>Katalog</option>
               ...

CSS

body{font-family:Verdana, Arial, Helvetica, sans-serif;font-weight:lighter; line-height: 1.5em; letter-spacing:0.1em; font-size: 0.6em;}
#back_body {background:../bilder/gras_4.jpg; background-repeat:repeat;}
reg_body{font-family:Arial, Tahoma;font-size:12px;}
#window{background-position:bottom;background-repeat:no-repeat;background-color:#FFF193;}
#rahmen{position:absolute;top:0;left:50%;width:800px;margin-left:-461px;overflow:visible;padding-bottom:120px;}
td.menue{background:url(../grafik/schattenlinks.gif) #710000 right;background-repeat:repeat-y;width:160px;margin:0;padding:0;}
div.menue_ausrichtung{position:absolute;top:55px;left:1px;}
td.schatten_rechts_neu{background-image:url(../grafik/schattenrechts.png);}
td.schatten_rechts{background-image:url(../grafik/schatten.gif);}
li.auf,ul.auf{margin-left:20px;list-style-image:url(../grafik/auf.gif);}
li.auf_bo{list-style-image:url(../grafik/auf.gif);padding-left:1px;margin-left:20px;}
h1,h2,h3,h4{font-weight:700;font-size:1.3em;text-shadow: 2px 2px 2px #ccc;}
h1{color:#000;margin:2px;}
h3{font-weight:700;color:#900;margin-bottom:0;}
h4{color:#FFF193;font-size:18px;}
h5{font-size:16px;margin:-10px 0 0;}
ul,li{list-style-type:none;margin:0;padding:0;}
a.link,a.link:hover{font-size:11px;font-weight:700;color:#900;margin:2px 0 5px 5px;}
a.link:hover{color:#C00;}
table{border-collapse:collapse;}
ul#menue li a{height:22px;width:159px;line-height:16px;text-align:left;font-family:Arial, Tahoma;font-size:1.5em;font-weight:300; border-top:2px solid #900;display:block;color:#fff193;text-decoration:underline;background:url(../grafik/navi_button_2.gif);background-repeat:no-repeat;margin:0 1px;padding:2px;}
.unten_rahmen{margin-top:-3px;}
ul#menue{width:160px;margin:45px 0 0;}
ul#menue li a:focus + ul.submenue{color:#000;}
ul#submenue1 li a,ul#submenue2 li a,ul#submenue3 li a,ul#submenue4 li a,ul#submenue5 li a,ul#submenue6 li a,ul#submenue7 li a,ul#submenue8 li a,ul#submenue9 li a,ul#submenue10 li a,ul#submenue11 li...

JavaScript

jQuery.noConflict();
jQuery(document).ready(function() {
    jQuery('.checkbox').change(function() {
        if (jQuery(this).is(':checked')) {
            jQuery(this).prev('label').addClass('labelactive');
        } else {
            jQuery(this).prev('label').removeClass('labelactive');
        }
    });
});
jQuery.noConflict();
jQuery(document).ready(function() {
    jQuery('.emailformular').validate({
        rules: {
            name: {
                required: true
            },
            email: {
                required: true,
                email: true
            }
        },
        messages: {
            name: {
                required: 'Bitte geben Sie einen Namen an'
            },
            email: {
                required: 'Bitte geben Sie eine gültige E-Mailadresse an'
            }
        }
    });
});