Neumorphic 成功メッセージコンポーネント

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