Toast Notifications 구성 요소
대시보드를 위한 복잡한 glassmorphism 스타일의 토스트 알림 구성 요소로, 반투명 요소, 흐림 효과 및 유사한 색 구성표를 특징으로 합니다. 다크 모드 지원으로 완벽하게 반응합니다.
HTML 코드
<div class="fixed inset-0 z-50 flex flex-col items-end justify-start p-4 space-y-4 pointer-events-none sm:p-6 md:p-8">
<!-- Success Toast -->
<div class="max-w-sm w-full bg-slate-100/30 dark:bg-slate-800/30 backdrop-blur-lg rounded-xl shadow-xl flex p-4 ring-1 ring-slate-200/50 dark:ring-slate-700/50 transition-all duration-300 ease-out transform translate-y-0 opacity-100 pointer-events-auto">
<div class="flex-shrink-0">
<svg class="h-6 w-6 text-emerald-500 dark:text-emerald-400" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor">
<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-slate-800 dark:text-slate-200">Success!</p>
<p class="mt-1 text-sm text-slate-600 dark:text-slate-400">Your changes have been saved successfully.</p>
<div class="mt-4 flex space-x-7">
<button type="button" class="rounded-md bg-transparent p-1.5 text-sm font-medium text-emerald-600 dark:text-emerald-400 hover:text-emerald-500 dark:hover:text-emerald-300 focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:ring-offset-2 dark:focus:ring-offset-slate-900">
View Changes
</button>
<button type="button" class="rounded-md bg-transparent p-1.5 text-sm font-medium text-slate-600 dark:text-slate-400 hover:text-slate-500 dark:hover:text-slate-300 focus:outline-none focus:ring-2 focus:ring-slate-500 focus:ring-offset-2 dark:focus:ring-offset-slate-900">
Dismiss
</button>
</div>
</div>
<div class="ml-4 flex flex-shrink-0">
<button type="button" class="inline-flex rounded-md p-1.5 text-slate-500 dark:text-slate-400 hover:text-slate-600 dark:hover:text-slate-300 focus:outline-none focus:ring-2 focus:ring-slate-500 focus:ring-offset-2 dark:focus:ring-offset-slate-900">
<span class="sr-only">Close</span>
<svg class="h-5 w-5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
</svg>
</button>
</div>
</div>
<!-- Warning Toast -->
<div class="max-w-sm w-full bg-slate-100/30 dark:bg-slate-800/30 backdrop-blur-lg rounded-xl shadow-xl flex p-4 ring-1 ring-slate-200/50 dark:ring-slate-700/50 transition-all duration-300 ease-out transform translate-y-0 opacity-100 pointer-events-auto">
<div class="flex-shrink-0">
<svg class="h-6 w-6 text-amber-500 dark:text-amber-400" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m-9.303 3.376c-.866 1.5.021 3.373 1.865 3.373h14.47c1.844 0 2.733-1.873 1.865-3.373L13.723 3.535c-.863-1.5-2.913-1.5-3.776 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-slate-800 dark:text-slate-200">Heads up!</p>
<p class="mt-1 text-sm text-slate-600 dark:text-slate-400">Your session is about to expire. Please re-authenticate.</p>
<div class="mt-4 flex space-x-7">
<button type="button" class="rounded-md bg-transparent p-1.5 text-sm font-medium text-amber-600 dark:text-amber-400 hover:text-amber-500 dark:hover:text-amber-300 focus:outline-none focus:ring-2 focus:ring-amber-500 focus:ring-offset-2 dark:focus:ring-offset-slate-900">
Renew Session
</button>
<button type="button" class="rounded-md bg-transparent p-1.5 text-sm font-medium text-slate-600 dark:text-slate-400 hover:text-slate-500 dark:hover:text-slate-300 focus:outline-none focus:ring-2 focus:ring-slate-500 focus:ring-offset-2 dark:focus:ring-offset-slate-900">
Later
</button>
</div>
</div>
<div class="ml-4 flex flex-shrink-0">
<button type="button" class="inline-flex rounded-md p-1.5 text-slate-500 dark:text-slate-400 hover:text-slate-600 dark:hover:text-slate-300 focus:outline-none focus:ring-2 focus:ring-slate-500 focus:ring-offset-2 dark:focus:ring-offset-slate-900">
<span class="sr-only">Close</span>
<svg class="h-5 w-5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
</svg>
</button>
</div>
</div>
<!-- Error Toast -->
<div class="max-w-sm w-full bg-slate-100/30 dark:bg-slate-800/30 backdrop-blur-lg rounded-xl shadow-xl flex p-4 ring-1 ring-slate-200/50 dark:ring-slate-700/50 transition-all duration-300 ease-out transform translate-y-0 opacity-100 pointer-events-auto">
<div class="flex-shrink-0">
<svg class="h-6 w-6 text-rose-500 dark:text-rose-400" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m9.303-9.303a2.25 2.25 0 00-3.182 0l-10.101 10.101a2.25 2.25 0 000 3.182L10.96 21.04a2.25 2.25 0 003.182 0L21.04 10.96a2.25 2.25 0 000-3.182zM15.75 14.75h.007v.008H15.75v-.008z" />
</svg>
</div>
<div class="ml-3 w-0 flex-1 pt-0.5">
<p class="text-sm font-semibold text-slate-800 dark:text-slate-200">Error!</p>
<p class="mt-1 text-sm text-slate-600 dark:text-slate-400">Failed to load data. Please try again later.</p>
<div class="mt-4 flex space-x-7">
<button type="button" class="rounded-md bg-transparent p-1.5 text-sm font-medium text-rose-600 dark:text-rose-400 hover:text-rose-500 dark:hover:text-rose-300 focus:outline-none focus:ring-2 focus:ring-rose-500 focus:ring-offset-2 dark:focus:ring-offset-slate-900">
Retry
</button>
<button type="button" class="rounded-md bg-transparent p-1.5 text-sm font-medium text-slate-600 dark:text-slate-400 hover:text-slate-500 dark:hover:text-slate-300 focus:outline-none focus:ring-2 focus:ring-slate-500 focus:ring-offset-2 dark:focus:ring-offset-slate-900">
Support
</button>
</div>
</div>
<div class="ml-4 flex flex-shrink-0">
<button type="button" class="inline-flex rounded-md p-1.5 text-slate-500 dark:text-slate-400 hover:text-slate-600 dark:hover:text-slate-300 focus:outline-none focus:ring-2 focus:ring-slate-500 focus:ring-offset-2 dark:focus:ring-offset-slate-900">
<span class="sr-only">Close</span>
<svg class="h-5 w-5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
</svg>
</button>
</div>
</div>
</div>관련 구성 요소
Brutalism Toast Notifications 구성 요소
브루탈리즘에서 영감을 받은 토스트 알림 세트로, 예약/예약 시스템에 적합한 따뜻한 뉴트럴 색상으로 되어 있습니다. 원시적이고 대담한 대비와 다크 모드 지원과 함께 반응형 디자인이 특징입니다.
Toast Notifications 구성 요소
보석 톤 그라데이션 전환이 있는 반응형 토스트 알림 구성 요소로, 정부/공공 서비스 웹사이트용으로 설계되었으며 밝은 모드와 어두운 모드를 지원합니다.