Neumorphism トースト通知コンポーネント

<div class="flex items-center justify-center min-h-screen p-10">
  <div class="w-full max-w-sm mx-auto">
    <div class="flex items-center p-6 neumorphism-card rounded-xl">
      <div class="flex-shrink-0">
        <svg class="w-6 h-6 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-4">
        <p class="font-semibold text-gray-700 dark:text-gray-200">Success!</p>
        <p class="mt-1 text-sm text-gray-500 dark:text-gray-400">Your action was completed successfully.</p>
      </div>
    </div>

    <!-- Add more toast notifications as needed -->

  </div>
</div>

<style>
  /* Base styles for neumorphism effect */
  .neumorphism-card {
    background: linear-gradient(145deg, #e0e0e0, #ffffff);
    box-shadow: 8px 8px 16px #bebebe, -8px -8px 16px #ffffff;
  }

  /* Dark mode styles */
  @media (prefers-color-scheme: dark) {
    .neumorphism-card {
      background: linear-gradient(145deg, #2c2c2c, #383838);
      box-shadow: 8px 8px 16px #232323, -8px -8px 16px #383838;
    }
  }

  /* Responsive adjustments */
  @media (max-width: 600px) {
    .neumorphism-card {
      padding: 1rem;
    }
  }
</style>