Art_Deco_Government_Modal

<div class="fixed inset-0 z-50 overflow-y-auto bg-gray-900 bg-opacity-75 dark:bg-gray-950 dark:bg-opacity-85 flex items-center justify-center p-4">
  <div class="relative w-full max-w-lg mx-auto bg-gradient-to-br from-emerald-100 to-emerald-300 dark:from-sky-900 dark:to-teal-950 rounded-lg shadow-2xl overflow-hidden transform transition-all duration-300 ease-out scale-100 opacity-100 border-4 border-emerald-500 dark:border-teal-400">
    <!-- Art Deco Top Border -->
    <div class="absolute inset-x-0 top-0 h-4 bg-gradient-to-r from-emerald-600 via-teal-600 to-cyan-600 dark:from-teal-600 dark:via-sky-600 dark:to-cyan-600 transform skew-y-1 -translate-y-2"></div>
    <div class="absolute inset-x-0 top-0 h-4 bg-gradient-to-r from-emerald-700 via-teal-700 to-cyan-700 dark:from-teal-700 dark:via-sky-700 dark:to-cyan-700 transform skew-y-1 -translate-y-1"></div>

    <!-- Modal Header -->
    <div class="flex items-center justify-between p-6 pb-4 bg-transparent border-b border-emerald-400 dark:border-teal-800 relative z-10">
      <h3 class="text-2xl md:text-3xl font-serif tracking-wide text-emerald-800 dark:text-teal-200 drop-shadow-lg" style="text-shadow: 2px 2px 0px rgba(0,0,0,0.1);">
        <i class="fas fa-balance-scale mr-3 text-emerald-600 dark:text-teal-400"></i>
        Official Notice
      </h3>
      <button type="button" class="text-emerald-700 dark:text-teal-300 hover:text-emerald-900 dark:hover:text-teal-100 transform rotate-45 transition-transform duration-200 text-3xl leading-none font-light focus:outline-none focus:ring-2 focus:ring-emerald-500 dark:focus:ring-teal-400 rounded-full w-8 h-8 flex items-center justify-center">
        +
      </button>
    </div>

    <!-- Modal Body -->
    <div class="p-6 text-gray-800 dark:text-gray-100 relative">
      <div class="absolute inset-0 bg-white dark:bg-gray-800 opacity-20 dark:opacity-10 pointer-events-none" style="clip-path: polygon(0 0, 100% 0, 100% 80%, 50% 100%, 0 80%);"></div>
      <img src="https://picsum.photos/400/250" alt="Art Deco Building" class="w-full h-40 object-cover mb-4 rounded-md shadow-lg border-2 border-emerald-400 dark:border-teal-700 pointer-events-none">
      <p class="mb-4 text-base md:text-lg leading-relaxed">
        Dear Citizen,
        <br><br>
        We understand the importance of clear and timely communication. Please review the following critical information pertaining to our latest public service initiatives. Your engagement is vital for the betterment of our community.
      </p>
      <ul class="list-disc list-inside space-y-2 text-sm md:text-base mb-6 pl-4">
        <li class="font-medium text-emerald-700 dark:text-teal-300">
          <strong class="text-emerald-800 dark:text-teal-200">New Regulations:</strong> Effective <span class="font-semibold">October 26, 2024</span>.
        </li>
        <li class="font-medium text-emerald-700 dark:text-teal-300">
          <strong class="text-emerald-800 dark:text-teal-200">Public Forum:</strong> Scheduled online for <span class="font-semibold">November 10, 2024, 2:00 PM EST</span>.
        </li>
        <li class="font-medium text-emerald-700 dark:text-teal-300">
          <strong class="text-emerald-800 dark:text-teal-200">Support Line:</strong> Available M-F, 9 AM - 5 PM at <a href="tel:+18001234567" class="underline hover:no-underline text-cyan-600 dark:text-amber-300">1-800-123-4567</a>.
        </li>
      </ul>
      <p class="text-sm md:text-base text-gray-700 dark:text-gray-200">
        Thank you for your continued cooperation and understanding. We are committed to serving you.
      </p>
    </div>

    <!-- Modal Footer -->
    <div class="p-6 pt-4 bg-transparent border-t border-emerald-400 dark:border-teal-800 flex justify-end space-x-3 relative z-10">
      <button type="button" class="px-6 py-2 rounded-lg text-sm font-medium transition duration-200 ease-in-out
        bg-gradient-to-r from-emerald-500 to-emerald-600 text-white shadow-lg 
        hover:from-emerald-600 hover:to-emerald-700 
        dark:from-teal-600 dark:to-teal-700 dark:text-gray-100 dark:shadow-xl dark:hover:from-teal-700 dark:hover:to-teal-800
        focus:outline-none focus:ring-2 focus:ring-emerald-400 dark:focus:ring-teal-500 focus:ring-offset-2 focus:ring-offset-emerald-100 dark:focus:ring-offset-sky-900">
        Decline
      </button>
      <button type="button" class="px-6 py-2 rounded-lg text-sm font-medium transition duration-200 ease-in-out
        bg-gradient-to-r from-cyan-600 to-teal-600 text-white shadow-lg 
        hover:from-cyan-700 hover:to-teal-700 
        dark:from-sky-500 dark:to-cyan-600 dark:text-gray-100 dark:shadow-xl dark:hover:from-sky-600 dark:hover:to-cyan-700
        focus:outline-none focus:ring-2 focus:ring-cyan-500 dark:focus:ring-sky-400 focus:ring-offset-2 focus:ring-offset-emerald-100 dark:focus:ring-offset-sky-900">
        Accept & Proceed
      </button>
    </div>

    <!-- Art Deco Bottom Border -->
    <div class="absolute inset-x-0 bottom-0 h-4 bg-gradient-to-r from-emerald-600 via-teal-600 to-cyan-600 dark:from-teal-600 dark:via-sky-600 dark:to-cyan-600 transform skew-y-1 translate-y-2"></div>
    <div class="absolute inset-x-0 bottom-0 h-4 bg-gradient-to-r from-emerald-700 via-teal-700 to-cyan-700 dark:from-teal-700 dark:via-sky-700 dark:to-cyan-700 transform skew-y-1 translate-y-1"></div>
  </div>
</div>