<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Evento - Landing Page:  Registration Form</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
  <div id="register" class="bg-white py-6 sm:py-8 lg:py-12">
        <div class="mx-auto max-w-screen-2xl px-4 md:px-8 mt-16 mb-8">
          <h2 class="mb-4 text-center text-3xl font-bold text-gray-800 md:mb-8 lg:text-4xl">Join the Webinar</h2>
      
          <form class="mx-auto max-w-lg rounded-lg border">
            <div class="flex flex-col gap-4 p-4 md:p-8">
              <div>
              <label for="name" class="mb-2  text-sm sm:text-base block text-gray-700 font-medium">Your name</label>
              <input type="text" id="name" name="name" class="w-full rounded border bg-gray-50 px-3 py-2 text-gray-800 outline-none ring-indigo-300 transition duration-100 focus:ring" required>
            </div>
      
            <div>
                <label for="email" class="mb-2  text-sm sm:text-base block text-gray-700 font-medium">Email Address</label>
                <input name="email" class="w-full rounded border bg-gray-50 px-3 py-2 text-gray-800 outline-none ring-indigo-300 transition duration-100 focus:ring" />
              </div>
      
            <div>
              <label for="how" class="block text-gray-700 font-medium">How did you find us?</label>
              <select id="how" name="how" class="mt-2 p-2 border border-gray-400 rounded w-full focus:outline-none focus:ring focus:border-blue-500" required>
                <option value="">Select an option</option>
                <option value="search_engine">Search Engine</option>
                <option value="social_media">Social Media</option>
                <option value="word_of_mouth">Word of Mouth</option>
                <option value="other">Other</option>
              </select>
            </div>
      
            <div class="flex items-center">
              <input type="checkbox" id="agree" name="agree" class="mr-2">
              <label for="agree" class="text-gray-600">By clicking sign up you agree to our <a href="#" class="text-blue-500 hover:underline">Terms</a> and read our <a href="#" class="text-blue-500 hover:underline">Privacy Policy</a>.</label>
            </div>
      
            <button type="submit" class="bg-blue-500 text-white font-medium px-4 py-2 rounded-lg hover:bg-blue-600 focus:outline-none focus:ring focus:border-blue-500">Sign Up</button>
          </form>
          </div>
        </div>
      </div>
</body>
</html>

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.