Contact Form 1

    <div class="max-w-xl mx-auto bg-white dark:bg-slate-900 border border-gray-200 dark:border-gray-700 rounded-2xl shadow-sm p-6 sm:p-8">
  <h2 class="text-2xl font-semibold text-gray-800 dark:text-white mb-6">Get in Touch</h2>
  
  <form action="#">
    <div class="space-y-5">
      <!-- Name -->
      <div>
        <label for="name" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Your Name</label>
        <input type="text" id="name" name="name" required
          class="w-full rounded-xl border border-gray-300 dark:border-gray-600 bg-gray-50 dark:bg-slate-800 px-4 py-2 text-sm text-gray-800 dark:text-white focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition">
      </div>

      <!-- Email -->
      <div>
        <label for="email" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Your Email</label>
        <input type="email" id="email" name="email" required
          class="w-full rounded-xl border border-gray-300 dark:border-gray-600 bg-gray-50 dark:bg-slate-800 px-4 py-2 text-sm text-gray-800 dark:text-white focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition">
      </div>

      <!-- Subject -->
      <div>
        <label for="subject" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Subject</label>
        <input type="text" id="subject" name="subject" required
          class="w-full rounded-xl border border-gray-300 dark:border-gray-600 bg-gray-50 dark:bg-slate-800 px-4 py-2 text-sm text-gray-800 dark:text-white focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition">
      </div>

      <!-- Message -->
      <div>
        <label for="message" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Message</label>
        <textarea id="message" name="message" rows="5" required
          class="w-full rounded-xl border border-gray-300 dark:border-gray-600 bg-gray-50 dark:bg-slate-800 px-4 py-2 text-sm text-gray-800 dark:text-white focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition resize-none"></textarea>
      </div>

      <!-- Button -->
      <div class="flex justify-end">
        <button type="submit"
          class="inline-flex items-center justify-center px-6 py-2 rounded-xl bg-blue-600 hover:bg-blue-700 text-white text-sm font-medium transition focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2">
          Send Message
        </button>
      </div>
    </div>
  </form>
</div>