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

오류 메시지 구성 요소

이 구성 요소는 사용자 작업에 응답하는 매력적인 애니메이션과 함께 오류 메시지를 표시합니다. 여기에는 다크 모드에 대한 지원이 포함되며 Tailwind CSS를 사용하여 반응형 효과가 있습니다.

미리 보기

HTML 코드 

<div class="flex flex-col items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-800">
  <div class="max-w-md w-full bg-white dark:bg-gray-900 shadow-lg rounded-lg p-6 transition duration-300 hover:shadow-xl transform hover:-translate-y-1">
    <div class="flex items-center mb-4">
      <img class="w-12 h-12 rounded-full mr-4" src="https://randomuser.me/api/portraits/men/10.jpg" alt="Avatar">
      <h2 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Error Title</h2>
    </div>
    <p class="text-gray-600 dark:text-gray-400 mb-4">
      This is an error message that explains what went wrong. Please check your input and try again.
    </p>
    <div class="flex items-center justify-between mt-4">
      <button class="px-4 py-2 bg-blue-500 text-white font-semibold rounded-md hover:bg-blue-600 transition duration-200 dark:bg-blue-700 dark:hover:bg-blue-800">Retry</button>
      <button class="px-4 py-2 bg-red-500 text-white font-semibold rounded-md hover:bg-red-600 transition duration-200 dark:bg-red-700 dark:hover:bg-red-800">Cancel</button>
    </div>
    <img class="mt-4 w-full h-32 object-cover rounded" src="https://picsum.photos/400/200?random=1" alt="Error Illustration">
  </div>
</div>

관련 구성 요소

오류 메시지 구성 요소

업무용으로 어두운 테마가 있는 glassmorphism 스타일 오류 메시지 구성 요소입니다. 반응형 디자인과 인터랙티브 요소로 스타일링하기 위해 Tailwind CSS를 사용합니다.

열다

오류 메시지 구성 요소

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

열다

오류 메시지 구성 요소

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

열다