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

Toast Notifications 구성 요소

Tailwind CSS를 사용하는 미니멀하고 생동감 넘치는 Toast Notifications 구성 요소입니다. 구성 요소는 포트폴리오를 위한 간단한 레이아웃으로 설계되고, 다크 모드를 지원하며, JavaScript 없이 반응합니다.

미리 보기

HTML 코드 

<div class="fixed bottom-5 right-5 space-y-4">
  <!-- Toast Notification -->
  <div class="bg-white dark:bg-gray-800 p-4 rounded-lg shadow-md flex items-center justify-between">
    <div class="flex items-center">
      <div class="flex-shrink-0 bg-green-500 rounded-full p-1">
        <svg class="h-4 w-4 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
        </svg>
      </div>
      <div class="ml-3">
        <p class="text-sm font-medium text-gray-800 dark:text-white">Success!</p>
        <p class="text-sm text-gray-500 dark:text-gray-400">Your action was successful.</p>
      </div>
    </div>
    <button class="ml-4 text-gray-400 hover:text-gray-600 dark:hover:text-gray-300">
      <svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
      </svg>
    </button>
  </div>

  <!-- Another Toast Notification (Example) -->
  <div class="bg-white dark:bg-gray-800 p-4 rounded-lg shadow-md flex items-center justify-between">
    <div class="flex items-center">
      <div class="flex-shrink-0 bg-blue-500 rounded-full p-1">
        <svg class="h-4 w-4 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <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-3">
        <p class="text-sm font-medium text-gray-800 dark:text-white">Info</p>
        <p class="text-sm text-gray-500 dark:text-gray-400">This is an informational message.</p>
      </div>
    </div>
    <button class="ml-4 text-gray-400 hover:text-gray-600 dark:hover:text-gray-300">
      <svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
      </svg>
    </button>
  </div>
</div>

관련 구성 요소

Toast Notifications 구성 요소

Glassmorphism 스타일과 생생한 색 구성표를 갖춘 반응형 Toast Notifications 구성 요소로 전자 상거래 응용 프로그램에 적합합니다. 어두운 테마를 지원하며 여러 대화형 요소가 있는 복잡한 인터페이스가 있습니다.

열다

Toast Notifications 구성 요소

대시보드 애플리케이션용으로 설계된 다크 모드 토스트 알림 구성 요소로, 다양한 대화형 요소가 있는 보색 구성표를 특징으로 합니다.

열다

Skeuomorphic Pastel Toast 알림

엔터테인먼트/미디어 플랫폼을 위한 복잡하고 스큐어모픽한 파스텔 테마의 토스트 알림 구성 요소로, 다크 모드 지원 및 반응형 디자인을 갖춘 다양한 알림 유형을 제공합니다.

열다