JSFiddle - React, Tailwind, and code Playground

by roberkules

HTML

<div id="wrapper" align="center">

  <h1>Question 1 of 4</h1>
  <h2>Choose which one of these you prefer, for 
  the project: Cars</h2>

  <form name="input" action="submit.php?id=2" 
        id="form" method="post">
  <div class="row">
    <div class="blue1">
      <b>Color</b>: Black<br /><b>Price</b>: $80,000<br /><b>Top Speed</b>: 120 MPH<br /><br />Choice 1      <input name="chosen" value="0" type="radio"
      checked/> <br />
    </div>

    <div class="blue1">
      <b>Color</b>: Silver<br /><b>Price</b>: $120,000<br /><b>Top Speed</b>: 200 MPH<br /><br />Choice 2      <input name="chosen" value="1" type="radio"> <br>
    </div>

    <div class="blue1">
      <b>Color</b>: Red<br /><b>Price</b>: $120,000<br /><b>Top Speed</b>: 200 MPH<br /><br />Choice 3      <input name="chosen" value="2" type="radio"> <br>
    </div>
  </div>

  
  <input type="hidden" name="project" value="Cars" />
  <input type="hidden" name="id" value="2" />
  <input type="hidden" name="vals" value="Color=Black&Price=$80,000&Top Speed=120 MPH&|Color=Silver&Price=$120,000&Top Speed=200 MPH&|Color=Red&Price=$120,000&Top Speed=200 MPH&|" />
  
      <div class="row">
      <input name="vals" value="Color=Black&Price=$80,000&Top Speed=120 MPH&|Color=Silver&Price=$120,000&Top Speed=200 MPH&|Color=Red&Price=$120,000&Top Speed=200 MPH&|" type="hidden">
      <div id="button"><a href="javascript: submitform();">Submit</a></div>
    </div>
    
  </form>
</div>

CSS

h1 {
    font-size:34px;
    font-family:Georgia, "Times New Roman", Times, serif;
    font-weight:lighter;
}

h2 {
    font-size:22px;
    font-family:Georgia, "Times New Roman", Times, serif;
    font-weight:lighter;
}

#wrapper {
    float:left;
    width:610px;
    padding: 10px;
}

.row {
    width:100%;
    float:left;
    margin: 0 auto;
}

.blue1
{
    float:left;
    display:block;
    width:150px;
    margin: 10px;
    padding: 15px;
    text-align: left;
    border: 1px dashed #0060BF;
    font-size: 12px;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    line-height:14px;
    background-color: #D7F5FF;
}

#button{
    margin-top:20px;
    font-family:"Lucida Grande", Tahoma, Arial, Verdana, sans-serif;
    font-size:14px;
    font-weight:bold;
}
#button a:link{
    color:#666666;
    text-decoration:none;
    padding:10px;
    background-color:#EAEAEA;
    border:1px solid #cccccc;
}


#button a:hover{
    background-color:#E6EFC2;
    border:1px solid #C6D880;
    color:#529214;
}

.submit {
  color:#00f;
  padding:0px;
  font-size:12px;
  background:none;
  border:none;
  font-family:Calibri, Arial, Helvetica, sans-serif;
  display:block;
  text-decoration:underline;
  cursor:pointer;
  float:left;
}