CCHub Logo CCHub Tailwind Collection
구성 요소 경고 메시지 Alert Messages 구성 요소

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 구성 요소

파스텔 색상 구성표가 있는 브루탈리즘 스타일의 경고 메시지 구성 요소로, 비즈니스/기업 웹사이트용으로 설계되었으며 어두운 테마 지원으로 반응합니다.

열다

Alert Messages 구성 요소

대시보드 데이터 시각화를 위한 Glassmorphism 스타일의 경고 메시지 구성 요소는 젖빛 유리 효과, 보색, 어두운 테마를 지원하는 반응형 디자인을 특징으로 합니다.

열다