JSFiddle - React, Tailwind, and code Playground

by ernestohs

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">       

<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Example Form with semantic-form.css</title>
    <meta name="author" content="Patrick McElhaney">                
  <link rel="stylesheet" href="semantic-form.css" type="text/css">
</head>
<body>
  
<form class="semantic">
  
  <fieldset>
    
    <legend>Contact Information</legend>
 
    <div>
      <label for="first_name">First name</label>
      <input type="text" name="first_name" value="" size="30" id="first_name">
    </div> 
  
    <div>
      <label for="last_name">Last name</label>
      <input type="text" name="last_name" value="" size="30" id="last_name">
    </div>
    
    <div>
      <label for="last_name">Email Address</label>
      <input type="text" name="last_name" value="" size="30" id="last_name" class="error">
      <label class="error">Please enter a valid email address (validation example)</label>
    </div>     
  
    <div>
      <label for="phone_number">Phone number</label>
      <input type="text" name="phone_number" value="" size="15" id="phone_number"> 
      <label class="after">(xxx) xxx-xxxx</label>
    </div>
  
  </fieldset>   
  
  
  <fieldset>    
    
    <legend>Miscellaneous Fields</legend>          
    
    <div>
      <label>How did you hear about us?</label>
      <ul>
        <li><input type="checkbox" name="source" value="radio"    id="source_radio"   ><label for="source_radio"   >Radio</label></li>
        <li><input type="checkbox" name="source" value="internet" id="source_internet"><label for="source_internet">Internet</label></li>
        <li><input type="checkbox" name="source" value="friend"   id="source_friend"  ><label for="source_friend"  >Word of mouth</label></li>
      </ul>
    </div>
    
    <div>
      <label>Sex</label>
      <ul>
        <li><input type="radio" name="sex" value="Male"       ...

CSS

form.semantic fieldset
{
    clear: both;
    margin: 1em 0 0 0;
    padding: 10px;
    overflow: auto;
    background-color: #f8f8f8;
    border: 1px solid #888;
}

form.semantic legend
{
    font-weight: bold;
}

form.semantic div
{
    clear: both;
    margin: 0;
    padding: 0.5em 0 0 0;
    overflow: visible;
}


form.semantic label 
{
    display: block;
    float: left;
    width: 120px;
    text-align: right;
    padding: 2px 1ex 6px 0;
    vertical-align: baseline;
}
          
form.semantic label.after 
{
    width: auto;
    text-align: left; 
    display: inline; 
    float: none;
}

form.semantic label.long 
{
    clear: both;
    width: auto;
    text-align: left;
    float: none;
}

form.semantic input
, form.semantic select
, form.semantic textarea
{
    float: left;
}     

form.semantic input[type=radio]
, form.semantic input[type=checkbox]
{
    vertical-align: text-bottom;
}

form.semantic ul {
    list-style-type: none; 
    float: left;
    padding: 0;
    margin: 0;
}

form.semantic li {
    clear: both;
    padding: 0.2em 0;
}

form.semantic li label {
    width: auto;
    text-align: left;
    padding: 0;
}   

form.semantic div.field-row 
{
    clear: none;
    float: left;
    margin: 0;
    padding: 0;
    overflow: visible;
}

form.semantic div.field-row *
{
    float: none;
    display: inline;
}

form.semantic .button-row
{
    text-align: right;
}

form.semantic .button-row input
{
    float: none;
}

form.semantic div.long label 
{
    width: auto;
    text-align: left;  
    float: none;
}

form.semantic div.long textarea 
{
    width: 100%;
}

/* Errors -- for use with JQuery Validate, etc. */

form.semantic input.error
, form.semantic select.error
, form.semantic textarea.error
{
    background-color: #77002a;
    color: white;
}                                                

form.semantic label.error
{
    width: auto;
    color: #77002a;
    text-align: left;
}

JavaScript

$(function() {
        $( "input:submit, a, button").button();
    });