CCHub Logo CCHub Tailwind Collection
구성 요소 성공 메시지 Success Messages 구성 요소

Success Messages 구성 요소

블로그/콘텐츠 읽기를 위해 다크 모드로 설계된 성공 메시지 구성 요소입니다. 그것은 유사한 색 구성표를 특징으로 하며 반응형입니다.

미리 보기

HTML 코드 

<div class="bg-gray-900 text-gray-200 p-6 rounded-lg max-w-lg mx-auto shadow-lg">
    <h2 class="text-xl font-semibold mb-4">Success!</h2>
    <div class="flex items-center mb-4">
        <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-12 h-12 rounded-full mr-3">
        <div>
            <p class="font-medium">John Doe</p>
            <p class="text-sm text-gray-400">a moment ago</p>
        </div>
    </div>
    <p class="mb-4">Your changes have been saved successfully!</p>
    <img src="https://picsum.photos/seed/success/400/200" alt="Success Image" class="rounded-lg mb-4" />
    <button class="bg-green-600 hover:bg-green-500 text-white font-semibold py-2 px-4 rounded focus:outline-none focus:ring-2 focus:ring-green-400">
        View Details
    </button>
</div>

<div class="bg-gray-800 text-gray-200 p-6 rounded-lg max-w-lg mx-auto shadow-lg mt-4">
    <h2 class="text-xl font-semibold mb-4">Success!</h2>
    <div class="flex items-center mb-4">
        <img src="https://randomuser.me/api/portraits/women/1.jpg" alt="User Avatar" class="w-12 h-12 rounded-full mr-3">
        <div>
            <p class="font-medium">Jane Smith</p>
            <p class="text-sm text-gray-400">a few moments ago</p>
        </div>
    </div>
    <p class="mb-4">Your email has been verified successfully!</p>
    <img src="https://picsum.photos/seed/email_verified/400/200" alt="Email Verification Image" class="rounded-lg mb-4" />
    <button class="bg-green-600 hover:bg-green-500 text-white font-semibold py-2 px-4 rounded focus:outline-none focus:ring-2 focus:ring-green-400">
        Check Inbox
    </button>
</div>

<div class="bg-gray-700 text-gray-200 p-6 rounded-lg max-w-lg mx-auto shadow-lg mt-4">
    <h2 class="text-xl font-semibold mb-4">Success!</h2>
    <div class="flex items-center mb-4">
        <img src="https://randomuser.me/api/portraits/men/2.jpg" alt="User Avatar" class="w-12 h-12 rounded-full mr-3">
        <div>
            <p class="font-medium">Michael Brown</p>
            <p class="text-sm text-gray-400">just now</p>
        </div>
    </div>
    <p class="mb-4">Your profile picture has been updated!</p>
    <img src="https://picsum.photos/seed/profile_update/400/200" alt="Profile Update Image" class="rounded-lg mb-4" />
    <button class="bg-green-600 hover:bg-green-500 text-white font-semibold py-2 px-4 rounded focus:outline-none focus:ring-2 focus:ring-green-400">
        View Profile
    </button>
</div>

관련 구성 요소

성공 메시지 구성 요소 - 부동산 다크 모드 캔디 색상

어두운 배경, 경쾌한 캔디 색상(풍선껌 핑크, 민트 그린) 및 다크 모드 지원을 포함한 모든 화면 크기에 대한 응답성으로 설계된 부동산 플랫폼용 성공 메시지 구성 요소입니다.

열다

Success Messages 구성 요소

파스텔 색조의 구성표, 미묘한 애니메이션, 어두운 테마를 지원하는 반응형 디자인이 포함된 간단한 성공 메시지 구성 요소입니다. 포트폴리오가 사용자 작업을 인식하도록 설계되었습니다.

열다

성공 메시지 구성 요소 - Material Design Complementary

블로그/콘텐츠 사이트에 대한 머티리얼 디자인 스타일의 성공 메시지 구성 요소로, 보색 구성표를 사용합니다. 어두운 테마 지원으로 반응형입니다. 자바스크립트가 없습니다.

열다