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

오류 메시지 구성 요소

소셜 네트워킹 인터페이스용으로 설계된 반응형 오류 메시지 구성 요소로, Tailwind CSS와 함께 다크 모드 및 회색조 색 구성표를 사용합니다.

미리 보기

HTML 코드 

<div class="min-h-screen bg-gray-900 text-white flex flex-col items-center justify-center p-4">
    <div class="bg-gray-800 rounded-lg shadow-lg p-6 text-center max-w-md w-full">
        <h2 class="text-lg font-semibold mb-2">Error Occurred</h2>
        <p class="mb-4">There was a problem processing your request. Please try again later.</p>
        <div class="flex items-center justify-center mb-4">
            <img src="https://randomuser.me/api/portraits/men/85.jpg" alt="User Avatar" class="w-12 h-12 rounded-full border border-gray-600 mr-3">
            <span class="text-sm">John Doe</span>
        </div>
        <img src="https://picsum.photos/200/100?random=1" alt="Error Illustration" class="rounded-lg mb-4 w-full">
        <button class="bg-gray-600 hover:bg-gray-500 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline">
            Retry
        </button>
    </div>
</div>

관련 구성 요소

오류 메시지 구성 요소

레트로/빈티지 오류 메시지 파스텔 색 구성표, 복잡한 레이아웃, 반응형 디자인 및 Tailwind CSS를 사용하는 어두운 테마 지원이 있는 구성 요소입니다.

열다

Memphis_Monochromatic_Error_Message

멤피스 디자인에 영향을 받은 간단한 단색 오류 메시지 구성 요소로, 이벤트/컨퍼런스 웹 사이트에 적합합니다. 대담한 모양과 다크 모드를 지원하는 반응형 레이아웃이 특징입니다.

열다

오류 메시지 구성 요소 - 음식/레스토랑

음식/레스토랑 웹 사이트를 위한 종이/인쇄에서 영감을 받은 복잡한 트라이어딕 테마 오류 메시지 구성 요소로, 다크 모드를 지원하고 완전한 응답성을 제공합니다. 물리적 인쇄물을 시뮬레이션하는 여러 대화형 요소가 있습니다.

열다