Alert Messages 구성 요소
전자 상거래를 위한 복잡하고 생생한 glassmorphism 스타일의 경고 메시지 구성 요소로, 다크 모드를 지원합니다.
HTML 코드
<div class="container mx-auto p-8">
<!-- Light Mode - Vibrant Glassmorphism Alerts -->
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<!-- Success Alert -->
<div class="bg-white bg-opacity-30 backdrop-filter backdrop-blur-lg rounded-lg p-6 shadow-lg border border-white border-opacity-20">
<div class="flex items-center">
<div class="flex-shrink-0 text-green-600">
<svg class="h-6 w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
</svg>
</div>
<div class="ml-3">
<p class="text-green-800 font-semibold">Success!</p>
<p class="text-green-700 text-sm mt-1">Your order has been placed successfully.</p>
</div>
</div>
</div>
<!-- Info Alert -->
<div class="bg-white bg-opacity-30 backdrop-filter backdrop-blur-lg rounded-lg p-6 shadow-lg border border-white border-opacity-20">
<div class="flex items-center">
<div class="flex-shrink-0 text-blue-600">
<svg class="h-6 w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
</svg>
</div>
<div class="ml-3">
<p class="text-blue-800 font-semibold">Info!</p>
<p class="text-blue-700 text-sm mt-1">Your items are being processed.</p>
</div>
</div>
</div>
<!-- Warning Alert -->
<div class="bg-white bg-opacity-30 backdrop-filter backdrop-blur-lg rounded-lg p-6 shadow-lg border border-white border-opacity-20">
<div class="flex items-center">
<div class="flex-shrink-0 text-yellow-600">
<svg class="h-6 w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h-.01m-6.938 4H2.81a1.97 1.97 0 01-1.834-2.283l1.642-7.34A1.97 1.97 0 014.655 4h14.69a1.97 1.97 0 011.833 2.375l-1.642 7.34A1.97 1.97 0 0119.19 20h-4.253"></path>
</svg>
</div>
<div class="ml-3">
<p class="text-yellow-800 font-semibold">Warning!</p>
<p class="text-yellow-700 text-sm mt-1">Payment verification is pending.</p>
</div>
</div>
</div>
<!-- Danger Alert -->
<div class="bg-white bg-opacity-30 backdrop-filter backdrop-blur-lg rounded-lg p-6 shadow-lg border border-white border-opacity-20">
<div class="flex items-center">
<div class="flex-shrink-0 text-red-600">
<svg class="h-6 w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
</svg>
</div>
<div class="ml-3">
<p class="text-red-800 font-semibold">Danger!</p>
<p class="text-red-700 text-sm mt-1">There was an issue processing your payment.</p>
</div>
</div>
</div>
</div>
<!-- Dark Mode - Vibrant Glassmorphism Alerts -->
<div class="dark mt-8 grid grid-cols-1 md:grid-cols-2 gap-6">
<!-- Success Alert -->
<div class="bg-gray-800 bg-opacity-30 backdrop-filter backdrop-blur-lg rounded-lg p-6 shadow-lg border border-gray-700 border-opacity-20">
<div class="flex items-center">
<div class="flex-shrink-0 text-green-400">
<svg class="h-6 w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
</svg>
</div>
<div class="ml-3">
<p class="text-green-300 font-semibold">Success!</p>
<p class="text-green-400 text-sm mt-1">Your order has been placed successfully.</p>
</div>
</div>
</div>
<!-- Info Alert -->
<div class="bg-gray-800 bg-opacity-30 backdrop-filter backdrop-blur-lg rounded-lg p-6 shadow-lg border border-gray-700 border-opacity-20">
<div class="flex items-center">
<div class="flex-shrink-0 text-blue-400">
<svg class="h-6 w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
</svg>
</div>
<div class="ml-3">
<p class="text-blue-300 font-semibold">Info!</p>
<p class="text-blue-400 text-sm mt-1">Your items are being processed.</p>
</div>
</div>
</div>
<!-- Warning Alert -->
<div class="bg-gray-800 bg-opacity-30 backdrop-filter backdrop-blur-lg rounded-lg p-6 shadow-lg border border-gray-700 border-opacity-20">
<div class="flex items-center">
<div class="flex-shrink-0 text-yellow-400">
<svg class="h-6 w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h-.01m-6.938 4H2.81a1.97 1.97 0 01-1.834-2.283l1.642-7.34A1.97 1.97 0 014.655 4h14.69a1.97 1.97 0 011.833 2.375l-1.642 7.34A1.97 1.97 0 0119.19 20h-4.253"></path>
</svg>
</div>
<div class="ml-3">
<p class="text-yellow-300 font-semibold">Warning!</p>
<p class="text-yellow-400 text-sm mt-1">Payment verification is pending.</p>
</div>
</div>
</div>
<!-- Danger Alert -->
<div class="bg-gray-800 bg-opacity-30 backdrop-filter backdrop-blur-lg rounded-lg p-6 shadow-lg border border-gray-700 border-opacity-20">
<div class="flex items-center">
<div class="flex-shrink-0 text-red-400">
<svg class="h-6 w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
</svg>
</div>
<div class="ml-3">
<p class="text-red-300 font-semibold">Danger!</p>
<p class="text-red-400 text-sm mt-1">There was an issue processing your payment.</p>
</div>
</div>
</div>
</div>
</div>관련 구성 요소
Monospace_Developer_Alert_Messages_Component
모노스페이스에서 영감을 받은 복잡한 경고 메시지 구성 요소로, 검은색, 흰색 및 강조 색 구성표가 있으며 블로그/콘텐츠 소비를 위해 설계되었습니다. 반응형 디자인과 다크 모드 지원이 포함됩니다.
Alert Messages 구성 요소
이 구성 요소는 미니멀리스트/플랫 디자인, 흙색 색 구성표 및 복잡한 레이아웃이 있는 경고 메시지입니다. 소셜 미디어 인터페이스용으로 설계되었으며 어두운 테마 지원으로 반응합니다. 스타일링을 위해 Tailwind CSS를 사용하며 여러 대화형 요소를 포함합니다.
Alert Messages 구성 요소
머티리얼 디자인 원칙에 따라 설계된 복잡하고 반응이 빠른 경고 메시지 구성요소로, 바다/파란색 톤을 사용하여 비영리/자선 웹사이트에 적합합니다. 여러 경고 유형, 해제 기능 및 다크 모드 지원이 포함됩니다.