오류 메시지 구성 요소
스큐어모피즘, 트라이어딕, 색 구성표, 복잡한, 전자 상거래 오류 메시지, 반응형 디자인 및 다크 모드 지원 구성 요소.
HTML 코드
<div class="min-h-screen bg-gray-100 dark:bg-gray-800 flex items-center justify-center p-4">
<div class="max-w-sm mx-auto bg-white dark:bg-gray-700 shadow-2xl rounded-lg overflow-hidden">
<div class="p-6">
<div class="text-center">
<svg
class="mx-auto h-16 w-16 text-red-500 dark:text-red-400"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
></path>
</svg>
<h3
class="mt-2 text-2xl leading-6 font-medium text-gray-900 dark:text-gray-100"
>
Order Processing Failed
</h3>
<div class="mt-2">
<p class="text-sm text-gray-500 dark:text-gray-300">
We encountered an issue while processing your order. Please try
again later or contact support.
</p>
</div>
</div>
<div class="mt-5 sm:mt-6">
<button
type="button"
class="inline-flex justify-center w-full rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 dark:bg-blue-500 text-base font-medium text-white hover:bg-blue-700 dark:hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:focus:ring-offset-gray-800 sm:text-sm"
>
Contact Support
</button>
</div>
</div>
<div class="border-t border-gray-200 dark:border-gray-600 px-6 py-4">
<div class="text-center">
<button
type="button"
class="text-sm font-medium text-indigo-600 dark:text-indigo-400 hover:text-indigo-500 dark:hover:text-indigo-300"
>
Dismiss
</button>
</div>
</div>
</div>
</div>
관련 구성 요소
오류 메시지 구성 요소
스큐어모픽 디자인의 오류 메시지 구성 요소로, 사실적인 경고 아이콘과 음영 테두리가 특징입니다. 반응형 레이아웃을 지원하고 다크 모드에 대한 고유한 스타일을 포함하여 다양한 테마에서 가독성과 시각적으로 적절한 모양을 보장합니다.
오류 메시지 구성 요소
스위스/국제 타이포그래피 스타일과 바다/파란색 색 구성표를 사용하는 간단하고 깨끗하며 반응이 빠른 오류 메시지 구성 요소로, 음식 배달 및 레스토랑 웹 사이트에 적합합니다. 다크 모드 지원이 포함됩니다.
오류 메시지 구성 요소
대시보드용 glassmorphism 스타일의 오류 메시지 구성 요소로, 젖빛 유리 효과, 보색, 데이터 시각화 및 제어판에 적합한 복잡한 대화형 디자인을 특징으로 합니다.