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>

관련 구성 요소

Alert Messages 구성 요소

블로그용으로 설계된 미니멀리스트 경고 메시지 구성 요소로, 회색조 색 구성표를 특징으로 합니다. 여기에는 제목, 메시지 및 닫기 단추가 포함됩니다. 어두운 테마를 지원하는 반응형 디자인.

열다

Alert Messages 구성 요소

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

열다

Alert Messages 구성 요소

마이크로 인터랙션, 파스텔 색 구성표, 복잡한 디자인, 비즈니스/기업용, 다크 모드 지원 및 JavaScript 없음이 포함된 반응형 경고 메시지 구성 요소.

열다