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 구성 요소로, Portfolio 사용을 위해 Tailwind CSS로 구축되었습니다.
Toast Notifications 구성 요소
전자 상거래를 위한 단순하고 예술적이며 다채로운 토스트 알림 구성 요소로, 수채화와 같은 부드러운 질감과 무지개 그라데이션을 특징으로 합니다. 다크 모드 지원으로 완벽하게 반응합니다.
Retro_Vintage_Toast_Notifications_Component
CRM/비즈니스 도구를 위한 간단한 레트로/빈티지 테마의 토스트 알림 구성 요소로, 따뜻한 중립색, 반응형 디자인 및 다크 모드 지원을 특징으로 합니다.