Alert Messages 구성 요소

전자 상거래를 위해 glassmorphism 효과로 설계된 반응형 경고 메시지 구성 요소입니다. 단색 색 구성표와 Tailwind CSS를 사용한 다크 모드 지원이 있는 간단한 레이아웃이 특징입니다.

미리 보기

HTML 코드

<div class="flex flex-col items-center justify-center h-screen bg-gray-900 dark:bg-gray-800">
    <div class="bg-white dark:bg-gray-700 backdrop-blur-md rounded-xl border border-gray-300 dark:border-gray-600 shadow-lg p-6 max-w-md w-full">
        <h2 class="text-xl text-gray-800 dark:text-gray-200 mb-4">Alert Message</h2>
        <p class="text-gray-600 dark:text-gray-400 mb-4">
            Your order has been placed successfully! You will receive a confirmation email shortly.
        </p>
        <div class="flex items-center">
            <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-3">
            <div class="text-sm">
                <p class="text-gray-800 dark:text-gray-200">John Doe</p>
                <p class="text-gray-500 dark:text-gray-400">Just now</p>
            </div>
        </div>
        <div class="mt-4">
            <img src="https://picsum.photos/200/100?random=1" alt="Product Image" class="rounded-lg shadow-md">
        </div>
    </div>
</div>

Alert Messages 구성 요소

미리 보기

HTML 코드

관련 구성 요소

Alert Messages 구성 요소

Alert Messages 구성 요소

Alert Messages 구성 요소