IndustrialVibranteGobiernoÉxitoMensaje

<div class="p-4 sm:p-6 lg:p-8 bg-gray-50 dark:bg-gray-900 font-sans">

  <div class="max-w-md mx-auto bg-white dark:bg-gray-800 rounded-lg shadow-xl overflow-hidden
              border-4 border-emerald-500 dark:border-emerald-600
              transform transition-all duration-300 hover:scale-[1.02] hover:shadow-2xl">

    <div class="relative p-6 sm:p-8 md:p-10 text-center">
      <div class="absolute top-0 left-0 w-full h-full bg-gradient-to-br from-emerald-500 to-teal-600 dark:from-emerald-600 dark:to-teal-700 opacity-20 dark:opacity-10 pointer-events-none"></div>

      <svg class="mx-auto mb-4 h-16 w-16 text-emerald-600 dark:text-emerald-400
                  transform transition-transform duration-500 ease-in-out hover:rotate-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="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
      </svg>

      <h3 class="text-2xl sm:text-3xl font-bold mb-3 
                 text-gray-900 dark:text-gray-50
                 tracking-tight">
        Operation Confirmed!
      </h3>
      <p class="text-base sm:text-lg text-gray-700 dark:text-gray-300 leading-relaxed">
        Your request has been successfully processed and recorded. Thank you for using our public service portal.
      </p>

      <div class="mt-6 flow-root">
        <a href="#" class="inline-flex items-center justify-center 
                          px-6 py-3 border border-transparent rounded-lg 
                          text-lg font-semibold 
                          bg-emerald-600 hover:bg-emerald-700 dark:bg-emerald-500 dark:hover:bg-emerald-600 
                          text-white dark:text-gray-900 
                          shadow-md 
                          transition-colors duration-300 ease-in-out
                          focus:outline-none focus:ring-4 focus:ring-emerald-300 dark:focus:ring-emerald-700 
                          transform hover:-translate-y-0.5 hover:scale-105">
          <svg class="-ml-1 mr-2 h-5 w-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10 2a1 1 0 011 1v1.944A9.004 9.004 0 0118.805 9H13a1 1 0 100 2h5.805A9.004 9 0 0111 16.056V18a1 1 0 11-2 0v-1.944A9.004 9.004 0 011.195 11H7a1 1 0 100-2H1.195A9.004 9.004 0 019 3.944V2a1 1 0 011-1z" clip-rule="evenodd"></path></svg>
          Return to Dashboard
        </a>
      </div>
    </div>

    <div class="relative p-4 sm:p-6 md:p-8 bg-gray-100 dark:bg-gray-700 border-t-2 border-dashed border-gray-300 dark:border-gray-600 
                flex flex-wrap items-center justify-between text-sm sm:text-base 
                shadow-inner">
      <div class="flex items-center mb-2 sm:mb-0">
        <svg class="h-5 w-5 text-gray-500 dark:text-gray-400 mr-2" 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="M7 8h10M7 12h10m-9 4h4M8 17v-4m0 0H5v4h3z"></path></svg>
        <span class="text-gray-800 dark:text-gray-200">Reference ID: <strong class="text-emerald-700 dark:text-emerald-300">GOV789-ABC456</strong></span>
      </div>
      <div class="flex items-center text-right ">
        <svg class="h-5 w-5 text-gray-500 dark:text-gray-400 mr-2" 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="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"></path></svg>
        <span class="text-gray-800 dark:text-gray-200">Date: <time datetime="2023-10-27">Oct 27, 2023</time></span>
      </div>
    </div>

    <div class="flex justify-around p-4 sm:p-6 bg-gray-200 dark:bg-gray-700 border-t-4 border-gray-300 dark:border-gray-600">
      <a href="#" class="text-gray-700 dark:text-gray-300 hover:text-emerald-600 dark:hover:text-emerald-400 transform hover:scale-105 transition-all duration-200 flex flex-col items-center">
        <svg class="h-6 w-6 mb-1" 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 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"></path></svg>
        <span class="text-xs sm:text-sm font-medium">Download Receipt</span>
      </a>
      <a href="#" class="text-gray-700 dark:text-gray-300 hover:text-emerald-600 dark:hover:text-emerald-400 transform hover:scale-105 transition-all duration-200 flex flex-col items-center">
        <svg class="h-6 w-6 mb-1" 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="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"></path></svg>
        <span class="text-xs sm:text-sm font-medium">Email Support</span>
      </a>
      <a href="#" class="text-gray-700 dark:text-gray-300 hover:text-emerald-600 dark:hover:text-emerald-400 transform hover:scale-105 transition-all duration-200 flex flex-col items-center">
        <svg class="h-6 w-6 mb-1" 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="M8.228 9.247a1 1 0 010-1.414L10.5 5.5l1.272 1.272a1 1 0 010 1.414L8.228 9.247zM12 21V10m-4 0h8"></path></svg>
        <span class="text-xs sm:text-sm font-medium">Quick Guide</span>
      </a>
    </div>

  </div>

</div>