CCHub Logo CCHub Tailwind Collection
구성 요소 토스트 알림 Toast Notifications 구성 요소

Toast Notifications 구성 요소

파스텔 색상의 Glassmorphism 스타일의 Toast Notifications 구성 요소는 블로그 및 콘텐츠 소비를 위해 설계되었습니다. 다크 모드를 지원하며 대화형 요소가 있는 풍부한 인터페이스를 제공합니다.

미리 보기

HTML 코드 

<div class="fixed bottom-5 right-5 z-50 space-y-4">
  <div class="bg-white dark:bg-gray-800 bg-opacity-30 backdrop-blur-md rounded-lg shadow-lg p-4 max-w-xs transition-all duration-300 transform hover:scale-105">
    <div class="flex items-center space-x-3">
      <img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" />
      <div>
        <h4 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Notification Title</h4>
        <p class="text-gray-600 dark:text-gray-400">This is a brief message for a toast notification.</p>
      </div>
    </div>
    <div class="mt-2 flex justify-between items-center">
      <span class="text-sm text-gray-500 dark:text-gray-300">5 mins ago</span>
      <button class="text-red-500 hover:text-red-600">Dismiss</button>
    </div>
  </div>

  <div class="bg-white dark:bg-gray-800 bg-opacity-30 backdrop-blur-md rounded-lg shadow-lg p-4 max-w-xs transition-all duration-300 transform hover:scale-105">
    <div class="flex items-center space-x-3">
      <img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/women/1.jpg" alt="User Avatar" />
      <div>
        <h4 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Another Notification</h4>
        <p class="text-gray-600 dark:text-gray-400">Here is another message for your consideration.</p>
      </div>
    </div>
    <div class="mt-2 flex justify-between items-center">
      <span class="text-sm text-gray-500 dark:text-gray-300">10 mins ago</span>
      <button class="text-red-500 hover:text-red-600">Dismiss</button>
    </div>
  </div>

  <div class="bg-white dark:bg-gray-800 bg-opacity-30 backdrop-blur-md rounded-lg shadow-lg p-4 max-w-xs transition-all duration-300 transform hover:scale-105">
    <div class="flex items-center space-x-3">
      <img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/men/2.jpg" alt="User Avatar" />
      <div>
        <h4 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Important Alert</h4>
        <p class="text-gray-600 dark:text-gray-400">This is an important alert that requires your attention.</p>
      </div>
    </div>
    <div class="mt-2 flex justify-between items-center">
      <span class="text-sm text-gray-500 dark:text-gray-300">15 mins ago</span>
      <button class="text-red-500 hover:text-red-600">Dismiss</button>
    </div>
  </div>
</div>

관련 구성 요소

Toast Notifications 구성 요소

Tailwind CSS로 구축된 스큐어모픽 디자인 및 다크 모드 지원 기능이 있는 반응형 Toast Notification 구성 요소입니다.

열다

Toast Notifications 구성 요소

Glassmorphism 스타일로 디자인된 Toast Notifications 구성 요소로, 반응형 효과와 어두운 테마 지원을 특징으로 합니다. 스타일링에는 Tailwind CSS를 사용하고, 비주얼에는 picsum.photos의 플레이스홀더 이미지를, 아바타에는 randomuser.me 사용합니다.

열다

Toast Notifications 구성 요소

어두운 테마를 지원하는 Tailwind CSS를 사용하는 Neumorphism 스타일의 Toast Notifications 구성 요소입니다.

열다