検索コンポーネント

カテゴリ

トースト通知

短く、邪魔にならない通知

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

ブルータリズムにインスパイアされたトースト通知のセットで、温かみのあるニュートラルな配色で、予約/予約システムに適しています。生々しく大胆なコントラストと、ダークモードをサポートするレスポンシブデザインが特徴です。

                <div class="p-4 sm:p-6 lg:p-8 bg-zinc-100 dark:bg-zinc-900 min-h-screen font-sans">

  <!-- Container for Toast Notifications -->
  <div class="fixed bottom-4 right-4 z-50 flex flex-col space-y-4 w-full max-w-xs sm:max-w-sm lg:max-w-md pointer-events-none">

    <!-- Success Toast - Booking Confirmed -->
    <div class="relative p-4 sm:p-5 border-4 border-zinc-900 dark:border-zinc-100 bg-amber-200 dark:bg-amber-800 text-zinc-900 dark:text-zinc-100 shadow-[8px_8px_0px_0px_rgba(0,0,0,1)] dark:shadow-[8px_8px_0px_0px_rgba(255,255,255,1)] pointer-events-auto transition-all duration-300 transform hover:-translate-x-1 hover:-translate-y-1">
      <div class="flex items-start">
        <div class="flex-shrink-0 pt-1">
          <svg class="h-6 w-6 text-zinc-900 dark:text-zinc-100" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
            <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 w-0 flex-1 pt-0.5">
          <p class="text-lg sm:text-xl font-extrabold uppercase tracking-wide">Booking Confirmed!</p>
          <p class="mt-1 text-sm sm:text-base font-medium leading-tight">Your reservation for Dr. Smith on Feb 14th at 3 PM is all set.</p>
        </div>
        <div class="ml-4 flex-shrink-0 flex">
          <button type="button" class="absolute top-2 right-2 p-1 rounded-full text-zinc-900 dark:text-zinc-100 hover:text-zinc-700 dark:hover:text-zinc-300 focus:outline-none focus:ring-2 focus:ring-zinc-900 dark:focus:ring-zinc-100 focus:ring-offset-2 focus:ring-offset-amber-200 dark:focus:ring-offset-amber-800">
            <span class="sr-only">Close</span>
            <svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
              <path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd" />
            </svg>
          </button>
        </div>
      </div>
    </div>

    <!-- Info Toast - Reminder/Update -->
    <div class="relative p-4 sm:p-5 border-4 border-zinc-900 dark:border-zinc-100 bg-stone-200 dark:bg-stone-800 text-zinc-900 dark:text-zinc-100 shadow-[8px_8px_0px_0px_rgba(0,0,0,1)] dark:shadow-[8px_8px_0px_0px_rgba(255,255,255,1)] pointer-events-auto transition-all duration-300 transform hover:-translate-x-1 hover:-translate-y-1">
      <div class="flex items-start">
        <div class="flex-shrink-0 pt-1">
          <svg class="h-6 w-6 text-zinc-900 dark:text-zinc-100" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
          </svg>
        </div>
        <div class="ml-3 w-0 flex-1 pt-0.5">
          <p class="text-lg sm:text-xl font-extrabold uppercase tracking-wide">Appointment Reminder</p>
          <p class="mt-1 text-sm sm:text-base font-medium leading-tight">Just a friendly reminder for your 3 PM booking tomorrow.</p>
        </div>
        <div class="ml-4 flex-shrink-0 flex">
          <button type="button" class="absolute top-2 right-2 p-1 rounded-full text-zinc-900 dark:text-zinc-100 hover:text-zinc-700 dark:hover:text-zinc-300 focus:outline-none focus:ring-2 focus:ring-zinc-900 dark:focus:ring-zinc-100 focus:ring-offset-2 focus:ring-offset-stone-200 dark:focus:ring-offset-stone-800">
            <span class="sr-only">Close</span>
            <svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
              <path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd" />
            </svg>
          </button>
        </div>
      </div>
    </div>

    <!-- Warning Toast - Potential Issue -->
    <div class="relative p-4 sm:p-5 border-4 border-zinc-900 dark:border-zinc-100 bg-fuchsia-200 dark:bg-fuchsia-800 text-zinc-900 dark:text-zinc-100 shadow-[8px_8px_0px_0px_rgba(0,0,0,1)] dark:shadow-[8px_8px_0px_0px_rgba(255,255,255,1)] pointer-events-auto transition-all duration-300 transform hover:-translate-x-1 hover:-translate-y-1">
      <div class="flex items-start">
        <div class="flex-shrink-0 pt-1">
          <svg class="h-6 w-6 text-zinc-900 dark:text-zinc-100" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
          </svg>
        </div>
        <div class="ml-3 w-0 flex-1 pt-0.5">
          <p class="text-lg sm:text-xl font-extrabold uppercase tracking-wide">Action Required!</p>
          <p class="mt-1 text-sm sm:text-base font-medium leading-tight">Slot for 4 PM on Feb 15th is now limited. Please confirm soon.</p>
        </div>
        <div class="ml-4 flex-shrink-0 flex">
          <button type="button" class="absolute top-2 right-2 p-1 rounded-full text-zinc-900 dark:text-zinc-100 hover:text-zinc-700 dark:hover:text-zinc-300 focus:outline-none focus:ring-2 focus:ring-zinc-900 dark:focus:ring-zinc-100 focus:ring-offset-2 focus:ring-offset-fuchsia-200 dark:focus:ring-offset-fuchsia-800">
            <span class="sr-only">Close</span>
            <svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
              <path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd" />
            </svg>
          </button>
        </div>
      </div>
    </div>

    <!-- Error Toast - Booking Failed -->
    <div class="relative p-4 sm:p-5 border-4 border-zinc-900 dark:border-zinc-100 bg-red-200 dark:bg-red-800 text-zinc-900 dark:text-zinc-100 shadow-[8px_8px_0px_0px_rgba(0,0,0,1)] dark:shadow-[8px_8px_0px_0px_rgba(255,255,255,1)] pointer-events-auto transition-all duration-300 transform hover:-translate-x-1 hover:-translate-y-1">
      <div class="flex items-start">
        <div class="flex-shrink-0 pt-1">
          <svg class="h-6 w-6 text-zinc-900 dark:text-zinc-100" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z" />
          </svg>
        </div>
        <div class="ml-3 w-0 flex-1 pt-0.5">
          <p class="text-lg sm:text-xl font-extrabold uppercase tracking-wide">Booking Failed!</p>
          <p class="mt-1 text-sm sm:text-base font-medium leading-tight">The selected slot is no longer available. Please try again.</p>
        </div>
        <div class="ml-4 flex-shrink-0 flex">
          <button type="button" class="absolute top-2 right-2 p-1 rounded-full text-zinc-900 dark:text-zinc-100 hover:text-zinc-700 dark:hover:text-zinc-300 focus:outline-none focus:ring-2 focus:ring-zinc-900 dark:focus:ring-zinc-100 focus:ring-offset-2 focus:ring-offset-red-200 dark:focus:ring-offset-red-800">
            <span class="sr-only">Close</span>
            <svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
              <path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd" />
            </svg>
          </button>
        </div>
      </div>
    </div>

  </div>
</div>

アールデコ調のトースト通知コンポーネント

アールデコ調の美学を備えたシンプルでコントラストの高いトースト通知コンポーネントで、ニュースやジャーナリズムの Web サイトに適しています。レスポンシブデザインとダークモードのサポートが特徴です。

開けるプレビュー

                <div class="fixed bottom-4 right-4 z-50 w-full max-w-xs pointer-events-none p-4">
  <!-- Success Toast -->
  <div class="bg-white dark:bg-zinc-800 border-2 border-green-600 dark:border-green-400 text-zinc-900 dark:text-zinc-50 font-sans shadow-lg rounded-lg overflow-hidden mb-4 transform transition-all duration-300 pointer-events-auto hover:scale-[1.02] active:scale-95 animate-fade-in-up md:animate-slide-in-right">
  <div class="flex items-center p-4 border-b-2 border-green-600 dark:border-green-400 bg-green-500 dark:bg-green-700/80">
      <svg class="w-6 h-6 text-white mr-3" 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-lg font-bold text-white uppercase tracking-wider">Success!</h3>
      <button type="button" class="ml-auto -mx-1.5 -my-1.5 bg-green-500 dark:bg-green-700/80 text-white hover:text-green-900 focus:ring-2 focus:ring-green-300 p-1.5 rounded-lg inline-flex h-8 w-8 transition-colors duration-200">
        <span class="sr-only">Close</span>
        <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
          <path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path>
        </svg>
      </button>
    </div>
    <div class="p-4">
      <p class="text-sm italic">Your article has been successfully published to the public eye. Check your dashboard for insights.</p>
    </div>
  </div>

  <!-- Error Toast -->
  <div class="bg-white dark:bg-zinc-800 border-2 border-red-600 dark:border-red-400 text-zinc-900 dark:text-zinc-50 font-sans shadow-lg rounded-lg overflow-hidden transform transition-all duration-300 pointer-events-auto hover:scale-[1.02] active:scale-95 animate-fade-in-up md:animate-slide-in-right">
    <div class="flex items-center p-4 border-b-2 border-red-600 dark:border-red-400 bg-red-500 dark:bg-red-700/80">
      <svg class="w-6 h-6 text-white mr-3" 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="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
      </svg>
      <h3 class="text-lg font-bold text-white uppercase tracking-wider">Error!</h3>
      <button type="button" class="ml-auto -mx-1.5 -my-1.5 bg-red-500 dark:bg-red-700/80 text-white hover:text-red-900 focus:ring-2 focus:ring-red-300 p-1.5 rounded-lg inline-flex h-8 w-8 transition-colors duration-200">
        <span class="sr-only">Close</span>
        <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
          <path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path>
        </svg>
      </button>
    </div>
    <div class="p-4">
      <p class="text-sm italic">Failed to publish your article. Please check your network connection or try again later.</p>
    </div>
  </div>
</div>

<style>
  @keyframes fade-in-up {
    from {
      opacity: 0;
      transform: translateY(20px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  @keyframes slide-in-right {
    from {
      opacity: 0;
      transform: translateX(20px);
    }
    to {
      opacity: 1;
      transform: translateX(0);
    }
  }

  .animate-fade-in-up {
    animation: fade-in-up 0.5s ease-out forwards;
  }

  .md\:animate-slide-in-right {
    animation: none; /* Reset for mobile */
  }

  @media (min-width: 768px) {
    .md\:animate-slide-in-right {
      animation: slide-in-right 0.5s ease-out forwards;
    }
  }
</style>

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

ジュエルトーングラデーショントランジションを備えたレスポンシブトースト通知コンポーネントで、政府/公共サービスの Web サイト向けに設計されており、ライトモードとダークモードをサポートします。

開けるプレビュー

                <div class="fixed bottom-4 right-4 z-50 w-full max-w-sm p-4 pointer-events-none">
  <!-- Success Toast -->
  <div class="mb-4 rounded-lg shadow-xl overflow-hidden transform translate-y-0 transition-all duration-500 ease-out pointer-events-auto opacity-100 scale-100
              bg-gradient-to-r from-emerald-500 to-teal-600 dark:from-emerald-700 dark:to-teal-800">
    <div class="relative flex items-center p-4">
      <div class="flex-shrink-0">
        <svg class="h-6 w-6 text-white" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
          <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path>
        </svg>
      </div>
      <div class="ml-3 flex-1 pt-0.5">
        <p class="text-sm font-semibold text-white tracking-wide">Success!</p>
        <p class="mt-1 text-sm text-emerald-100 dark:text-emerald-200">Your request has been processed successfully.</p>
      </div>
      <div class="ml-4 flex-shrink-0 flex">
        <button class="inline-flex text-white hover:text-emerald-100 dark:hover:text-emerald-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-emerald-600 focus:ring-white rounded-md">
          <span class="sr-only">Close</span>
          <svg class="h-5 w-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
            <path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path>
          </svg>
        </button>
      </div>
    </div>
    <div class="absolute bottom-0 left-0 right-0 h-1 bg-gradient-to-r from-emerald-300 to-emerald-400 dark:from-emerald-600 dark:to-teal-700 animate-pulse-width"></div>
  </div>

  <!-- Information Toast -->
  <div class="mb-4 rounded-lg shadow-xl overflow-hidden transform translate-y-0 transition-all duration-500 ease-out pointer-events-auto opacity-100 scale-100
              bg-gradient-to-r from-blue-600 to-indigo-700 dark:from-blue-800 dark:to-indigo-900">
    <div class="relative flex items-center p-4">
      <div class="flex-shrink-0">
        <svg class="h-6 w-6 text-white" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
          <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clip-rule="evenodd"></path>
        </svg>
      </div>
      <div class="ml-3 flex-1 pt-0.5">
        <p class="text-sm font-semibold text-white tracking-wide">Information</p>
        <p class="mt-1 text-sm text-blue-100 dark:text-blue-200">Further details are available on the new page.</p>
      </div>
      <div class="ml-4 flex-shrink-0 flex">
        <button class="inline-flex text-white hover:text-blue-100 dark:hover:text-blue-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-blue-700 focus:ring-white rounded-md">
          <span class="sr-only">Close</span>
          <svg class="h-5 w-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
            <path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path>
          </svg>
        </button>
      </div>
    </div>
    <div class="absolute bottom-0 left-0 right-0 h-1 bg-gradient-to-r from-blue-400 to-indigo-500 dark:from-blue-700 dark:to-indigo-800 animate-pulse-width"></div>
  </div>

  <!-- Warning Toast -->
  <div class="mb-4 rounded-lg shadow-xl overflow-hidden transform translate-y-0 transition-all duration-500 ease-out pointer-events-auto opacity-100 scale-100
              bg-gradient-to-r from-yellow-500 to-orange-600 dark:from-yellow-700 dark:to-orange-800">
    <div class="relative flex items-center p-4">
      <div class="flex-shrink-0">
        <svg class="h-6 w-6 text-white" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
          <path fill-rule="evenodd" d="M8.257 3.51a1 1 0 011.486 0L17.5 11.25a1 1 0 01-.743 1.75H3.243a1 1 0 01-.743-1.75L8.257 3.51zM10 14a1 1 0 100 2 1 1 0 000-2zm-1-6a1 1 0 012 0v3a1 1 0 11-2 0V8z" clip-rule="evenodd"></path>
        </svg>
      </div>
      <div class="ml-3 flex-1 pt-0.5">
        <p class="text-sm font-semibold text-white tracking-wide">Warning!</p>
        <p class="mt-1 text-sm text-yellow-100 dark:text-yellow-200">Data submission has pending issues.</p>
      </div>
      <div class="ml-4 flex-shrink-0 flex">
        <button class="inline-flex text-white hover:text-yellow-100 dark:hover:text-yellow-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-orange-600 focus:ring-white rounded-md">
          <span class="sr-only">Close</span>
          <svg class="h-5 w-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
            <path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path>
          </svg>
        </button>
      </div>
    </div>
    <div class="absolute bottom-0 left-0 right-0 h-1 bg-gradient-to-r from-yellow-300 to-yellow-400 dark:from-yellow-600 dark:to-orange-700 animate-pulse-width"></div>
  </div>

  <!-- Error Toast -->
  <div class="rounded-lg shadow-xl overflow-hidden transform translate-y-0 transition-all duration-500 ease-out pointer-events-auto opacity-100 scale-100
              bg-gradient-to-r from-red-600 to-rose-700 dark:from-red-800 dark:to-rose-900">
    <div class="relative flex items-center p-4">
      <div class="flex-shrink-0">
        <svg class="h-6 w-6 text-white" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
          <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clip-rule="evenodd"></path>
        </svg>
      </div>
      <div class="ml-3 flex-1 pt-0.5">
        <p class="text-sm font-semibold text-white tracking-wide">Error!</p>
        <p class="mt-1 text-sm text-red-100 dark:text-red-200">Failed to submit the form. Please try again.</p>
      </div>
      <div class="ml-4 flex-shrink-0 flex">
        <button class="inline-flex text-white hover:text-red-100 dark:hover:text-red-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-rose-700 focus:ring-white rounded-md">
          <span class="sr-only">Close</span>
          <svg class="h-5 w-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
            <path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path>
          </svg>
        </button>
      </div>
    </div>
    <div class="absolute bottom-0 left-0 right-0 h-1 bg-gradient-to-r from-red-300 to-red-400 dark:from-red-600 dark:to-rose-700 animate-pulse-width"></div>
  </div>

  <style>
    @keyframes pulse-width {
      0% {
        width: 0%;
      }
      100% {
        width: 100%;
      }
    }
    .animate-pulse-width {
      animation: pulse-width 5s linear forwards;
    }
    /* Further animations for show/hide (requires JS for full functionality, but here for visual intent) */
    .hide-toast {
        opacity: 0;
        transform: translateY(20px) scale(0.95);
    }
    .show-toast {
        opacity: 1;
        transform: translateY(0) scale(1);
    }

    /* Responsive Adjustments */
    @media (max-width: 639px) {
        .fixed.bottom-4.right-4 {
            bottom: 0;
            right: 0;
            left: 0;
            width: 100%;
            max-width: none;
            padding: 1rem;
            padding-bottom: 0;
        }
        .fixed.bottom-4.right-4 > div {
            margin-bottom: 1rem;
            border-radius: 0.5rem 0.5rem 0 0;
        }
        .fixed.bottom-4.right-4 > div:last-child {
            margin-bottom: 0;
        }
    }
  </style>
</div>

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

水彩画のような柔らかな質感と虹のグラデーションが特徴の、シンプルで芸術的、そしてカラフルなeコマース向けのトースト通知コンポーネント。ダークモードのサポートにより完全にレスポンシブ。

開けるプレビュー

                <div class="fixed inset-x-0 bottom-4 z-50 flex items-center justify-center p-4 sm:p-6 lg:p-8">
  <div class="flex w-full max-w-sm flex-col space-y-3">

    <!-- Success Notification -->
    <div class="relative flex items-center justify-between rounded-xl bg-gradient-to-br from-indigo-200 via-purple-200 to-pink-200 p-4 shadow-lg dark:from-indigo-800 dark:via-purple-800 dark:to-pink-800 overflow-hidden transform transition-all duration-300 ease-out hover:scale-[1.02]">
      <!-- Watercolor Effect Background -->
      <div class="absolute inset-0 opacity-40 dark:opacity-20" style="background-image: url('https://picsum.photos/id/1053/600/400?blur=5'); background-size: cover; background-position: center;"></div>
      
      <div class="relative z-10 flex items-center space-x-3">
        <div class="flex-shrink-0 text-green-700 dark:text-green-300">
          <svg class="h-6 w-6 sm:h-7 sm:w-7" 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>
        <div class="font-medium text-gray-800 dark:text-gray-100 text-sm sm:text-base font-serif tracking-wide">
          Item Added to Cart!
        </div>
      </div>
      <button type="button" class="relative z-10 flex-shrink-0 text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200 transition-colors duration-200">
        <span class="sr-only">Close notification</span>
        <svg class="h-5 w-5 sm:h-6 sm: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="M6 18L18 6M6 6l12 12"></path>
        </svg>
      </button>
    </div>

    <!-- Info Notification -->
    <div class="relative flex items-center justify-between rounded-xl bg-gradient-to-br from-teal-200 via-cyan-200 to-blue-200 p-4 shadow-lg dark:from-teal-800 dark:via-cyan-800 dark:to-blue-800 overflow-hidden transform transition-all duration-300 ease-out hover:scale-[1.02]">
      <!-- Watercolor Effect Background -->
      <div class="absolute inset-0 opacity-40 dark:opacity-20" style="background-image: url('https://picsum.photos/id/1060/600/400?blur=5'); background-size: cover; background-position: center;"></div>

      <div class="relative z-10 flex items-center space-x-3">
        <div class="flex-shrink-0 text-blue-700 dark:text-blue-300">
          <svg class="h-6 w-6 sm:h-7 sm:w-7" 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="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
          </svg>
        </div>
        <div class="font-medium text-gray-800 dark:text-gray-100 text-sm sm:text-base font-serif tracking-wide">
          Free shipping on orders over $50!
        </div>
      </div>
      <button type="button" class="relative z-10 flex-shrink-0 text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200 transition-colors duration-200">
        <span class="sr-only">Close notification</span>
        <svg class="h-5 w-5 sm:h-6 sm: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="M6 18L18 6M6 6l12 12"></path>
        </svg>
      </button>
    </div>

    <!-- Warning Notification (Placeholder, not primary for e-commerce success/info) -->
    <div class="relative flex items-center justify-between rounded-xl bg-gradient-to-br from-yellow-200 via-orange-200 to-red-200 p-4 shadow-lg dark:from-yellow-800 dark:via-orange-800 dark:to-red-800 overflow-hidden transform transition-all duration-300 ease-out hover:scale-[1.02]">
      <!-- Watercolor Effect Background -->
      <div class="absolute inset-0 opacity-40 dark:opacity-20" style="background-image: url('https://picsum.photos/id/1069/600/400?blur=5'); background-size: cover; background-position: center;"></div>

      <div class="relative z-10 flex items-center space-x-3">
        <div class="flex-shrink-0 text-orange-700 dark:text-orange-300">
          <svg class="h-6 w-6 sm:h-7 sm:w-7" 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="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"></path>
          </svg>
        </div>
        <div class="font-medium text-gray-800 dark:text-gray-100 text-sm sm:text-base font-serif tracking-wide">
          Quantities are limited!
        </div>
      </div>
      <button type="button" class="relative z-10 flex-shrink-0 text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200 transition-colors duration-200">
        <span class="sr-only">Close notification</span>
        <svg class="h-5 w-5 sm:h-6 sm: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="M6 18L18 6M6 6l12 12"></path>
        </svg>
      </button>
    </div>

  </div>
</div>

Retro_Vintage_Pastel_Finance_Toast_Notifications

レトロ/ビンテージの美的美学、パステル調の配色を備えた、複雑で応答性の高いトースト通知コンポーネントで、金融/銀行のインターフェイス用に設計されています。ダークモードのサポートと複数の通知タイプが含まれています。

開けるプレビュー

                <div class="flex flex-col items-center justify-center min-h-screen bg-gradient-to-br from-purple-100 via-pink-100 to-rose-100 p-4 dark:from-gray-900 dark:via-gray-800 dark:to-gray-700 font-mono relative overflow-hidden">

  <!-- Retro CRT Scanline Overlay (Visual Effect Only) -->
  <div class="fixed inset-0 pointer-events-none z-50 opacity-10 dark:opacity-5" style="background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%), linear-gradient(90deg, rgba(255, 0, 0, 0.06), rgba(0, 255, 0, 0.02), rgba(0, 0, 255, 0.06)); background-size: 100% 2px, 3px 100%;">
  </div>

  <div class="w-full max-w-sm md:max-w-md lg:max-w-lg mx-auto bg-violet-50 dark:bg-gray-800 rounded-lg shadow-xl border-4 border-fuchsia-300 dark:border-fuchsia-700 relative z-10 animate-fade-in-down">
    <div class="p-4 md:p-6 bg-pink-200 dark:bg-gray-900 rounded-t-sm border-b-2 border-fuchsia-400 dark:border-fuchsia-600">
      <div class="flex justify-between items-center">
        <h2 class="text-2xl font-bold text-fuchsia-800 dark:text-fuchsia-300 tracking-wider uppercase drop-shadow-sm">System Alerts</h2>
        <div class="flex space-x-1">
          <span class="block w-3 h-3 bg-red-400 rounded-full border border-red-500 shadow-inner"></span>
          <span class="block w-3 h-3 bg-yellow-400 rounded-full border border-yellow-500 shadow-inner"></span>
          <span class="block w-3 h-3 bg-lime-400 rounded-full border border-lime-500 shadow-inner"></span>
        </div>
      </div>
    </div>

    <div class="p-4 md:p-6 space-y-4">

      <!-- Success Notification -->
      <div class="flex items-start p-3 bg-lime-100 dark:bg-green-900 border-2 border-lime-400 dark:border-green-700 rounded-md shadow-inner transition-all duration-300 hover:scale-[1.02] hover:shadow-lg animate-slide-in-right">
        <div class="flex-shrink-0 text-lime-700 dark:text-green-300 text-xl md:text-2xl pt-0.5">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 md:h-7 md:w-7" 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>
        <div class="ml-3 flex-1">
          <p class="text-sm md:text-base font-semibold text-lime-800 dark:text-green-200">Transaction Complete!</p>
          <p class="text-xs md:text-sm text-lime-700 dark:text-green-300 mt-0.5">Your payment of <span class="font-bold">$1,200.00</span> to ACME Corp. was successful.</p>
        </div>
        <button class="flex-shrink-0 p-1 text-lime-600 dark:text-green-400 hover:text-lime-800 dark:hover:text-green-200 focus:outline-none focus:ring-2 focus:ring-lime-500 dark:focus:ring-green-500 rounded-full transition-colors">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 md:h-5 md:w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
            <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
          </svg>
        </button>
      </div>

      <!-- Warning Notification -->
      <div class="flex items-start p-3 bg-yellow-100 dark:bg-yellow-900 border-2 border-yellow-400 dark:border-yellow-700 rounded-md shadow-inner transition-all duration-300 hover:scale-[1.02] hover:shadow-lg animate-slide-in-right animation-delay-200">
        <div class="flex-shrink-0 text-yellow-700 dark:text-yellow-300 text-xl md:text-2xl pt-0.5">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 md:h-7 md:w-7" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
            <path stroke-linecap="round" stroke-linejoin="round" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.332 16c-.77 1.333.192 3 1.732 3z" />
          </svg>
        </div>
        <div class="ml-3 flex-1">
          <p class="text-sm md:text-base font-semibold text-yellow-800 dark:text-yellow-200">Attention Required</p>
          <p class="text-xs md:text-sm text-yellow-700 dark:text-yellow-300 mt-0.5">High balance on Savings Account: <span class="font-bold">$98,765.43</span>. Consider diversifying.</p>
        </div>
        <button class="flex-shrink-0 p-1 text-yellow-600 dark:text-yellow-400 hover:text-yellow-800 dark:hover:text-yellow-200 focus:outline-none focus:ring-2 focus:ring-yellow-500 dark:focus:ring-yellow-500 rounded-full transition-colors">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 md:h-5 md:w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
            <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
          </svg>
        </button>
      </div>

      <!-- Error Notification -->
      <div class="flex items-start p-3 bg-red-100 dark:bg-red-900 border-2 border-red-400 dark:border-red-700 rounded-md shadow-inner transition-all duration-300 hover:scale-[1.02] hover:shadow-lg animate-slide-in-right animation-delay-400">
        <div class="flex-shrink-0 text-red-700 dark:text-red-300 text-xl md:text-2xl pt-0.5">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 md:h-7 md:w-7" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
            <path stroke-linecap="round" stroke-linejoin="round" d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z" />
          </svg>
        </div>
        <div class="ml-3 flex-1">
          <p class="text-sm md:text-base font-semibold text-red-800 dark:text-red-200">Payment Failed!</p>
          <p class="text-xs md:text-sm text-red-700 dark:text-red-300 mt-0.5">Unable to process <span class="font-bold">$50.00</span> payment. Insufficient funds.</p>
        </div>
        <button class="flex-shrink-0 p-1 text-red-600 dark:text-red-400 hover:text-red-800 dark:hover:text-red-200 focus:outline-none focus:ring-2 focus:ring-red-500 dark:focus:ring-red-500 rounded-full transition-colors">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 md:h-5 md:w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
            <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
          </svg>
        </button>
      </div>

      <!-- Info Notification with Avatar -->
      <div class="flex items-start p-3 bg-blue-100 dark:bg-blue-900 border-2 border-blue-400 dark:border-blue-700 rounded-md shadow-inner transition-all duration-300 hover:scale-[1.02] hover:shadow-lg animate-slide-in-right animation-delay-600">
        <div class="flex-shrink-0 text-blue-700 dark:text-blue-300 text-xl md:text-2xl pt-0.5">
          <img src="https://randomuser.me/api/portraits/thumb/men/75.jpg" alt="User Avatar" class="w-8 h-8 rounded-full border-2 border-blue-500 dark:border-blue-400 shadow-md object-cover">
        </div>
        <div class="ml-3 flex-1">
          <p class="text-sm md:text-base font-semibold text-blue-800 dark:text-blue-200">New Message from Support</p>
          <p class="text-xs md:text-sm text-blue-700 dark:text-blue-300 mt-0.5">Your inquiry regarding account #<span class="font-semibold">XYS890</span> has been answered.</p>
          <a href="#" class="text-xs text-blue-600 dark:text-blue-400 hover:underline mt-1 block">View Details</a>
        </div>
        <button class="flex-shrink-0 p-1 text-blue-600 dark:text-blue-400 hover:text-blue-800 dark:hover:text-blue-200 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-500 rounded-full transition-colors">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 md:h-5 md:w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
            <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
          </svg>
        </button>
      </div>

    </div>

    <div class="p-4 md:p-6 bg-pink-200 dark:bg-gray-900 rounded-b-sm border-t-2 border-fuchsia-400 dark:border-fuchsia-600 flex justify-center text-sm text-fuchsia-700 dark:text-fuchsia-400">
      <p>Notifications generated: <span class="font-bold">4</span></p>
    </div>

  </div>

  <!-- Tailwind JIT Animations (add to tailwind.config.js for full effect) -->
  <style>
    @keyframes fadeInDown {
      from { opacity: 0; transform: translateY(-20px); }
      to { opacity: 1; transform: translateY(0); }
    }
    .animate-fade-in-down {
      animation: fadeInDown 0.6s ease-out forwards;
    }

    @keyframes slideInRight {
      from { opacity: 0; transform: translateX(20px); }
      to { opacity: 1; transform: translateX(0); }
    }
    .animate-slide-in-right {
      animation: slideInRight 0.5s ease-out forwards;
    }
    .animation-delay-200 { animation-delay: 0.2s; }
    .animation-delay-400 { animation-delay: 0.4s; }
    .animation-delay-600 { animation-delay: 0.6s; }
  </style>
</div>

Retro_Vintage_Toast_Notifications_Component

CRM/ビジネスツール用のシンプルなレトロ/ビンテージをテーマにしたトースト通知コンポーネントで、温かみのあるニュートラル、レスポンシブデザイン、ダークモードのサポートが特徴です。

開けるプレビュー

                <div class="fixed inset-x-0 bottom-0 p-4 sm:p-6 lg:p-8 z-50 pointer-events-none flex flex-col items-end space-y-4">
  <!-- Success Notification -->
  <div class="max-w-xs w-full bg-stone-100 dark:bg-stone-800 rounded-lg shadow-lg overflow-hidden pointer-events-auto flex ring-1 ring-stone-900/5 dark:ring-stone-100/5 transform transition-all duration-300 ease-in-out scale-100 opacity-100 data-[notification-closed=true]:scale-90 data-[notification-closed=true]:opacity-0" role="alert" aria-live="assertive" aria-atomic="true">
    <div class="flex-1 w-0 p-4">
      <div class="flex items-start">
        <div class="flex-shrink-0 pt-0.5">
          <svg class="h-6 w-6 text-green-600 dark:text-green-400" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
            <path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
          </svg>
        </div>
        <div class="ml-3 flex-1">
          <p class="text-sm font-semibold text-stone-900 dark:text-stone-100 tracking-wide uppercase font-mono">Action Confirmed!</p>
          <p class="mt-1 text-sm text-stone-700 dark:text-stone-300 tracking-tight">Your changes have been saved successfully. Good job!</p>
        </div>
      </div>
    </div>
    <div class="flex border-l border-stone-200 dark:border-stone-700">
      <button type="button" class="w-full border border-transparent rounded-none rounded-r-lg p-4 flex items-center justify-center text-sm font-medium text-stone-600 dark:text-stone-400 hover:text-stone-900 dark:hover:text-stone-100 focus:outline-none focus:ring-2 focus:ring-stone-500 focus:ring-offset-2 dark:focus:ring-offset-stone-800" onclick="this.closest('[role=alert]').dataset.notificationClosed = 'true';">
        <span class="sr-only">Close</span>
        <svg class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
          <path d="M6.28 5.22a.75.75 0 00-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 101.06 1.06L10 11.06l3.72 3.72a.75.75 0 101.06-1.06L11.06 10l3.72-3.72a.75.75 0 00-1.06-1.06L10 8.94 6.28 5.22z" />
        </svg>
      </button>
    </div>
  </div>

  <!-- Error Notification -->
  <div class="max-w-xs w-full bg-stone-100 dark:bg-stone-800 rounded-lg shadow-lg overflow-hidden pointer-events-auto flex ring-1 ring-stone-900/5 dark:ring-stone-100/5 transform transition-all duration-300 ease-in-out scale-100 opacity-100 data-[notification-closed=true]:scale-90 data-[notification-closed=true]:opacity-0" role="alert" aria-live="assertive" aria-atomic="true">
    <div class="flex-1 w-0 p-4">
      <div class="flex items-start">
        <div class="flex-shrink-0 pt-0.5">
          <svg class="h-6 w-6 text-red-600 dark:text-red-400" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
            <path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m-9.303 3.376c-.866 1.5.174 3.35 1.9 3.35h13.713c1.726 0 2.766-1.85 1.9-3.35L13.737 4.1a1.5 1.5 0 00-2.674 0L2.697 16.126zM12 15.75h.007v.008H12v-.008z" />
          </svg>
        </div>
        <div class="ml-3 flex-1">
          <p class="text-sm font-semibold text-stone-900 dark:text-stone-100 tracking-wide uppercase font-mono">Error Encountered!</p>
          <p class="mt-1 text-sm text-stone-700 dark:text-stone-300 tracking-tight">Unable to complete your request. Please try again later.</p>
        </div>
      </div>
    </div>
    <div class="flex border-l border-stone-200 dark:border-stone-700">
      <button type="button" class="w-full border border-transparent rounded-none rounded-r-lg p-4 flex items-center justify-center text-sm font-medium text-stone-600 dark:text-stone-400 hover:text-stone-900 dark:hover:text-stone-100 focus:outline-none focus:ring-2 focus:ring-stone-500 focus:ring-offset-2 dark:focus:ring-offset-stone-800" onclick="this.closest('[role=alert]').dataset.notificationClosed = 'true';">
        <span class="sr-only">Close</span>
        <svg class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
          <path d="M6.28 5.22a.75.75 0 00-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 101.06 1.06L10 11.06l3.72 3.72a.75.75 0 101.06-1.06L11.06 10l3.72-3.72a.75.75 0 00-1.06-1.06L10 8.94 6.28 5.22z" />
        </svg>
      </button>
    </div>
  </div>

  <!-- Information Notification -->
  <div class="max-w-xs w-full bg-stone-100 dark:bg-stone-800 rounded-lg shadow-lg overflow-hidden pointer-events-auto flex ring-1 ring-stone-900/5 dark:ring-stone-100/5 transform transition-all duration-300 ease-in-out scale-100 opacity-100 data-[notification-closed=true]:scale-90 data-[notification-closed=true]:opacity-0" role="alert" aria-live="assertive" aria-atomic="true">
    <div class="flex-1 w-0 p-4">
      <div class="flex items-start">
        <div class="flex-shrink-0 pt-0.5">
          <svg class="h-6 w-6 text-blue-600 dark:text-blue-400" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
            <path stroke-linecap="round" stroke-linejoin="round" d="M11.25 11.25l.041-.02a.75.75 0 011.063.852l-.708 2.836a.75.75 0 001.063.853l.041-.021M21 12a9 9 0 11-18 0 9 9 0 0118 0zm-9-3.75h.008v.008H12V8.25z" />
          </svg>
        </div>
        <div class="ml-3 flex-1">
          <p class="text-sm font-semibold text-stone-900 dark:text-stone-100 tracking-wide uppercase font-mono">Heads Up!</p>
          <p class="mt-1 text-sm text-stone-700 dark:text-stone-300 tracking-tight">New features are rolling out soon. Stay tuned for updates.</p>
        </div>
      </div>
    </div>
    <div class="flex border-l border-stone-200 dark:border-stone-700">
      <button type="button" class="w-full border border-transparent rounded-none rounded-r-lg p-4 flex items-center justify-center text-sm font-medium text-stone-600 dark:text-stone-400 hover:text-stone-900 dark:hover:text-stone-100 focus:outline-none focus:ring-2 focus:ring-stone-500 focus:ring-offset-2 dark:focus:ring-offset-stone-800" onclick="this.closest('[role=alert]').dataset.notificationClosed = 'true';">
        <span class="sr-only">Close</span>
        <svg class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
          <path d="M6.28 5.22a.75.75 0 00-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 101.06 1.06L10 11.06l3.72 3.72a.75.75 0 101.06-1.06L11.06 10l3.72-3.72a.75.75 0 00-1.06-1.06L10 8.94 6.28 5.22z" />
        </svg>
      </button>
    </div>
  </div>
</div>

Skeuomorphic パステルトーストの通知

エンターテインメント/メディアプラットフォーム向けの複雑でスキューモーフィックなパステルテーマのトースト通知コンポーネントで、ダークモードのサポートとレスポンシブデザインを備えた複数の通知タイプを備えています。

開けるプレビュー

                <div class="p-4 sm:p-6 lg:p-8 bg-gradient-to-br from-indigo-100 via-purple-100 to-pink-100 min-h-screen flex items-start justify-center dark:from-gray-900 dark:via-gray-800 dark:to-gray-950 font-sans">
  <div class="w-full max-w-md space-y-4 sm:space-y-6">

    <!-- Success Notification -->
    <div class="relative flex items-center p-4 pr-12 rounded-2xl bg-gradient-to-br from-green-200 to-green-300 shadow-xl transition-all duration-300 ease-in-out transform hover:scale-[1.02] dark:from-green-700 dark:to-green-800 dark:shadow-[0_4px_15px_rgba(0,255,0,0.3)] dark:border dark:border-green-600 border border-green-300">
      <div class="flex-shrink-0 w-12 h-12 rounded-full bg-green-500 flex items-center justify-center shadow-inner-lg shadow-green-700/50 dark:bg-green-600 dark:shadow-green-900/50">
        <svg class="w-7 h-7 text-white" 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="ml-4 flex-1">
        <p class="text-lg font-bold text-green-800 dark:text-green-200 drop-shadow-sm">Download Complete</p>
        <p class="text-sm text-green-700 dark:text-green-300">Your movie 'The Abyss' is ready to watch!</p>
        <div class="mt-2 text-xs text-green-600 dark:text-green-400">Just now</div>
        <div class="absolute bottom-2 right-2 text-xs text-green-600/70 dark:text-green-400/70 font-mono">ID: #2023-A001</div>
      </div>
      <button aria-label="Close success notification" class="absolute top-3 right-3 w-8 h-8 rounded-full bg-green-400/70 hover:bg-green-500/80 transition-colors duration-200 flex items-center justify-center shadow-md dark:bg-green-600/70 dark:hover:bg-green-700/80">
        <svg class="w-5 h-5 text-green-800 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="M6 18L18 6M6 6l12 12"></path>
        </svg>
      </button>
    </div>

    <!-- Warning Notification -->
    <div class="relative flex items-center p-4 pr-12 rounded-2xl bg-gradient-to-br from-yellow-200 to-yellow-300 shadow-xl transition-all duration-300 ease-in-out transform hover:scale-[1.02] dark:from-yellow-700 dark:to-yellow-800 dark:shadow-[0_4px_15px_rgba(255,255,0,0.3)] dark:border dark:border-yellow-600 border border-yellow-300">
      <div class="flex-shrink-0 w-12 h-12 rounded-full bg-yellow-500 flex items-center justify-center shadow-inner-lg shadow-yellow-700/50 dark:bg-yellow-600 dark:shadow-yellow-900/50">
        <svg class="w-7 h-7 text-white" 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="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"></path>
        </svg>
      </div>
      <div class="ml-4 flex-1">
        <p class="text-lg font-bold text-yellow-800 dark:text-yellow-200 drop-shadow-sm">Parental Advisory</p>
        <p class="text-sm text-yellow-700 dark:text-yellow-300">Content not suitable for all ages. Viewer discretion advised.</p>
        <div class="mt-2 text-xs text-yellow-600 dark:text-yellow-400">1 minute ago</div>
        <div class="absolute bottom-2 right-2 text-xs text-yellow-600/70 dark:text-yellow-400/70 font-mono">ID: #2023-B002</div>
      </div>
      <button aria-label="Close warning notification" class="absolute top-3 right-3 w-8 h-8 rounded-full bg-yellow-400/70 hover:bg-yellow-500/80 transition-colors duration-200 flex items-center justify-center shadow-md dark:bg-yellow-600/70 dark:hover:bg-yellow-700/80">
        <svg class="w-5 h-5 text-yellow-800 dark:text-yellow-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="M6 18L18 6M6 6l12 12"></path>
        </svg>
      </button>
    </div>

    <!-- Error Notification -->
    <div class="relative flex items-center p-4 pr-12 rounded-2xl bg-gradient-to-br from-red-200 to-red-300 shadow-xl transition-all duration-300 ease-in-out transform hover:scale-[1.02] dark:from-red-700 dark:to-red-800 dark:shadow-[0_4px_15px_rgba(255,0,0,0.3)] dark:border dark:border-red-600 border border-red-300">
      <div class="flex-shrink-0 w-12 h-12 rounded-full bg-red-500 flex items-center justify-center shadow-inner-lg shadow-red-700/50 dark:bg-red-600 dark:shadow-red-900/50">
        <svg class="w-7 h-7 text-white" 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="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
        </svg>
      </div>
      <div class="ml-4 flex-1">
        <p class="text-lg font-bold text-red-800 dark:text-red-200 drop-shadow-sm">Playback Error</p>
        <p class="text-sm text-red-700 dark:text-red-300">Cannot play 'Episode 3': License expired (Error 403).</p>
        <div class="mt-2 text-xs text-red-600 dark:text-red-400">5 minutes ago</div>
        <div class="absolute bottom-2 right-2 text-xs text-red-600/70 dark:text-red-400/70 font-mono">ID: #2023-C003</div>
      </div>
      <button aria-label="Close error notification" class="absolute top-3 right-3 w-8 h-8 rounded-full bg-red-400/70 hover:bg-red-500/80 transition-colors duration-200 flex items-center justify-center shadow-md dark:bg-red-600/70 dark:hover:bg-red-700/80">
        <svg class="w-5 h-5 text-red-800 dark:text-red-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="M6 18L18 6M6 6l12 12"></path>
        </svg>
      </button>
    </div>

    <!-- Info Notification with Avatar/Image -->
    <div class="relative flex items-center p-4 pr-12 rounded-2xl bg-gradient-to-br from-blue-200 to-blue-300 shadow-xl transition-all duration-300 ease-in-out transform hover:scale-[1.02] dark:from-blue-700 dark:to-blue-800 dark:shadow-[0_4px_15px_rgba(0,0,255,0.3)] dark:border dark:border-blue-600 border border-blue-300">
      <div class="flex-shrink-0 w-12 h-12 rounded-full overflow-hidden bg-blue-500 flex items-center justify-center shadow-inner-lg shadow-blue-700/50 dark:bg-blue-600 dark:shadow-blue-900/50">
        <img src="https://randomuser.me/api/portraits/men/52.jpg" alt="User Avatar" class="object-cover w-full h-full border-2 border-blue-400 dark:border-blue-500"/>
      </div>
      <div class="ml-4 flex-1">
        <p class="text-lg font-bold text-blue-800 dark:text-blue-200 drop-shadow-sm">New Follower!</p>
        <p class="text-sm text-blue-700 dark:text-blue-300">John Doe just followed your 'Gaming Stream' channel.</p>
        <div class="mt-2 text-xs text-blue-600 dark:text-blue-400">15 minutes ago</div>
        <div class="absolute bottom-2 right-2 text-xs text-blue-600/70 dark:text-blue-400/70 font-mono">ID: #2023-D004</div>
      </div>
      <button aria-label="Close information notification" class="absolute top-3 right-3 w-8 h-8 rounded-full bg-blue-400/70 hover:bg-blue-500/80 transition-colors duration-200 flex items-center justify-center shadow-md dark:bg-blue-600/70 dark:hover:bg-blue-700/80">
        <svg class="w-5 h-5 text-blue-800 dark:text-blue-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="M6 18L18 6M6 6l12 12"></path>
        </svg>
      </button>
    </div>

    <!-- Custom Action/Engagement Notification -->
    <div class="relative flex flex-col sm:flex-row items-start sm:items-center p-4 rounded-2xl bg-gradient-to-br from-purple-200 to-pink-200 shadow-xl transition-all duration-300 ease-in-out transform hover:scale-[1.02] dark:from-purple-700 dark:to-pink-700 dark:shadow-[0_4px_15px_rgba(200,0,200,0.3)] dark:border dark:border-purple-600 border border-purple-300">
      <div class="flex-shrink-0 w-12 h-12 rounded-full overflow-hidden bg-white flex items-center justify-center shadow-inner-lg shadow-purple-700/50 dark:bg-purple-900 dark:shadow-purple-900/50">
        <img src="https://picsum.photos/id/104/50/50" alt="Content thumbnail" class="object-cover w-full h-full border-2 border-purple-400 dark:border-purple-500"/>
      </div>
      <div class="mt-4 sm:mt-0 sm:ml-4 flex-1">
        <p class="text-lg font-bold text-purple-800 dark:text-purple-200 drop-shadow-sm">New Release!</p>
        <p class="text-sm text-purple-700 dark:text-purple-300">'The Future's Calling' S02E01 is now available to stream.</p>
        <div class="mt-3 flex flex-col sm:flex-row sm:space-x-3 space-y-2 sm:space-y-0 text-right">
          <button class="flex-1 px-4 py-2 rounded-xl bg-purple-400 hover:bg-purple-500 text-white font-semibold shadow-md transition-all duration-200 active:scale-95 dark:bg-purple-600 dark:hover:bg-purple-700 dark:shadow-[0_2px_8px_rgba(150,0,150,0.5)]">
            Watch Now
          </button>
          <button class="flex-1 px-4 py-2 rounded-xl bg-pink-300 hover:bg-pink-400 text-pink-800 font-semibold shadow-md transition-all duration-200 active:scale-95 dark:bg-pink-600 dark:hover:bg-pink-700 dark:text-pink-100 dark:shadow-[0_2px_8px_rgba(200,0,150,0.5)]">
            Add to Watchlist
          </button>
        </div>
      </div>
      <button aria-label="Close new release notification" class="absolute top-3 right-3 w-8 h-8 rounded-full bg-opacity-70 bg-purple-300 hover:bg-purple-400 transition-colors duration-200 flex items-center justify-center shadow-md dark:bg-purple-600/70 dark:hover:bg-purple-700/80">
        <svg class="w-5 h-5 text-purple-800 dark:text-purple-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="M6 18L18 6M6 6l12 12"></path>
        </svg>
      </button>
    </div>

  </div>
</div>

<style>
  /* Adding a subtle inset shadow for skeuomorphism */
  .shadow-inner-lg {
    box-shadow: inset 0px 2px 5px rgba(0, 0, 0, 0.2), inset 0px -2px 5px rgba(255, 255, 255, 0.5);
  }

  .dark .shadow-inner-lg {
    box-shadow: inset 0px 2px 5px rgba(0, 0, 0, 0.7), inset 0px -2px 5px rgba(25, 25, 25, 0.2);
  }

  /* Drop shadow for text for better blending with skeuomorphic elements */
  .drop-shadow-sm {
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
  }

  .dark .drop-shadow-sm {
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.4);
  }
</style>

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

クリーンでミニマルなスイス/インターナショナルタイポグラフィスタイルでデザインされたトースト通知のセットで、類似の配色が特徴です。写真関連のWebサイト向けに最適化されており、ユーザーに明確で簡潔なフィードバックを提供します。レスポンシブデザインとダークモードのサポートが含まれています。

開けるプレビュー

                <div class="fixed bottom-4 right-4 z-50 w-full max-w-sm overflow-hidden p-2 sm:max-w-md">
    
    <!-- Success Toast -->
    <div class="mb-3 flex items-center rounded-lg bg-green-500/90 p-4 font-sans text-sm text-white shadow-lg backdrop-blur-sm transition-all duration-300 ease-out hover:scale-[1.01] dark:bg-green-600/90 md:p-5" role="alert">
        <div class="flex flex-shrink-0 items-center justify-center">
            <svg class="h-5 w-5 text-white" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
                <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path>
            </svg>
        </div>
        <div class="ml-3 flex-1">
            <h3 class="font-semibold uppercase tracking-wide">Success</h3>
            <p class="mt-1 text-xs sm:text-sm">Photo 'Parisian Sunset.jpg' uploaded successfully.</p>
        </div>
        <button type="button" class="ml-auto h-6 w-6 flex-shrink-0 text-white opacity-70 transition-opacity duration-300 hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-white focus:ring-opacity-50">
            <span class="sr-only">Close</span>
            <svg class="h-4 w-4" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
        </button>
    </div>

    <!-- Warning Toast -->
    <div class="mb-3 flex items-center rounded-lg bg-orange-500/90 p-4 font-sans text-sm text-white shadow-lg backdrop-blur-sm transition-all duration-300 ease-out hover:scale-[1.01] dark:bg-orange-600/90 md:p-5" role="alert">
        <div class="flex flex-shrink-0 items-center justify-center">
            <svg class="h-5 w-5 text-white" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
                <path fill-rule="evenodd" d="M8.257 3.099c.765-1.36 2.722-1.36 3.487 0L14.803 12c.765 1.36-.2 3-1.743 3H6.94c-1.543 0-2.508-1.64-1.743-3L8.257 3.099zM10 10a1 1 0 100-2 1 1 0 000 2zm0 4a1 1 0 100-2 1 1 0 000 2z" clip-rule="evenodd"></path>
            </svg>
        </div>
        <div class="ml-3 flex-1">
            <h3 class="font-semibold uppercase tracking-wide">Warning</h3>
            <p class="mt-1 text-xs sm:text-sm">Some images may exceed recommended resolution for web.</p>
        </div>
        <button type="button" class="ml-auto h-6 w-6 flex-shrink-0 text-white opacity-70 transition-opacity duration-300 hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-white focus:ring-opacity-50">
            <span class="sr-only">Close</span>
            <svg class="h-4 w-4" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
        </button>
    </div>

    <!-- Error Toast -->
    <div class="flex items-center rounded-lg bg-red-500/90 p-4 font-sans text-sm text-white shadow-lg backdrop-blur-sm transition-all duration-300 ease-out hover:scale-[1.01] dark:bg-red-600/90 md:p-5" role="alert">
        <div class="flex flex-shrink-0 items-center justify-center">
            <svg class="h-5 w-5 text-white" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
                <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clip-rule="evenodd"></path>
            </svg>
        </div>
        <div class="ml-3 flex-1">
            <h3 class="font-semibold uppercase tracking-wide">Error</h3>
            <p class="mt-1 text-xs sm:text-sm">Failed to connect to image server. Please try again.</p>
        </div>
        <button type="button" class="ml-auto h-6 w-6 flex-shrink-0 text-white opacity-70 transition-opacity duration-300 hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-white focus:ring-opacity-50">
            <span class="sr-only">Close</span>
            <svg class="h-4 w-4" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
        </button>
    </div>
</div>

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

glassmorphism デザイン、パステル調の配色、ダークモードのサポートを備えた応答性の高いトースト通知コンポーネントで、予約および予約システムに適しています。

開けるプレビュー

                <div class="relative min-h-screen bg-gradient-to-br from-blue-50 to-purple-100 p-4 dark:from-gray-900 dark:to-black sm:p-6 lg:p-8">
  <div class="absolute inset-0 bg-no-repeat bg-cover opacity-10 dark:opacity-5" style="background-image: url('https://picsum.photos/1920/1080?blur=5&grayscale'); background-attachment: fixed;"></div>
  
  <div class="relative z-10 flex flex-col items-center justify-center p-4">

    <!-- Toast Notifications Container (example, these would typically be inserted dynamically) -->
    <div class="space-y-4 w-full max-w-sm">

      <!-- Success Toast -->
      <div class="relative p-4 rounded-xl shadow-lg backdrop-blur-md bg-white/30 dark:bg-gray-800/30 ring-1 ring-white/20 dark:ring-gray-700/30 transform transition-all duration-300 hover:scale-[1.01] flex items-start space-x-3">
        <div class="flex-shrink-0">
          <svg class="h-6 w-6 text-green-600 dark:text-green-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 18 01-9 9 9 9 01-9-9 9 9 01-9-9 9 9 019-9 9 9 019 9z" />
          </svg>
        </div>
        <div class="flex-1">
          <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-100">Success! Your reservation is confirmed.</h3>
          <p class="mt-1 text-sm text-gray-600 dark:text-gray-300">See you on <strong>2024-08-15 at 10:00 AM</strong> for your 'Dental Check-up'.</p>
          <div class="mt-3 flex space-x-2">
            <button class="px-3 py-1 text-sm font-medium rounded-md focus:outline-none focus:ring-2 focus:ring-offset-2 bg-blue-100 text-blue-800 hover:bg-blue-200 dark:bg-blue-900 dark:text-blue-100 dark:hover:bg-blue-800 focus:ring-blue-500">
              View Details
            </button>
            <button class="px-3 py-1 text-sm font-medium rounded-md focus:outline-none focus:ring-2 focus:ring-offset-2 text-gray-700 hover:text-gray-900 dark:text-gray-300 dark:hover:text-gray-100 focus:ring-gray-500">
              Dismiss
            </button>
          </div>
        </div>
        <button type="button" class="absolute top-2 right-2 text-gray-400 hover:text-gray-600 dark:text-gray-500 dark:hover:text-gray-300 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-white dark:focus:ring-gray-800 rounded-md p-1">
          <span class="sr-only">Dismiss</span>
          <svg class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
            <path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd" />
          </svg>
        </button>
      </div>

      <!-- Info Toast -->
      <div class="relative p-4 rounded-xl shadow-lg backdrop-blur-md bg-white/30 dark:bg-gray-800/30 ring-1 ring-white/20 dark:ring-gray-700/30 transform transition-all duration-300 hover:scale-[1.01] flex items-start space-x-3">
        <div class="flex-shrink-0">
          <svg class="h-6 w-6 text-blue-600 dark:text-blue-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 01-9 9 9 9 01-9-9 9 9 019-9 9 9 019 9z" />
          </svg>
        </div>
        <div class="flex-1">
          <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-100">Reminder: Booking details updated.</h3>
          <p class="mt-1 text-sm text-gray-600 dark:text-gray-300">Your reservation for 'Yoga Class' at <strong>11:00 AM (changed from 10:30 AM)</strong> on August 10th has been adjusted.</p>
          <div class="mt-3 flex space-x-2">
            <button class="px-3 py-1 text-sm font-medium rounded-md focus:outline-none focus:ring-2 focus:ring-offset-2 bg-green-100 text-green-800 hover:bg-green-200 dark:bg-green-900 dark:text-green-100 dark:hover:bg-green-800 focus:ring-green-500">
              Acknowledge
            </button>
            <button class="px-3 py-1 text-sm font-medium rounded-md focus:outline-none focus:ring-2 focus:ring-offset-2 text-gray-700 hover:text-gray-900 dark:text-gray-300 dark:hover:text-gray-100 focus:ring-gray-500">
              Call Support
            </button>
          </div>
        </div>
        <button type="button" class="absolute top-2 right-2 text-gray-400 hover:text-gray-600 dark:text-gray-500 dark:hover:text-gray-300 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-white dark:focus:ring-gray-800 rounded-md p-1">
          <span class="sr-only">Dismiss</span>
          <svg class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
            <path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd" />
          </svg>
        </button>
      </div>

      <!-- Warning Toast -->
      <div class="relative p-4 rounded-xl shadow-lg backdrop-blur-md bg-white/30 dark:bg-gray-800/30 ring-1 ring-white/20 dark:ring-gray-700/30 transform transition-all duration-300 hover:scale-[1.01] flex items-start space-x-3">
        <div class="flex-shrink-0">
          <svg class="h-6 w-6 text-yellow-600 dark:text-yellow-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
          </svg>
        </div>
        <div class="flex-1">
          <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-100">Heads Up! Slot for 'Haircut' is limited.</h3>
          <p class="mt-1 text-sm text-gray-600 dark:text-gray-300">Only <strong>2 slots remaining</strong> on <strong>2024-08-20</strong>. Book now to secure your spot!</p>
          <div class="mt-3 flex space-x-2">
            <button class="px-3 py-1 text-sm font-medium rounded-md focus:outline-none focus:ring-2 focus:ring-offset-2 bg-red-100 text-red-800 hover:bg-red-200 dark:bg-red-900 dark:text-red-100 dark:hover:bg-red-800 focus:ring-red-500">
              Book Now
            </button>
            <button class="px-3 py-1 text-sm font-medium rounded-md focus:outline-none focus:ring-2 focus:ring-offset-2 text-gray-700 hover:text-gray-900 dark:text-gray-300 dark:hover:text-gray-100 focus:ring-gray-500">
              Check Calendar
            </button>
          </div>
        </div>
        <button type="button" class="absolute top-2 right-2 text-gray-400 hover:text-gray-600 dark:text-gray-500 dark:hover:text-gray-300 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-white dark:focus:ring-gray-800 rounded-md p-1">
          <span class="sr-only">Dismiss</span>
          <svg class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
            <path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd" />
          </svg>
        </button>
      </div>

      <!-- Error Toast -->
      <div class="relative p-4 rounded-xl shadow-lg backdrop-blur-md bg-white/30 dark:bg-gray-800/30 ring-1 ring-white/20 dark:ring-gray-700/30 transform transition-all duration-300 hover:scale-[1.01] flex items-start space-x-3">
        <div class="flex-shrink-0">
          <svg class="h-6 w-6 text-red-600 dark:text-red-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 01-9 9 9 9 01-9-9 9 9 019-9 9 9 019 9z" />
          </svg>
        </div>
        <div class="flex-1">
          <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-100">Error: Reservation failed.</h3>
          <p class="mt-1 text-sm text-gray-600 dark:text-gray-300">The requested time slot for <strong>'Consultation'</strong> on <strong>2024-08-18</strong> is no longer available.</p>
          <div class="mt-3 flex space-x-2">
            <button class="px-3 py-1 text-sm font-medium rounded-md focus:outline-none focus:ring-2 focus:ring-offset-2 bg-blue-100 text-blue-800 hover:bg-blue-200 dark:bg-blue-900 dark:text-blue-100 dark:hover:bg-blue-800 focus:ring-blue-500">
              Find Another Time
            </button>
            <button class="px-3 py-1 text-sm font-medium rounded-md focus:outline-none focus:ring-2 focus:ring-offset-2 text-gray-700 hover:text-gray-900 dark:text-gray-300 dark:hover:text-gray-100 focus:ring-gray-500">
              Contact Support
            </button>
          </div>
        </div>
        <button type="button" class="absolute top-2 right-2 text-gray-400 hover:text-gray-600 dark:text-gray-500 dark:hover:text-gray-300 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-white dark:focus:ring-gray-800 rounded-md p-1">
          <span class="sr-only">Dismiss</span>
          <svg class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
            <path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd" />
          </svg>
        </button>
      </div>

    </div>
  </div>
</div>

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

スイス/インターナショナルタイポグラフィスタイル、パープル/バイオレットの配色を備えた、予約/予約システム用に設計された、すっきりとしたミニマリストのトースト通知コンポーネント。ダークモードのサポートにより完全にレスポンシブ。

開けるプレビュー

                <div class="fixed inset-x-0 bottom-4 z-50 flex flex-col items-center justify-center space-y-3 px-4 sm:items-end sm:px-6">
  
  <!-- Success Notification -->
  <div class="shadow-lg dark:shadow-purple-900/50 w-full max-w-sm rounded-lg bg-white p-4 transition-all duration-300 ease-out dark:bg-gray-800 sm:max-w-md md:p-5">
    <div class="flex items-start">
      <div class="flex-shrink-0">
        <svg class="h-6 w-6 text-purple-600 dark:text-purple-400" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" aria-hidden="true">
          <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>
      <div class="ml-3 w-0 flex-1 pt-0.5">
        <p class="text-sm font-semibold text-gray-900 dark:text-gray-100 md:text-base">Booking Confirmed!</p>
        <p class="mt-1 text-xs text-gray-500 dark:text-gray-400 md:text-sm">Your appointment for 'Dental Check-up' on Nov 15th at 10:00 AM has been successfully reserved.</p>
        <div class="mt-3 flex space-x-2">
          <button type="button" class="inline-flex items-center rounded-md border border-transparent bg-purple-100 px-2.5 py-1.5 text-xs font-medium text-purple-800 hover:bg-purple-200 focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-offset-2 dark:bg-purple-700 dark:text-purple-100 dark:hover:bg-purple-600 dark:focus:ring-offset-gray-800">
            View Details
          </button>
          <button type="button" class="inline-flex items-center rounded-md border border-gray-300 bg-white px-2.5 py-1.5 text-xs font-medium text-gray-700 shadow-sm hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-offset-2 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-200 dark:hover:bg-gray-600 dark:focus:ring-offset-gray-800">
            Dismiss
          </button>
        </div>
      </div>
      <div class="ml-4 flex flex-shrink-0">
        <button type="button" class="inline-flex rounded-md bg-white text-gray-400 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-offset-2 dark:bg-gray-800 dark:text-gray-500 dark:hover:text-gray-400 dark:focus:ring-offset-gray-800">
          <span class="sr-only">Close</span>
          <svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
            <path d="M6.28 5.22a.75.75 0 00-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 101.06 1.06L10 11.06l3.72 3.72a.75.75 0 101.06-1.06L11.06 10l3.72-3.72a.75.75 0 00-1.06-1.06L10 8.94 6.28 5.22z" />
          </svg>
        </button>
      </div>
    </div>
  </div>

  <!-- Error/Warning Notification -->
  <div class="shadow-lg dark:shadow-purple-900/50 w-full max-w-sm rounded-lg bg-white p-4 transition-all duration-300 ease-out dark:bg-gray-800 sm:max-w-md md:p-5">
    <div class="flex items-start">
      <div class="flex-shrink-0">
        <svg class="h-6 w-6 text-red-600 dark:text-red-400" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" aria-hidden="true">
          <path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m-9.303 3.376c-.866 1.5.174 3.35 1.9 3.35h13.713c1.726 0 2.76-1.85 1.9-3.35L13.743 3.373c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126zM12 15.75h.007v.008H12v-.008z" />
        </svg>
      </div>
      <div class="ml-3 w-0 flex-1 pt-0.5">
        <p class="text-sm font-semibold text-gray-900 dark:text-gray-100 md:text-base">Booking Failed</p>
        <p class="mt-1 text-xs text-gray-500 dark:text-gray-400 md:text-sm">The selected time slot for 'Haircut' on Dec 1st at 3:00 PM is no longer available. Please choose another time.</p>
        <div class="mt-3 flex space-x-2">
          <button type="button" class="inline-flex items-center rounded-md border border-transparent bg-purple-100 px-2.5 py-1.5 text-xs font-medium text-purple-800 hover:bg-purple-200 focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-offset-2 dark:bg-purple-700 dark:text-purple-100 dark:hover:bg-purple-600 dark:focus:ring-offset-gray-800">
            Browse Slots
          </button>
          <button type="button" class="inline-flex items-center rounded-md border border-gray-300 bg-white px-2.5 py-1.5 text-xs font-medium text-gray-700 shadow-sm hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-offset-2 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-200 dark:hover:bg-gray-600 dark:focus:ring-offset-gray-800">
            Dismiss
          </button>
        </div>
      </div>
      <div class="ml-4 flex flex-shrink-0">
        <button type="button" class="inline-flex rounded-md bg-white text-gray-400 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-offset-2 dark:bg-gray-800 dark:text-gray-500 dark:hover:text-gray-400 dark:focus:ring-offset-gray-800">
          <span class="sr-only">Close</span>
          <svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
            <path d="M6.28 5.22a.75.75 0 00-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 101.06 1.06L10 11.06l3.72 3.72a.75.75 0 101.06-1.06L11.06 10l3.72-3.72a.75.75 0 00-1.06-1.06L10 8.94 6.28 5.22z" />
          </svg>
        </button>
      </div>
    </div>
  </div>

</div>