Toast Notifications 구성 요소
보석 톤 그라데이션 전환이 있는 반응형 토스트 알림 구성 요소로, 정부/공공 서비스 웹사이트용으로 설계되었으며 밝은 모드와 어두운 모드를 지원합니다.
HTML 코드
<div class="fixed bottom-4 right-4 z-50 w-full max-w-sm p-4 pointer-events-none">
<!-- Success Toast -->
<div class="mb-4 rounded-lg shadow-xl overflow-hidden transform translate-y-0 transition-all duration-500 ease-out pointer-events-auto opacity-100 scale-100
bg-gradient-to-r from-emerald-500 to-teal-600 dark:from-emerald-700 dark:to-teal-800">
<div class="relative flex items-center p-4">
<div class="flex-shrink-0">
<svg class="h-6 w-6 text-white" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path>
</svg>
</div>
<div class="ml-3 flex-1 pt-0.5">
<p class="text-sm font-semibold text-white tracking-wide">Success!</p>
<p class="mt-1 text-sm text-emerald-100 dark:text-emerald-200">Your request has been processed successfully.</p>
</div>
<div class="ml-4 flex-shrink-0 flex">
<button class="inline-flex text-white hover:text-emerald-100 dark:hover:text-emerald-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-emerald-600 focus:ring-white rounded-md">
<span class="sr-only">Close</span>
<svg class="h-5 w-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path>
</svg>
</button>
</div>
</div>
<div class="absolute bottom-0 left-0 right-0 h-1 bg-gradient-to-r from-emerald-300 to-emerald-400 dark:from-emerald-600 dark:to-teal-700 animate-pulse-width"></div>
</div>
<!-- Information Toast -->
<div class="mb-4 rounded-lg shadow-xl overflow-hidden transform translate-y-0 transition-all duration-500 ease-out pointer-events-auto opacity-100 scale-100
bg-gradient-to-r from-blue-600 to-indigo-700 dark:from-blue-800 dark:to-indigo-900">
<div class="relative flex items-center p-4">
<div class="flex-shrink-0">
<svg class="h-6 w-6 text-white" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clip-rule="evenodd"></path>
</svg>
</div>
<div class="ml-3 flex-1 pt-0.5">
<p class="text-sm font-semibold text-white tracking-wide">Information</p>
<p class="mt-1 text-sm text-blue-100 dark:text-blue-200">Further details are available on the new page.</p>
</div>
<div class="ml-4 flex-shrink-0 flex">
<button class="inline-flex text-white hover:text-blue-100 dark:hover:text-blue-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-blue-700 focus:ring-white rounded-md">
<span class="sr-only">Close</span>
<svg class="h-5 w-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path>
</svg>
</button>
</div>
</div>
<div class="absolute bottom-0 left-0 right-0 h-1 bg-gradient-to-r from-blue-400 to-indigo-500 dark:from-blue-700 dark:to-indigo-800 animate-pulse-width"></div>
</div>
<!-- Warning Toast -->
<div class="mb-4 rounded-lg shadow-xl overflow-hidden transform translate-y-0 transition-all duration-500 ease-out pointer-events-auto opacity-100 scale-100
bg-gradient-to-r from-yellow-500 to-orange-600 dark:from-yellow-700 dark:to-orange-800">
<div class="relative flex items-center p-4">
<div class="flex-shrink-0">
<svg class="h-6 w-6 text-white" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M8.257 3.51a1 1 0 011.486 0L17.5 11.25a1 1 0 01-.743 1.75H3.243a1 1 0 01-.743-1.75L8.257 3.51zM10 14a1 1 0 100 2 1 1 0 000-2zm-1-6a1 1 0 012 0v3a1 1 0 11-2 0V8z" clip-rule="evenodd"></path>
</svg>
</div>
<div class="ml-3 flex-1 pt-0.5">
<p class="text-sm font-semibold text-white tracking-wide">Warning!</p>
<p class="mt-1 text-sm text-yellow-100 dark:text-yellow-200">Data submission has pending issues.</p>
</div>
<div class="ml-4 flex-shrink-0 flex">
<button class="inline-flex text-white hover:text-yellow-100 dark:hover:text-yellow-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-orange-600 focus:ring-white rounded-md">
<span class="sr-only">Close</span>
<svg class="h-5 w-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path>
</svg>
</button>
</div>
</div>
<div class="absolute bottom-0 left-0 right-0 h-1 bg-gradient-to-r from-yellow-300 to-yellow-400 dark:from-yellow-600 dark:to-orange-700 animate-pulse-width"></div>
</div>
<!-- Error Toast -->
<div class="rounded-lg shadow-xl overflow-hidden transform translate-y-0 transition-all duration-500 ease-out pointer-events-auto opacity-100 scale-100
bg-gradient-to-r from-red-600 to-rose-700 dark:from-red-800 dark:to-rose-900">
<div class="relative flex items-center p-4">
<div class="flex-shrink-0">
<svg class="h-6 w-6 text-white" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clip-rule="evenodd"></path>
</svg>
</div>
<div class="ml-3 flex-1 pt-0.5">
<p class="text-sm font-semibold text-white tracking-wide">Error!</p>
<p class="mt-1 text-sm text-red-100 dark:text-red-200">Failed to submit the form. Please try again.</p>
</div>
<div class="ml-4 flex-shrink-0 flex">
<button class="inline-flex text-white hover:text-red-100 dark:hover:text-red-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-rose-700 focus:ring-white rounded-md">
<span class="sr-only">Close</span>
<svg class="h-5 w-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path>
</svg>
</button>
</div>
</div>
<div class="absolute bottom-0 left-0 right-0 h-1 bg-gradient-to-r from-red-300 to-red-400 dark:from-red-600 dark:to-rose-700 animate-pulse-width"></div>
</div>
<style>
@keyframes pulse-width {
0% {
width: 0%;
}
100% {
width: 100%;
}
}
.animate-pulse-width {
animation: pulse-width 5s linear forwards;
}
/* Further animations for show/hide (requires JS for full functionality, but here for visual intent) */
.hide-toast {
opacity: 0;
transform: translateY(20px) scale(0.95);
}
.show-toast {
opacity: 1;
transform: translateY(0) scale(1);
}
/* Responsive Adjustments */
@media (max-width: 639px) {
.fixed.bottom-4.right-4 {
bottom: 0;
right: 0;
left: 0;
width: 100%;
max-width: none;
padding: 1rem;
padding-bottom: 0;
}
.fixed.bottom-4.right-4 > div {
margin-bottom: 1rem;
border-radius: 0.5rem 0.5rem 0 0;
}
.fixed.bottom-4.right-4 > div:last-child {
margin-bottom: 0;
}
}
</style>
</div>관련 구성 요소
Toast Notifications 구성 요소
스위스/인터내셔널 타이포그래피 스타일, 보라색/보라색 색 구성표가 있는 깔끔하고 미니멀한 토스트 알림 구성 요소로, 예약/예약 시스템을 위해 설계되었습니다. 다크 모드 지원으로 완벽하게 반응합니다.
Toast Notifications 구성 요소
대시보드 애플리케이션용으로 설계된 다크 모드 토스트 알림 구성 요소로, 다양한 대화형 요소가 있는 보색 구성표를 특징으로 합니다.
Toast Notifications 구성 요소
Tailwind CSS를 사용하는 미니멀하고 생동감 넘치는 Toast Notifications 구성 요소입니다. 구성 요소는 포트폴리오를 위한 간단한 레이아웃으로 설계되고, 다크 모드를 지원하며, JavaScript 없이 반응합니다.