JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>Win Tickets</title>
    <link rel="stylesheet" href="mystyles.css" />
  <link href='http://fonts.googleapis.com/css?family=Droid+Sans|Droid+Serif|Medula+One' rel='stylesheet' type='text/css'>    
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
</head>
<body>
  <form id="wintickets" method="post" action="#">
    <fieldset id="questions">
      <legend>Win Tickets to the Rotten Flamingos</legend>
      <p>Answer these questions about the band and you'll be registered to win an opportunity to meet the <em>Rotten Flamingos</em> in concert this friday as well as front row tickets to the show.</p>
        <ul>
          <li>
            <label for="favoritesong">What is your Favorite Song from the band Rotten Flamingos?</label>
            <select>
            <datalist id="songs">
               <option>Lips on Fire </option>
               <option>Touch of Figaro</option>
               <option>Twinkle my heart</option>
               <option>Today, Today, Tomorrow</option>
            </datalist>
            </select>
          </li>
          <li>
            <label for="birthdate">When was lead singer Bryan Vilkensven born?</label> 
            <input type="date" name="date" id="birthdate">

          </li>
         <li>
            <label for="numberones">How many number one singles has the band had in their last 5 years?</label>
            <input type="number" min="1" max="8" placeholder="maximum of 8" id="numberones">
          </li>
        </ul>
    </fieldset>
    <fieldset id="entryinfo">
      <legend>Your info</legend>
      <p>Please fill out the following information in order to register to win tickets to the event.</p>
      <ul>
        <li>
          <label for="entryname">Name</label>
          <input placeholder="first and last names" id="entryname" />
        </li>
        <li>
          <label for="entryaddress">Street...

CSS

body{
  background: #000 url('http://planetoftheweb.com/exercises/cssform/images/guitarartist.jpg') no-repeat center top;
  color: #FFF;
  font-family: Droid Serif;
  margin: 0;
  padding: 0;
}

#wintickets {
  position: relative;
  top: 280px;
  width: 500px;
  margin: 0 auto;
}

#wintickets fieldset{
  border: none; 
}

#wintickets legend {
  color: #7192c3;
  font: 3em Medula One;
}

#wintickets ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

#wintickets label {
  display: block;
  color: #fee080;
  margin-top: 20px;
  margin-bottom: 5px;
}

#wintickets p {
 font-size: 1.1em; 
}

#wintickets #questions label {
  color: #cf7900;
  font-size: 1.2em;
}

#wintickets #entryinfo label {
  font-family: "Droid Sans", sans-serif;
  font-weight: bold;
}

#wintickets  #questions input {
  width: 100%;
  height: 40px;
  padding: 1%;
  background: #333;
  color: #BBB;
  border: none;
  font: normal 1em/1.5em "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
}

#wintickets #entryinfo input {
  width: 100%;
  height: 40px;
  background: #333;
  color: #BBB;
  border: none;
  font: normal 1em/1.5em "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
  margin: 0;
  padding: 0;
  padding-left: 10px;
}


#wintickets input[type=submit] {
  background: #333;
  color: #AAA;
  border: 0;
  margin-bottom: 30px;
  margin-top:20px;
  width:60px;
  height:30px;
}

@media only screen and (max-width: 480px) {
    #wintickets #questions label {
      color: #cf7900;
      font-size: 1em;
    }

    #wintickets {
        background: #000;
        width: 100%;
        top: 160px;
    }

    #wintickets legend {
      color: #7192c3;
      font-size: 2.2em;
      line-height: 90%;
      padding-top: 10px;
    }

    #wintickets p {
     font-size: .95em; 
    }
}