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

오류 메시지 구성 요소

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>

관련 구성 요소

오류 메시지 구성 요소

Tailwind CSS를 사용하여 설계된 미니멀리스트 오류 메시지 구성 요소로, 반응형 효과와 어두운 테마 지원을 제공합니다.

열다

오류 메시지 구성 요소

3D 스타일과 단색 색 구성표로 설계된 반응형 오류 메시지 구성 요소입니다. 사용자 참여를 위한 대화형 요소를 특징으로 하는 포트폴리오에 적합합니다.

열다

오류 메시지 구성 요소

스큐어모픽 디자인의 오류 메시지 구성 요소로, 사실적인 경고 아이콘과 음영 테두리가 특징입니다. 반응형 레이아웃을 지원하고 다크 모드에 대한 고유한 스타일을 포함하여 다양한 테마에서 가독성과 시각적으로 적절한 모양을 보장합니다.

열다