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

오류 메시지 구성 요소

스큐어모피즘(Skeuomorphism), 트라이어딕(Triadic) 색 구성표 및 간단한 레이아웃을 사용하여 오류 메시지 컴포넌트를 개선했습니다. 반응성 및 다크 모드 지원을 위해 Tailwind CSS로 제작되었습니다. 자바스크립트가 없습니다.

미리 보기

HTML 코드 

<div class="max-w-md mx-auto p-6 bg-gradient-to-br from-red-500 via-black-500 to-blue-500 text-white font-sans rounded-lg shadow-lg dark:from-red-700 dark:via-black-700 dark:to-blue-700">
  <div class="flex items-center space-x-4">
    <svg class="h-8 w-8 text-white" 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.34 16c-.77 1.333.192 3 1.732 3z"/>
    </svg>
    <div class="text-lg font-bold">Error</div>
  </div>
  <div class="mt-4 text-sm">
    <p>An unexpected error occurred. Please try again later.</p>
  </div>
</div>

관련 구성 요소

오류 메시지 구성 요소

반응형 오류 메시지 구성 요소는 사용자 상호 작용을 위한 매력적인 애니메이션을 제공하고 Tailwind CSS를 사용하여 어두운 테마를 지원합니다.

열다

오류 메시지 구성 요소

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

열다

오류 메시지 구성 요소

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

열다