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

성공 메시지 구성 요소 17

반응형 효과와 어두운 테마 지원을 특징으로 하는 Tailwind CSS로 디자인된 대담하고 생생한 성공 메시지 구성 요소입니다.

미리 보기

HTML 코드 

<div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-lg max-w-sm mx-auto">
    <div class="flex items-center mb-4">
        <img src="https://picsum.photos/50/50" alt="Avatar" class="rounded-full border-2 border-green-500 mr-3">
        <h2 class="text-xl font-bold text-green-700 dark:text-green-400">Success!</h2>
    </div>
    <p class="text-gray-700 dark:text-gray-300">
        Your operation was completed successfully. Check your account for the latest updates!
    </p>
    <div class="flex justify-end mt-4">
        <button class="bg-green-500 hover:bg-green-600 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline">
            Close
        </button>
    </div>
</div>

<style>
    @media (prefers-color-scheme: dark) {
        .bg-white {
            background-color: #2D3748;
        }
        .text-gray-700 {
            color: #E2E8F0;
        }
    }
</style>

관련 구성 요소

Industrial_Success_Message

CRM/비즈니스 도구용으로 설계된 웜 뉴트럴 색상의 심플한 인더스트리얼 스타일 성공 메시지 구성 요소로, 원자재 미학과 다크 모드 지원으로 완벽한 반응성을 제공합니다.

열다

Skeuomorphic_Retro_Success_Message_Component

패션/뷰티 브랜드에 적합한 스큐어모픽, 레트로/빈티지 스타일로 설계된 중간 정도의 복잡성 성공 메시지 구성 요소입니다. 반응형 디자인과 다크 모드 지원이 포함됩니다.

열다

Success Messages 구성 요소

Tailwind CSS를 사용하여 3D 디자인 스타일, 반응형 효과 및 어두운 테마 지원으로 성공 메시지를 표시하기 위한 구성 요소입니다.

열다