Gradient Form

<div class="max-w-md mx-auto rounded-2xl overflow-hidden shadow-xl">
  <div class="bg-gradient-to-r from-violet-600 to-indigo-600 px-8 py-6">
    <h2 class="text-xl font-bold text-white">Contact Us</h2>
    <p class="text-violet-200 text-sm">We'd love to hear from you.</p>
  </div>
  <form class="bg-white px-8 py-6 space-y-4">
    <div>
      <label class="block text-sm font-medium text-gray-700 mb-1">Name</label>
      <input type="text" class="w-full px-4 py-2.5 border border-gray-300 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-violet-500 focus:border-transparent" placeholder="John Doe" />
    </div>
    <div>
      <label class="block text-sm font-medium text-gray-700 mb-1">Email</label>
      <input type="email" class="w-full px-4 py-2.5 border border-gray-300 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-violet-500 focus:border-transparent" placeholder="john@example.com" />
    </div>
    <div>
      <label class="block text-sm font-medium text-gray-700 mb-1">Message</label>
      <textarea rows="3" class="w-full px-4 py-2.5 border border-gray-300 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-violet-500 focus:border-transparent resize-none" placeholder="Your message..."></textarea>
    </div>
    <button type="submit" class="w-full py-3 bg-gradient-to-r from-violet-600 to-indigo-600 text-white font-semibold rounded-lg hover:shadow-lg transition-shadow">Send Message</button>
  </form>
</div>