<div class="space-y-8">
  <h1 class="pageheading">Page heading, used in heroes</h1>
  <h2 class="subheading">Sub heading, used on page sections</h2>
  <p class="lead">Lead, used in support of page headings or sub heading</p>

  <h3 class="font-heading">`.font-heading` sets type properties for a generic heading</h3>
</div>

<div class="flex flex-wrap gap-4">
  <a href="#" class="button">Button Text</a>
  <a href="#" class="button bg-blue">Button Text</a>
  <a href="#" class="button bg-light-blue">Button Text</a>
  <a href="#" class="button bg-green">Button Text</a>
  <a href="#" class="button bg-purple">Button Text</a>
  <a href="#" class="button bg-orange">Button Text</a>
  <a href="#" class="bg-yellow-100 button">Button Text</a>
  <button class="bg-green-300 button">Button Text</button>
  <button class="text-white bg-blue-900 button">Button Text</button>
</div>

<div class="flex flex-wrap gap-2">
  <span class="badge">🛜 Free Wi-Fi</span>
  <span class="badge">🧑‍💻 Room for hallway hacking</span>
  <span class="badge">🏙️ In the middle of downtown</span>
</div>

<section class="p-4 bg-orange-100 rounded">
  <h3 class="mb-4 text-lg font-bold font-heading lg:text-2xl">Attention!</h3>
  <div class="prose prose-lg">
    <p>If you try to book and the website says the capacity is full, please call the hotel to try to book your room. You may need to mention that you're with the DjangoCon US group.</p>
  </div>
</section>

<form class="max-w-2xl p-4 mx-auto bg-white rounded lg:p-12" method="POST">
  <ul class="space-y-6">
    <li>
      <label for="fullname">Full Name</label>
      <input type="text" name="fullname" id="fullname" placeholder="Your name" required>
    </li>
    <li>
      <label for="email">Email</label>
      <input type="email" name="email" id="email" placeholder="Your email" required>
    </li>
    <li>
      <label for="password">Password</label>
      <input type="password" name="password" id="password" placeholder="Your password" required>
    </li>
    <li>
      <fieldset>
        <legend>T-shirt Size</legend>
        <label for="size-small">
          <input type="radio" name="gender" id="size-small" value="small" required>
          Small
        </label>
        <label for="size-medium">
          <input type="radio" name="gender" id="size-medium" value="medium" required>
          Medium
        </label>
        <label for="size-large">
          <input type="radio" name="gender" id="size-large" value="large" required>
          Large
        </label>
      </fieldset>
    </li>
    <li>
      <fieldset>
        <legend>Interests</legend>
        <label for="interest-django">
          <input type="checkbox" name="interests" id="interest-django" value="django">
          Django
        </label>
        <label for="interest-python">
          <input type="checkbox" name="interests" id="interest-python" value="python">
          Python
        </label>
        <label for="interest-ml">
          <input type="checkbox" name="interests" id="interest-ml" value="ml">
          Machine Learning
        </label>
      </fieldset>
    </li>
    <li>
      <label for="country">Country</label>
      <select name="country" id="country" required>
        <option value="">Select your country</option>
        <option value="us">United States</option>
        <option value="ca">Canada</option>
        <option value="uk">United Kingdom</option>
        <option value="au">Australia</option>
      </select>
    </li>
    <li>
      <label for="message">Message</label>
      <textarea name="message" id="message" placeholder="Your message" required></textarea>
    </li>
  </ul>

  <div class="mt-8">
    <button id="submit" type="submit" class="button bg-light-blue">Submit</button>
  </div>
</form>

<div class="block-container">
  <div class="wrapper">
    <p>Content goes here.</p>
  </div>
</div>

<div class="py-8 bg-gray-100 block-container lg:py-10">
  <div class="wrapper">
    <p>Gray block with modified padding.</p>
  </div>
</div>

<div class="block-container bg-blue">
  <div class="wrapper">
    <div class="grid grid-cols-1 gap-4 lg:grid-cols-2">
      <div class="p-4 bg-gray-100">Column 1</div>
      <div class="p-4 bg-gray-200">Column 2</div>
    </div>
  </div>
</div>

<ul class="flex flex-wrap gap-4 mt-auto">
  <li>
    <a class="hover:text-social-twitter" href="https://twitter.com/djangocon">
      <svg class="w-8 h-8 icon">
        <title>X (Formerly Twitter)</title>
        <use xlink:href="#twitter-icon"></use>
      </svg>
    </a>
  </li>
  <li>
    <a class="hover:text-social-github" href="https://github.com/djangocon/">
      <svg class="w-8 h-8 icon">
        <title>Github</title>
        <use xlink:href="#github-icon"></use>
      </svg>
    </a>
  </li>
</ul>