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

오류 메시지 구성 요소

Material Design 원칙을 사용하는 반응형 오류 메시지 구성 요소로, 트라이어드 색 구성표 및 다크 모드 지원을 통해 포트폴리오에 맞게 조정됩니다.

미리 보기

HTML 코드 

<div class="flex flex-col items-center justify-center p-5 bg-white rounded-lg shadow-md dark:bg-gray-800">
    <img src="https://picsum.photos/200/100" alt="Error Image" class="rounded-lg shadow-sm mb-4">
    <div class="text-center">
        <h2 class="text-lg font-bold text-red-600 dark:text-red-400">Error Occurred!</h2>
        <p class="mt-2 text-sm text-gray-600 dark:text-gray-300">Oops! Something went wrong while trying to display the content.</p>
        <p class="mt-2 text-sm text-gray-600 dark:text-gray-300">Please try again later or contact support.</p>
        <button class="mt-4 px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600 dark:bg-blue-700 dark:hover:bg-blue-800">Retry</button>
    </div>
</div>

관련 구성 요소

RetroReservationErrorMessage

예약/예약 시스템을 위한 간단한 레트로/빈티지 스타일의 오류 메시지 구성 요소로, 고대비 색상과 다크 모드 지원으로 완전한 응답성을 제공합니다.

열다

오류 메시지 구성 요소

단색 색 구성표의 어두운 모드용으로 설계된 반응형 오류 메시지 구성 요소입니다. 대시보드에서 오류 또는 경고를 시각화하기 위한 것으로, 해제 버튼 및 오류 아이콘과 같은 대화형 요소를 제공합니다.

열다

오류 메시지 구성 요소

대시보드용 glassmorphism 스타일의 오류 메시지 구성 요소로, 젖빛 유리 효과, 보색, 데이터 시각화 및 제어판에 적합한 복잡한 대화형 디자인을 특징으로 합니다.

열다