CCHub Logo CCHub Tailwind Collection
구성 요소 경고 메시지 Alert Messages 구성 요소

Alert Messages 구성 요소

파스텔 색상 구성표가 있는 브루탈리즘 스타일의 경고 메시지 구성 요소로, 비즈니스/기업 웹사이트용으로 설계되었으며 어두운 테마 지원으로 반응합니다.

미리 보기

HTML 코드 

<div class="flex flex-col space-y-4 p-6 bg-white text-black dark:bg-gray-800 dark:text-white">
    <!-- Alert Message Header -->
    <h2 class="text-2xl font-bold">Alert Messages</h2>
    
    <!-- Alert Message Item -->
    <div class="flex items-center p-4 bg-pink-100 border-l-4 border-pink-500 dark:bg-pink-800 dark:border-pink-400">
        <img class="w-10 h-10 rounded-full mr-4" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar">
        <div class="flex flex-col">
            <span class="font-semibold">John Doe</span>
            <p>This is an informational alert message to notify you about updates.</p>
        </div>
    </div>
    
    <!-- Alert Message Item -->
    <div class="flex items-center p-4 bg-yellow-100 border-l-4 border-yellow-500 dark:bg-yellow-800 dark:border-yellow-400">
        <img class="w-10 h-10 rounded-full mr-4" src="https://randomuser.me/api/portraits/men/2.jpg" alt="User Avatar">
        <div class="flex flex-col">
            <span class="font-semibold">Jane Smith</span>
            <p>This is a warning alert message to notify you about potential issues.</p>
        </div>
    </div>
    
    <!-- Alert Message Item -->
    <div class="flex items-center p-4 bg-green-100 border-l-4 border-green-500 dark:bg-green-800 dark:border-green-400">
        <img class="w-10 h-10 rounded-full mr-4" src="https://randomuser.me/api/portraits/men/3.jpg" alt="User Avatar">
        <div class="flex flex-col">
            <span class="font-semibold">Alex Johnson</span>
            <p>This is a success alert message to confirm your action.</p>
        </div>
    </div>
</div>

관련 구성 요소

Alert Messages 구성 요소

블로그/콘텐츠 소비를 위해 설계된 반응형 스큐어모픽 경고 메시지 구성 요소로, 보색 구성표와 어두운 테마 지원을 특징으로 합니다.

열다

Alert Messages 구성 요소

포트폴리오 목적을 위해 Material Design 스타일, 파스텔 색 구성표 및 복잡한 복잡성 수준이 있는 경고 메시지 구성 요소. 어두운 테마를 지원하는 반응형 디자인. JavaScript 코드가 필요하지 않으며 Tailwind 클래스가 있는 HTML만 있으면 됩니다. 다크 모드는 스타일링을 위해 Tailwind의 dark: 접두사를 사용합니다. 이미지는 이미지에 picsum.photos를 사용하고 아바타에 randomuser.me 를 사용합니다.

열다

Alert Messages 구성 요소

Tailwind CSS를 사용하여 3D 디자인, 반응형 기능 및 어두운 테마를 지원하는 Alert Messages 구성 요소입니다. 구성 요소에는 아이콘과 메시지가 있는 다양한 경고 유형(성공, 오류, 경고, 정보)이 포함됩니다.

열다