구성 요소 오류 메시지 오류 메시지 구성 요소

오류 메시지 구성 요소

스큐어모픽 디자인의 오류 메시지 구성 요소로, 사실적인 경고 아이콘과 음영 테두리가 특징입니다. 반응형 레이아웃을 지원하고 다크 모드에 대한 고유한 스타일을 포함하여 다양한 테마에서 가독성과 시각적으로 적절한 모양을 보장합니다.

미리 보기

HTML 코드

<div class="rounded-lg shadow-lg bg-gradient-to-br from-red-500 to-red-700 p-6 max-w-sm mx-auto mt-10 relative overflow-hidden dark:from-gray-700 dark:to-gray-900">
    <div class="absolute top-0 left-0 w-full h-full pointer-events-none" style="background: radial-gradient(circle at top left, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0) 50%);"></div>
    <div class="flex items-center space-x-4">
        <div class="flex-shrink-0">
            <!-- Skeuomorphic Error Icon -->
            <svg class="h-8 w-8 text-white filter drop-shadow-md dark:text-red-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.306 16c-.77 1.333.192 3 1.732 3z" />
            </svg>
        </div>
        <div>
            <h3 class="text-lg leading-6 font-medium text-white drop-shadow dark:text-red-50">
                Error Occurred
            </h3>
            <p class="mt-2 text-sm text-red-100 dark:text-red-200">
                An unexpected error has occurred. Please try again later.
            </p>
        </div>
    </div>
</div>

오류 메시지 구성 요소

미리 보기

HTML 코드

관련 구성 요소

오류 메시지 구성 요소

Luxury_Premium_Healthcare_Error_Message

부동산 오류 메시지