<!doctype html>
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-slate-900 text-white">
  <form method="post" class="max-w-xl mx-auto p-6 grid gap-4">
    <h1 class="text-2xl font-bold">30-Second Survey</h1>
    <label class="grid gap-2">
      Favorite tailgate drink?
      <select name="drink" class="text-black p-2 rounded">
        <option value="water">Water</option>
        <option value="soda">Soda</option>
        <option value="energy">Energy drink</option>
      </select>
    </label>
    <label class="grid gap-2">
      Food vibe?
      <select name="food" class="text-black p-2 rounded">
        <option value="bbq">BBQ</option>
        <option value="veggies">Veggies</option>
      </select>
    </label>
    <label class="grid gap-2">
      Your style?
      <select name="vibe" class="text-black p-2 rounded">
        <option value="precision">Precision</option>
        <option value="chaos">Chaos</option>
      </select>
    </label>
    <button class="bg-emerald-500 py-2 rounded text-lg">Submit</button>
  </form>
</body>
</html>

