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

Toast Notifications 구성 요소

스위스/인터내셔널 타이포그래피 스타일, 보라색/보라색 색 구성표가 있는 깔끔하고 미니멀한 토스트 알림 구성 요소로, 예약/예약 시스템을 위해 설계되었습니다. 다크 모드 지원으로 완벽하게 반응합니다.

미리 보기

HTML 코드 

<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>

관련 구성 요소

Toast Notifications 구성 요소

Glassmorphism 스타일, Earth tones 색 구성표 및 다크 모드를 지원하는 반응형 디자인을 갖춘 Toast Notification 구성 요소.

열다

토스트 알림

반응형, 어두운 테마와 호환되는 Toast Notifications Components는 보색 구성표를 사용하는 미니멀리스트/플랫 디자인의 전자 상거래를 위한 구성 요소입니다.

열다

Toast Notifications 구성 요소

Glassmorphism으로 설계된 반응형 Toast Notifications 구성 요소로, 단색 색 구성표, 다크 모드 지원을 특징으로 하며 포트폴리오에서 사용할 준비가 되어 있습니다.

열다