구성 요소 오류 메시지 오류 메시지 구성 요소

오류 메시지 구성 요소

Tailwind CSS를 사용하여 잔인함 스타일로 설계된 반응형 오류 메시지 구성 요소로, 고대비, 특이한 레이아웃 및 다크 모드 지원을 특징으로 합니다.

미리 보기

HTML 코드

<div class="bg-white dark:bg-gray-800 border-2 border-red-600 dark:border-red-400 rounded-lg p-6 max-w-md mx-auto mt-10 shadow-lg">
    <div class="flex items-center mb-4">
        <img class="w-16 h-16 rounded-full border-2 border-red-600 dark:border-red-400 mr-4" src="https://randomuser.me/api/portraits/men/1.jpg" alt="Error Avatar">
        <h2 class="text-red-600 dark:text-red-400 font-bold text-xl">Error Title</h2>
    </div>
    <p class="text-gray-800 dark:text-gray-200 mb-3">
        This is a sample error message that describes the issue encountered. It is intentionally raw and bold to reflect the brutalism design style.
    </p>
    <img class="w-full rounded-md mb-4" src="https://picsum.photos/400/200?random=1" alt="Random placeholder image">
    <div class="flex justify-between items-center">
        <button class="bg-red-500 hover:bg-red-600 text-white font-bold py-2 px-4 rounded transition duration-150 ease-in-out">Dismiss</button>
        <span class="text-gray-500 dark:text-gray-400 text-sm">Timestamp: 20:15</span>
    </div>
</div>
<div class="bg-white dark:bg-gray-800 border-2 border-yellow-600 dark:border-yellow-400 rounded-lg p-6 max-w-md mx-auto mt-5 shadow-lg">
    <div class="flex items-center mb-4">
        <img class="w-16 h-16 rounded-full border-2 border-yellow-600 dark:border-yellow-400 mr-4" src="https://randomuser.me/api/portraits/men/2.jpg" alt="Warning Avatar">
        <h2 class="text-yellow-600 dark:text-yellow-400 font-bold text-xl">Warning Title</h2>
    </div>
    <p class="text-gray-800 dark:text-gray-200 mb-3">
        This is a warning message that might help you avoid a potential issue. It’s meant to catch your attention with a bold approach.
    </p>
    <img class="w-full rounded-md mb-4" src="https://picsum.photos/400/200?random=2" alt="Random placeholder image">
    <div class="flex justify-between items-center">
        <button class="bg-yellow-500 hover:bg-yellow-600 text-white font-bold py-2 px-4 rounded transition duration-150 ease-in-out">Acknowledge</button>
        <span class="text-gray-500 dark:text-gray-400 text-sm">Timestamp: 20:15</span>
    </div>
</div>

관련 구성 요소

오류 메시지 구성 요소

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

열다

Luxury_Premium_Healthcare_Error_Message

의료 응용 프로그램을 위한 고급스러운/프리미엄 스타일의 오류 메시지 구성 요소로, 정교한 타이포그래피, 고대비 색 구성표, 다크 모드 지원을 통한 완벽한 응답성을 특징으로 합니다.

열다

미니멀리스트 그레이스케일 오류 메시지

미니멀하고 반응이 빠른 그레이스케일 오류 메시지 구성 요소는 스포츠/피트니스 애플리케이션용으로 설계되었으며 다크 모드를 지원합니다.

열다