CCHub Logo CCHub Tailwind Collection
구성 요소 오류 메시지 오류 메시지 구성 요소 45

오류 메시지 구성 요소 45

Tailwind CSS를 사용하여 반응형 효과와 어두운 테마 지원을 특징으로 하는 레트로/빈티지 스타일의 오류 메시지 구성 요소입니다.

미리 보기

HTML 코드 

<div class="max-w-md mx-auto bg-white dark:bg-gray-800 rounded-lg border border-gray-300 dark:border-gray-700 p-6 mt-5 shadow-lg">
    <div class="flex items-center space-x-3">
        <img class="w-12 h-12 rounded-full" src="https://randomuser.me/api/portraits/men/41.jpg" alt="User Avatar">
        <div class="flex-1">
            <h2 class="text-lg font-bold text-gray-800 dark:text-gray-200">Error Title</h2>
            <p class="text-sm text-gray-600 dark:text-gray-400">This is a descriptive message about the error that occurred. Please take the necessary action to fix it. Thank you.</p>
        </div>
    </div>
    <div class="mt-4 flex space-x-4">
        <button class="bg-blue-500 text-white font-semibold py-2 px-4 rounded-lg hover:bg-blue-600 dark:bg-blue-700 dark:hover:bg-blue-600 transition duration-200">Retry</button>
        <button class="bg-red-500 text-white font-semibold py-2 px-4 rounded-lg hover:bg-red-600 dark:bg-red-700 dark:hover:bg-red-600 transition duration-200">Cancel</button>
    </div>
    <div class="mt-4">
        <img class="rounded-lg" src="https://picsum.photos/300/200?random=1" alt="Error Illustration">
    </div>
</div>

관련 구성 요소

오류 메시지 구성 요소

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

열다

Luxury_Premium_Healthcare_Error_Message

의료 응용 프로그램을 위한 고급스러운/프리미엄 스타일의 오류 메시지 구성 요소로, 정교한 타이포그래피, 고대비 색 구성표, 다크 모드 지원을 통한 완벽한 응답성을 특징으로 합니다.

열다

오류 메시지 구성 요소

소셜 미디어 인터페이스를 위해 아날로그 색 구성표를 사용하여 Brutalism 스타일로 설계된 오류 메시지 구성 요소로, 반응형 디자인과 어두운 테마 지원을 특징으로 합니다.

열다