JSFiddle - React, Tailwind, and code Playground

by swordf1zh

HTML

<div>
    <div id="form_container">
        	<h1><a>Rick's</a></h1>

        <form action="/formbuilder/view.php" method="post" class="appnitro" id="form_586484">
            <div class="form_description">
                	<h2>Rick's</h2>

                <p>Nuevo pedido</p>
            </div>
            <ul>
                <div class="left_column">
                    <li id="li_3" class="">
                        <label for="element_3" class="description">1. CARNES</label>
                        <div class="float-left c-box-wrapper">
                            <input type="checkbox" value="1" class="element checkbox" name="element_3_1"
                            id="car_reg"></input>
                            <label for="element_3_1" class="choice">Regular</label>
                        </div>
                        <div class="float-left c-box-wrapper">
                            <input type="text" value="" maxlength="1" class="element text small" name="element_1"
                            id="car_reg_cant"></input>
                        </div>
                        <div class="clear"></div>
                        <div class="float-left c-box-wrapper">
                            <input type="checkbox" value="1" class="element checkbox" name="element_3_2"
                            id="car_car"></input>
                            <label for="element_3_2" class="choice">Caribeña</label>
                        </div>
                        <div class="float-left c-box-wrapper">
                            <input type="text" value="" maxlength="1" class="element text small" name="element_2"
                            id="car_car_can"></input>
                        </div>
                        <div class="clear"></div>
                    </li>
                    <li id="li_5">
                        <label for="element_5" class="description">2. CUBIERTA</label>	<span>
			<input type="radio" value="1" class="element radio"...

CSS

.left_column {
    width:50%;
    float:left;
}
.right_column {
    width:50%;
    float:left;
}
/* Use this class for borders/padding/etc to 
    position the text elements way you like */
 .t-area-wrapper {
}
/* Use this class for borders/padding/etc to
   position the checkboxes the way you like */
 .c-box-wrapper {
     width: 80px;
}
.float-left {
    float: left;
}
body {
    background: none repeat scroll 0 0 #990000;
    font-family:"Lucida Grande", Tahoma, Arial, Verdana, sans-serif;
    font-size: small;
    margin: 8px 0 16px;
    text-align: center;
}
#form_container {
    background: none repeat scroll 0 0 #FFFFFF;
    margin: 0 auto;
    text-align: left;
    width: 640px;
}
#top {
    display: block;
    height: 10px;
    margin: 10px auto 0;
    width: 650px;
}
#footer {
    clear: both;
    color: #999999;
    font-size: 85%;
    padding-bottom: 15px;
    text-align: center;
    width: 640px;
}
#footer a {
    border-bottom: 1px dotted #999999;
    color: #999999;
    text-decoration: none;
}
#bottom {
    display: block;
    height: 10px;
    margin: 0 auto;
    width: 650px;
}
form.appnitro {
    margin: 20px 20px 0;
    padding: 0 0 20px;
}
h1 {
    background-color: #CC0000;
    margin: 0;
    min-height: 0;
    padding: 0;
    text-decoration: none;
    text-indent: -8000px;
}
h1 a {
    display: block;
    height: 100%;
    min-height: 40px;
    overflow: hidden;
}
img {
    border: medium none;
}
.appnitro {
    font-family: Lucida Grande, Tahoma, Arial, Verdana, sans-serif;
    font-size: small;
}
.appnitro li {
    width: 90%;
}
form ul {
    font-size: 100%;
    list-style-type: none;
    margin: 0;
    padding: 0;
    width: 100%;
}
form li {
    display: block;
    margin: 0;
    padding: 4px 5px 2px 9px;
    position: relative;
}
form li:after {
    clear: both;
    content:".";
    display: block;
    height: 0;
    visibility: hidden;
}
.buttons:after {
    clear: both;
    content:".";
    display: block;
    height: 0;
   ...