CCHub Logo CCHub Tailwind Collection
コンポーネント トースト通知 トースト通知

トースト通知

Glassmorphism スタイル、レスポンシブ効果、Tailwind CSS を使用したダークテーマをサポートするトースト通知コンポーネント

プレビュー

HTMLコード 

<div class="fixed bottom-0 right-0 mb-4 mr-4">
  <div class="bg-white dark:bg-gray-800 bg-opacity-20 dark:bg-opacity-20 backdrop-filter backdrop-blur-lg rounded-lg shadow-lg overflow-hidden mx-auto" style="max-width: 300px;">
    <div class="flex items-center justify-between px-4 py-2">
      <div class="flex items-center">
        <img class="h-8 w-8 rounded-full object-cover" src="https://randomuser.me/api/portraits/women/1.jpg" alt="Avatar">
        <p class="text-gray-700 dark:text-gray-200 text-sm font-semibold ml-2">User Name</p>
      </div>
      <button class="text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200 focus:outline-none">
        <svg class="h-4 w-4" 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 class="px-4 py-2">
      <p class="text-gray-600 dark:text-gray-300 text-sm">This is a toast notification.</p>
    </div>
  </div>
</div>

関連コンポーネント

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

Neumorphism Toast Notifications コンポーネントで、レスポンシブ効果とダーク テーマのサポートを備えています。

開ける

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

Glassmorphism スタイルと鮮やかな配色を備えたレスポンシブな Toast Notifications コンポーネントで、e コマース アプリケーションに適しています。ダークテーマをサポートし、複数のインタラクティブ要素を備えた複雑なインターフェイスを備えています。

開ける

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

Glassmorphism スタイルでデザインされた Toast Notifications コンポーネントで、レスポンシブ効果とダークテーマのサポートが特徴です。スタイリングには Tailwind CSS を使用し、ビジュアルには picsum.photos のプレースホルダー画像、アバターには randomuser.me を使用します。

開ける