Success Messages

                <div class="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900">
  <div class="relative p-6 bg-white dark:bg-gray-800 rounded-lg shadow-lg max-w-sm mx-auto">
    <div class="text-center">
      <div class="mb-4 text-green-500 mx-auto">
        <svg xmlns="http://www.w3.org/2000/svg" class="h-12 w-12 mx-auto" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
          <path stroke-linecap="round" stroke-linejoin="round" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
        </svg>
      </div>
      <h3 class="text-xl font-semibold text-gray-800 dark:text-white mb-2">Order Confirmed!</h3>
      <p class="text-gray-600 dark:text-gray-300 text-sm mb-4">Your order #12345 has been successfully placed.</p>
      <button class="bg-green-500 hover:bg-green-600 text-white font-bold py-2 px-4 rounded-full transition duration-300 ease-in-out">
        Continue Shopping
      </button>
    </div>
  </div>
</div>
              

                <div class="flex items-center justify-center min-h-screen bg-gray-200 dark:bg-gray-900">
  <div class="neumorphic-card bg-white dark:bg-gray-800 p-6 rounded-xl shadow-lg dark:shadow-none">
    <div class="flex items-center space-x-4">
      <div class="flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-green-500 text-white dark:bg-green-600">
        <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="M5 13l4 4L19 7"></path></svg>
      </div>
      <div class="flex-1">
        <h3 class="text-lg leading-6 font-medium text-gray-900 dark:text-white">Success!</h3>
        <p class="mt-1 text-sm text-gray-500 dark:text-gray-400">Your operation was completed successfully.</p>
      </div>
    </div>
  </div>
</div>

<style>
  .neumorphic-card {
    border-radius: 1rem;
    background: #e0e0e0;
    box-shadow: 8px 8px 16px #bebebe, -8px -8px 16px #ffffff;
    transition: all 0.3s ease;
  }

  .dark .neumorphic-card {
    background: #2d3748; /* dark gray */
    box-shadow: 8px 8px 16px #1a202c, -8px -8px 16px #4a5568;
  }

  .neumorphic-card:hover {
    box-shadow: 4px 4px 8px #bebebe, -4px -4px 8px #ffffff;
  }
  
  .dark .neumorphic-card:hover {
    box-shadow: 4px 4px 8px #1a202c, -4px -4px 8px #4a5568;
  }
</style>
              

                <div class="min-h-screen bg-gradient-to-br from-purple-100 via-pink-100 to-yellow-100 dark:from-gray-900 dark:via-purple-900 dark:to-pink-900 p-8 flex items-center justify-center">
  <div class="max-w-4xl w-full bg-white dark:bg-gray-800 rounded-xl shadow-2xl p-8 space-y-8 border border-gray-200 dark:border-gray-700">
    <h2 class="text-5xl font-extrabold text-center text-gray-800 dark:text-gray-100 leading-tight">
      <span class="block">Congratulations!</span>
      <span class="block text-purple-500 dark:text-purple-400 mt-2">Your Post is Live!</span>
    </h2>
    
    <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
      <!-- Left Section: Post Preview -->
      <div class="bg-gray-50 dark:bg-gray-700 p-6 rounded-lg shadow-inner border border-gray-100 dark:border-gray-600">
        <h3 class="text-2xl font-bold text-gray-700 dark:text-gray-200 mb-4">Your Latest Creation</h3>
        <div class="relative rounded-lg overflow-hidden mb-4 aspect-video shadow-lg ring-4 ring-purple-300 dark:ring-purple-600">
          <img src="https://picsum.photos/800/450?random=1" alt="Post Image" class="w-full h-full object-cover">
          <div class="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent p-4 flex items-end">
            <p class="text-white text-lg font-semibold">"Exploring new horizons and pushing boundaries."</p>
          </div>
        </div>
        <div class="flex items-center space-x-3 mb-3">
          <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="User Avatar" class="w-10 h-10 rounded-full border-2 border-pink-300 dark:border-pink-500">
          <p class="text-gray-600 dark:text-gray-300 font-medium">@CreativeExplorer</p>
        </div>
        <div class="flex justify-between items-center text-gray-500 dark:text-gray-400 text-sm">
          <span><i class="fas fa-heart text-red-400"></i> 1.2K Likes</span>
          <span><i class="fas fa-comment text-blue-400"></i> 89 Comments</span>
          <span><i class="fas fa-share-alt text-green-400"></i> 20 Shares</span>
        </div>
      </div>
      
      <!-- Right Section: Next Steps & Sharing -->
      <div class="space-y-6">
        <!-- Metrics Card -->
        <div class="bg-purple-50 dark:bg-purple-900 border border-purple-200 dark:border-purple-700 rounded-lg p-6 shadow-md">
          <h3 class="text-2xl font-bold text-purple-700 dark:text-purple-200 mb-4">Performance Snapshot</h3>
          <div class="grid grid-cols-2 gap-4 text-center">
            <div>
              <p class="text-4xl font-extrabold text-purple-600 dark:text-purple-300">+15%</p>
              <p class="text-gray-600 dark:text-gray-300 mt-1">Engagement Rate</p>
            </div>
            <div>
              <p class="text-4xl font-extrabold text-pink-600 dark:text-pink-300">+300</p>
              <p class="text-gray-600 dark:text-gray-300 mt-1">New Followers</p>
            </div>
          </div>
        </div>
        
        <!-- Call to Actions -->
        <div class="bg-pink-50 dark:bg-pink-900 border border-pink-200 dark:border-pink-700 rounded-lg p-6 shadow-md space-y-4">
          <h3 class="text-2xl font-bold text-pink-700 dark:text-pink-200 mb-4">What's Next?</h3>
          <button class="w-full bg-gradient-to-r from-purple-400 to-pink-400 text-white font-bold py-3 px-6 rounded-full text-lg shadow-lg hover:from-purple-500 hover:to-pink-500 transform hover:scale-105 transition duration-300 ease-in-out">
            <i class="fas fa-share-alt mr-2"></i> Share This Post
          </button>
          <button class="w-full bg-white dark:bg-gray-700 text-purple-600 dark:text-purple-300 font-bold py-3 px-6 rounded-full text-lg shadow-lg border border-purple-300 dark:border-purple-600 hover:bg-purple-50 dark:hover:bg-gray-600 transform hover:scale-105 transition duration-300 ease-in-out">
            <i class="fas fa-chart-line mr-2"></i> View Analytics
          </button>
          <button class="w-full text-gray-600 dark:text-gray-300 bg-transparent border border-gray-300 dark:border-gray-600 font-bold py-3 px-6 rounded-full text-lg hover:bg-gray-100 dark:hover:bg-gray-700 transform hover:scale-105 transition duration-300 ease-in-out">
            <i class="fas fa-plus mr-2"></i> Create Another Post
          </button>
        </div>
      </div>
    </div>
    
    <!-- Footer Message -->
    <p class="text-center text-gray-500 dark:text-gray-400 text-md mt-8">
      
              

                <div class="min-h-screen bg-gray-100 dark:bg-gray-900 flex flex-col items-center justify-center p-4">
  <div class="relative bg-white dark:bg-gray-800 rounded-3xl shadow-2xl p-8 max-w-md w-full overflow-hidden transform transition-all duration-500 hover:scale-105">
    <div class="absolute top-0 left-0 w-full h-full bg-gradient-to-br from-purple-600 to-pink-500 opacity-75 rounded-3xl transform -rotate-3 translate-x-2 translate-y-2 group-hover:rotate-0 group-hover:translate-x-0 group-hover:translate-y-0 transition-all duration-500"></div>
    <div class="absolute top-0 left-0 w-full h-full bg-gradient-to-br from-blue-500 to-green-400 opacity-75 rounded-3xl transform rotate-3 -translate-x-2 -translate-y-2 group-hover:rotate-0 group-hover:translate-x-0 group-hover:translate-y-0 transition-all duration-500"></div>
    
    <div class="relative z-10 flex flex-col items-center justify-center text-center">
      <div class="mb-6 flex items-center justify-center space-x-2">
        <div class="relative">
          <img src="https://i.pravatar.cc/150?img=1" alt="Avatar 1" class="w-16 h-16 rounded-full ring-4 ring-purple-400 object-cover shadow-lg">
          <span class="absolute bottom-0 right-0 block h-4 w-4 rounded-full ring-2 ring-white bg-green-500"></span>
        </div>
        <div class="relative">
          <img src="https://i.pravatar.cc/150?img=2" alt="Avatar 2" class="w-16 h-16 rounded-full ring-4 ring-pink-400 object-cover shadow-lg">
          <span class="absolute bottom-0 right-0 block h-4 w-4 rounded-full ring-2 ring-white bg-green-500"></span>
        </div>
        <div class="relative">
          <img src="https://i.pravatar.cc/150?img=3" alt="Avatar 3" class="w-16 h-16 rounded-full ring-4 ring-blue-400 object-cover shadow-lg">
          <span class="absolute bottom-0 right-0 block h-4 w-4 rounded-full ring-2 ring-white bg-green-500"></span>
        </div>
      </div>
      
      <h2 class="text-4xl font-extrabold text-gray-900 dark:text-white mb-4 leading-tight" style="text-shadow: 2px 2px 4px rgba(0,0,0,0.2);">
        Success!
      </h2>
      <p class="text-gray-700 dark:text-gray-300 mb-6 text-lg">
        Your post was successfully shared with your network. Expect lots of engagement!
      </p>
      
      <div class="w-full flex flex-col space-y-4">
        <button class="w-full bg-gradient-to-r from-purple-500 to-pink-500 hover:from-purple-600 hover:to-pink-600 text-white font-bold py-3 px-6 rounded-full shadow-lg transform hover:scale-105 transition-all duration-300 text-lg">
          View Post
        </button>
        <button class="w-full bg-gray-200 dark:bg-gray-700 hover:bg-gray-300 dark:hover:bg-gray-600 text-gray-800 dark:text-white font-bold py-3 px-6 rounded-full shadow-lg transform hover:scale-105 transition-all duration-300 text-lg">
          Share Again
        </button>
      </div>

      <div class="mt-8 text-sm text-gray-500 dark:text-gray-400">
        <p>You've reached <span class="font-semibold text-purple-600">1,234 friends</span> this time!</p>
        <div class="relative pt-1">
          <div class="overflow-hidden h-2 mb-4 text-xs flex rounded bg-fuchsia-200 dark:bg-fuchsia-800">
            <div style="width: 80%" class="shadow-none flex flex-col text-center whitespace-nowrap text-white justify-center bg-fuchsia-500 dark:bg-fuchsia-400"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

              

                <div class="min-h-screen bg-gradient-to-br from-purple-50 via-pink-50 to-indigo-100 dark:from-gray-900 dark:via-gray-800 dark:to-gray-700 p-8 flex items-center justify-center">
  <div class="bg-white dark:bg-gray-800 rounded-lg shadow-xl p-6 md:p-8 max-w-sm w-full transform transition-all duration-300 hover:scale-105 ease-in-out">
    <div class="flex flex-col items-center justify-center space-y-4">
      <div class="relative flex items-center justify-center w-16 h-16 rounded-full bg-green-100 dark:bg-green-700 transform transition-transform duration-500 ease-in-out scale-0 animate-scaleIn">
        <svg class="w-10 h-10 text-green-500 dark:text-green-200" 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="M5 13l4 4L19 7"></path>
        </svg>
      </div>
      <h2 class="text-2xl font-bold text-gray-800 dark:text-white text-center">Success!</h2>
      <p class="text-gray-600 dark:text-gray-300 text-center text-sm">
        Your action was completed successfully. We appreciate your patience.
      </p>
      <button class="px-6 py-2 rounded-full bg-purple-200 dark:bg-purple-600 text-purple-800 dark:text-white font-semibold hover:bg-purple-300 dark:hover:bg-purple-700 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-purple-300 focus:ring-opacity-75">
        Continue
      </button>
    </div>
  </div>
</div>

<style>
  @keyframes scaleIn {
    0% {
      transform: scale(0);
      opacity: 0;
    }
    60% {
      transform: scale(1.1);
      opacity: 1;
    }
    100% {
      transform: scale(1);
    }
  }

  .animate-scaleIn {
    animation: scaleIn 0.6s ease-out forwards;
  }
</style>
              

                <div class="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900 p-4">
  <div class="max-w-sm w-full bg-white dark:bg-gray-800 rounded-lg shadow-lg p-6">
    <div class="flex items-center mb-4">
      <div class="flex-shrink-0">
        <svg class="h-8 w-8 text-green-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <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"/>
        </svg>
      </div>
      <div class="ml-3">
        <h3 class="text-lg leading-6 font-medium text-gray-900 dark:text-white">Success!</h3>
      </div>
    </div>
    <div class="mt-2">
      <p class="text-sm text-gray-500 dark:text-gray-300">
        Your action was completed successfully.
      </p>
    </div>
    <div class="mt-4">
      <button type="button" class="inline-flex justify-center px-4 py-2 text-sm font-medium text-blue-600 dark:text-blue-400 bg-blue-100 dark:bg-blue-900 border border-transparent rounded-md hover:bg-blue-200 dark:hover:bg-blue-800 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:focus:ring-offset-gray-900">
        Close
      </button>
    </div>
  </div>
</div>
              

                <div class="flex items-center justify-center min-h-screen p-5 bg-gray-100 dark:bg-gray-900">
  <div class="w-full max-w-md mx-auto bg-white dark:bg-gray-800 bg-opacity-30 dark:bg-opacity-30 rounded-xl p-6 shadow-xl backdrop-filter backdrop-blur-lg">
    <div class="text-center">
      <svg class="w-16 h-16 mx-auto text-green-500" 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>
      <h2 class="mt-5 text-2xl font-semibold text-gray-800 dark:text-white">Payment Successful!</h2>
      <p class="mt-2 text-gray-600 dark:text-gray-300">Thank you for your purchase. Your order has been placed successfully.</p>
    </div>
    <div class="mt-6 border-t border-gray-200 dark:border-gray-700 pt-4">
      <div class="flex justify-between text-gray-700 dark:text-gray-200">
        <span>Transaction ID:</span>
        <span>#123456789</span>
      </div>
      <div class="flex justify-between mt-2 text-gray-700 dark:text-gray-200">
        <span>Amount Paid:</span>
        <span>$199.00</span>
      </div>
    </div>
    <div class="mt-6">
      <a href="#" class="block w-full px-4 py-2 text-center text-white bg-blue-600 rounded-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-600 focus:ring-opacity-50 dark:bg-blue-700 dark:hover:bg-blue-800 dark:focus:ring-blue-700">View Order Details</a>
    </div>
  </div>
</div>
              

                <div class="bg-gray-900 text-gray-200 p-6 rounded-lg max-w-lg mx-auto shadow-lg">
    <h2 class="text-xl font-semibold mb-4">Success!</h2>
    <div class="flex items-center mb-4">
        <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-12 h-12 rounded-full mr-3">
        <div>
            <p class="font-medium">John Doe</p>
            <p class="text-sm text-gray-400">a moment ago</p>
        </div>
    </div>
    <p class="mb-4">Your changes have been saved successfully!</p>
    <img src="https://picsum.photos/seed/success/400/200" alt="Success Image" class="rounded-lg mb-4" />
    <button class="bg-green-600 hover:bg-green-500 text-white font-semibold py-2 px-4 rounded focus:outline-none focus:ring-2 focus:ring-green-400">
        View Details
    </button>
</div>

<div class="bg-gray-800 text-gray-200 p-6 rounded-lg max-w-lg mx-auto shadow-lg mt-4">
    <h2 class="text-xl font-semibold mb-4">Success!</h2>
    <div class="flex items-center mb-4">
        <img src="https://randomuser.me/api/portraits/women/1.jpg" alt="User Avatar" class="w-12 h-12 rounded-full mr-3">
        <div>
            <p class="font-medium">Jane Smith</p>
            <p class="text-sm text-gray-400">a few moments ago</p>
        </div>
    </div>
    <p class="mb-4">Your email has been verified successfully!</p>
    <img src="https://picsum.photos/seed/email_verified/400/200" alt="Email Verification Image" class="rounded-lg mb-4" />
    <button class="bg-green-600 hover:bg-green-500 text-white font-semibold py-2 px-4 rounded focus:outline-none focus:ring-2 focus:ring-green-400">
        Check Inbox
    </button>
</div>

<div class="bg-gray-700 text-gray-200 p-6 rounded-lg max-w-lg mx-auto shadow-lg mt-4">
    <h2 class="text-xl font-semibold mb-4">Success!</h2>
    <div class="flex items-center mb-4">
        <img src="https://randomuser.me/api/portraits/men/2.jpg" alt="User Avatar" class="w-12 h-12 rounded-full mr-3">
        <div>
            <p class="font-medium">Michael Brown</p>
            <p class="text-sm text-gray-400">just now</p>
        </div>
    </div>
    <p class="mb-4">Your profile picture has been updated!</p>
    <img src="https://picsum.photos/seed/profile_update/400/200" alt="Profile Update Image" class="rounded-lg mb-4" />
    <button class="bg-green-600 hover:bg-green-500 text-white font-semibold py-2 px-4 rounded focus:outline-none focus:ring-2 focus:ring-green-400">
        View Profile
    </button>
</div>
              

                <div class="min-h-screen bg-gray-100 dark:bg-gray-900 p-8 flex items-center justify-center">
  <div class="bg-white dark:bg-gray-800 p-10 rounded-lg shadow-2xl w-full max-w-md border border-gray-200 dark:border-gray-700 relative overflow-hidden">
    <!-- Skeuomorphic header - subtle gradient and border -->
    <div class="absolute top-0 left-0 right-0 h-16 bg-gradient-to-b from-green-400 to-green-500 dark:from-green-600 dark:to-green-700 rounded-t-lg border-b border-green-600 dark:border-green-800"></div>
    
    <!-- Content Area with subtle inner shadow -->
    <div class="relative z-10 pt-4">
      <div class="text-center mb-8">
        <!-- Skeuomorphic Icon - Embossed look -->
        <div class="mx-auto w-20 h-20 rounded-full bg-white dark:bg-gray-700 flex items-center justify-center shadow-inner mb-4">
          <svg class="w-10 h-10 text-green-500 dark:text-green-300" 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>
        </div>
        <h2 class="text-2xl font-bold text-gray-800 dark:text-gray-100 mb-2">Success!</h2>
        <p class="text-gray-600 dark:text-gray-400">Your operation was completed successfully.</p>
      </div>

      <!-- Detail Section - Elevated and Grouped -->
      <div class="bg-gray-50 dark:bg-gray-700 p-6 rounded-lg mb-6 shadow-md border border-gray-100 dark:border-gray-600">
        <div class="flex justify-between items-center mb-4">
          <span class="text-sm font-medium text-gray-700 dark:text-gray-300">Transaction ID:</span>
          <span class="text-sm text-gray-600 dark:text-gray-400">#XYZ123456789</span>
        </div>
        <div class="flex justify-between items-center">
          <span class="text-sm font-medium text-gray-700 dark:text-gray-300">Status:</span>
          <span class="text-sm text-green-600 dark:text-green-400 font-semibold">Completed</span>
        </div>
      </div>

      <!-- Action Buttons - Bevel effect -->
      <div class="flex flex-col space-y-4">
        <button class="bg-blue-500 hover:bg-blue-600 text-white font-bold py-3 px-6 rounded-lg shadow-lg transform transition duration-300 ease-in-out border-b-4 border-blue-700 dark:border-blue-800 hover:translate-y-1 hover:shadow-xl">
          View Details
        </button>
        <button class="bg-gray-300 hover:bg-gray-400 text-gray-800 font-bold py-3 px-6 rounded-lg shadow-lg transform transition duration-300 ease-in-out border-b-4 border-gray-500 dark:border-gray-600 hover:translate-y-1 hover:shadow-xl dark:bg-gray-600 dark:text-gray-200">
          Close
        </button>
      </div>
    </div>
  </div>
</div>
              

                <div class="bg-gray-800 p-6 rounded-lg shadow-lg max-w-lg mx-auto">  
    <h2 class="text-xl text-vibrant-500 font-bold mb-4">Success Messages</h2>  
    <div class="bg-gray-900 p-4 rounded-lg mb-4">  
        <div class="flex items-center mb-2">  
            <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-2">  
            <span class="text-white font-semibold">John Doe</span>  
            <span class="text-gray-400 text-sm ml-2">2 minutes ago</span>  
        </div>  
        <p class="text-gray-300">Your project has been successfully submitted!</p>  
    </div>  
    <div class="bg-gray-900 p-4 rounded-lg mb-4">  
        <div class="flex items-center mb-2">  
            <img src="https://randomuser.me/api/portraits/women/32.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-2">  
            <span class="text-white font-semibold">Jane Smith</span>  
            <span class="text-gray-400 text-sm ml-2">5 minutes ago</span>  
        </div>  
        <p class="text-gray-300">Your profile has been updated successfully!</p>  
    </div>  
    <div class="bg-gray-900 p-4 rounded-lg mb-4">  
        <div class="flex items-center mb-2">  
            <img src="https://randomuser.me/api/portraits/men/80.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-2">  
            <span class="text-white font-semibold">Mike Johnson</span>  
            <span class="text-gray-400 text-sm ml-2">10 minutes ago</span>  
        </div>  
        <p class="text-gray-300">Your order has been placed successfully!</p>  
    </div>  
    <div class="flex justify-center mt-4">  
        <img src="https://picsum.photos/300/200?random=1" alt="Success Image" class="rounded-lg shadow-lg">  
    </div>  
</div>