<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>

  <table class="min-w-full bg-white border border-gray-200">
        <tr>
            <td class="p-6 text-center bg-blue-600">
                <h1 class="text-2xl font-bold text-white">Your Company</h1>
            </td>
        </tr>
        <tr>
            <td class="p-6">
                <h2 class="text-xl font-semibold text-gray-800">Hello, [Name]!</h2>
                <p class="mt-4 text-gray-600">
                    We're excited to bring you the latest updates and offers from our company. Don't miss out on our exclusive deals and promotions.
                </p>
                <a href="#" class="inline-block px-6 py-3 mt-6 text-sm font-medium text-white bg-blue-600 rounded hover:bg-blue-700">
                    Shop Now
                </a>
            </td>
        </tr>
        <tr>
            <td class="p-6 bg-gray-100">
                <h3 class="text-lg font-medium text-gray-800">Latest News</h3>
                <ul class="mt-4 space-y-3">
                    <li class="text-gray-600">
                        <strong>Product Launch:</strong> Check out our new product line!
                    </li>
                    <li class="text-gray-600">
                        <strong>Blog Post:</strong> Tips and tricks to improve your productivity.
                    </li>
                    <li class="text-gray-600">
                        <strong>Upcoming Events:</strong> Join us for our annual conference.
                    </li>
                </ul>
            </td>
        </tr>
        <tr>
            <td class="p-6 text-center bg-gray-200">
                <p class="text-sm text-gray-600">
                    © 2024 Your Company. All rights reserved.
                </p>
                <p class="mt-2 text-sm text-gray-600">
                    You are receiving this email because you opted in at our website.
                </p>
                <a href="#" class="mt-2 text-sm text-blue-600 hover:underline">
                    Unsubscribe
                </a>
            </td>
        </tr>
    </table>

  <nav class="bg-white shadow-md">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="flex justify-between items-center h-16">
            <div class="flex-shrink-0">
                <a href="#" class="text-2xl font-bold text-indigo-600">Brand</a>
            </div>
            <div class="hidden md:flex space-x-4">
                <a href="#" class="text-gray-800 hover:text-indigo-600">Home</a>
                <a href="#" class="text-gray-800 hover:text-indigo-600">About</a>
                <a href="#" class="text-gray-800 hover:text-indigo-600">Services</a>
                <a href="#" class="text-gray-800 hover:text-indigo-600">Contact</a>
            </div>
            <div class="md:hidden">
                <button id="menu-toggle" class="text-gray-800 hover:text-indigo-600 focus:outline-none">
                    <svg class="h-6 w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16m-7 6h7"></path>
                    </svg>
                </button>
            </div>
        </div>
    </div>
    <!-- Mobile Menu -->
    <div id="mobile-menu" class="md:hidden hidden">
        <a href="#" class="block px-4 py-2 text-gray-800 hover:text-indigo-600">Home</a>
        <a href="#" class="block px-4 py-2 text-gray-800 hover:text-indigo-600">About</a>
        <a href="#" class="block px-4 py-2 text-gray-800 hover:text-indigo-600">Services</a>
        <a href="#" class="block px-4 py-2 text-gray-800 hover:text-indigo-600">Contact</a>
    </div>
</nav>

  <script>
  document.getElementById('menu-toggle').addEventListener('click', function() {
    const mobileMenu = document.getElementById('mobile-menu');
    mobileMenu.classList.toggle('hidden');
});
  </script>

  <div class="max-w-sm mx-auto bg-white shadow-lg rounded-lg overflow-hidden">
    <img class="w-full h-48 object-cover" src="https://placehold.co/600x400" alt="Card Image">
    <div class="p-4">
        <h3 class="text-xl font-semibold text-gray-800">Card Title</h3>
        <p class="mt-2 text-gray-600">
            This is a brief description of the card content. It provides a summary or highlights the key points.
        </p>
        <div class="flex justify-end mt-4">
            <a href="#" class="text-indigo-500 hover:text-indigo-600 font-medium">Read More</a>
        </div>
    </div>
</div>