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

오류 메시지 구성 요소

오류 메시지 3D 디자인, 단색 색 구성표, 대시보드 목적을 위한 중간 수준의 복잡성, 어두운 테마를 지원하는 반응형 디자인이 있는 구성 요소.

미리 보기

HTML 코드 

<div class="flex items-center justify-center h-screen bg-gray-100 dark:bg-gray-900">
  <div class="relative">
    <div class="absolute inset-0 bg-gradient-to-r from-purple-400 to-purple-600 transform -skew-y-3 rotate-1 scross-y-3 rounded-3xl dark:from-purple-700 dark:to-purple-900"></div>
    <div class="relative bg-white p-10 rounded-xl shadow-2xl text-center dark:bg-gray-800">
      <h1 class="text-3xl font-bold text-red-500 dark:text-red-400">Error!</h1>
      <p class="mt-4 text-gray-700 dark:text-gray-300">Something went wrong. Please try again later.</p>
      <button class="mt-6 px-8 py-2 bg-purple-500 text-white rounded-full hover:bg-purple-600 focus:outline-none focus:ring-2 focus:ring-purple-600 focus:ring-opacity-50 dark:bg-purple-600 dark:hover:bg-purple-700 dark:focus:ring-purple-700">Retry</button>
    </div>
  </div>
</div>

관련 구성 요소

오류 메시지 구성 요소

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

열다

오류 메시지 구성 요소

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

열다

오류 메시지 구성 요소

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

열다