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

Alert Messages 구성 요소

파스텔 색조의 미니멀하고 플랫 스타일로 디자인된 반응형 경고 메시지 구성 요소로, 소셜 미디어 인터페이스에 적합하며 어두운 테마 지원을 통합합니다.

미리 보기

HTML 코드 

<div class="max-w-md mx-auto mt-5">
    <div class="bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg shadow-sm overflow-hidden">
        <div class="flex items-center p-4">
            <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-10 h-10 rounded-full mr-3">
            <div>
                <h2 class="text-gray-800 dark:text-white text-lg font-medium">John Doe</h2>
                <p class="text-gray-600 dark:text-gray-300 text-sm">Just now</p>
            </div>
        </div>
        <div class="p-4">
            <p class="text-gray-800 dark:text-gray-300">This is a simple alert message for your social media interface.</p>
        </div>
    </div>
    <div class="bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg shadow-sm overflow-hidden mt-4">
        <div class="flex items-center p-4">
            <img src="https://randomuser.me/api/portraits/women/1.jpg" alt="Avatar" class="w-10 h-10 rounded-full mr-3">
            <div>
                <h2 class="text-gray-800 dark:text-white text-lg font-medium">Jane Smith</h2>
                <p class="text-gray-600 dark:text-gray-300 text-sm">5 minutes ago</p>
            </div>
        </div>
        <div class="p-4">
            <p class="text-gray-800 dark:text-gray-300">Another alert message from the social networking interface!</p>
        </div>
    </div>
</div>

관련 구성 요소

PlayfulForestAlert

숲/녹색 팔레트, 둥근 요소 및 친근한 미학으로 디자인된 장난스럽고 쾌활한 경고 메시지 구성 요소는 비즈니스/기업 웹 사이트에 적합합니다. 반응이 빠르며 다크 모드 지원이 포함되어 있습니다.

열다

Alert Messages 구성 요소

레트로/빈티지 그레이스케일 경고 메시지 구성 요소: 다크 모드를 지원하는 소셜 미디어용 구성 요소

열다

Alert Messages 구성 요소

비즈니스 웹 사이트를 위한 간단한 Neumorphism 스타일의 경고 메시지 구성 요소로, JavaScript 없이 Tailwind CSS를 사용하여 생생한 색상과 반응형 어두운 테마 지원을 제공합니다.

열다