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

Success Messages 구성 요소

반응형 효과와 어두운 테마 지원을 특징으로 하는 3D 디자인 스타일 성공 메시지 구성 요소로, 이미지 및 아바타에 대한 자리 표시자가 있습니다.

미리 보기

HTML 코드 

<div class="flex flex-col items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900">
    <div class="bg-white dark:bg-gray-800 shadow-lg rounded-lg p-6 max-w-md w-full transform transition-transform hover:scale-105">
        <div class="flex items-center space-x-4">
            <img src="https://picsum.photos/60/60" alt="Avatar" class="w-14 h-14 rounded-full shadow-md">
            <div class="flex-1">
                <h2 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Success!</h2>
                <p class="text-gray-600 dark:text-gray-300">Your operation was completed successfully.</p>
            </div>
        </div>
        <div class="mt-4 space-x-2">
            <a href="#" class="inline-block px-4 py-2 text-sm font-medium text-white bg-blue-600 rounded-md shadow hover:bg-blue-500 transition duration-300">Okay</a>
            <a href="#" class="inline-block px-4 py-2 text-sm font-medium text-gray-700 dark:text-gray-300 bg-gray-200 dark:bg-gray-700 rounded-md shadow hover:bg-gray-300 dark:hover:bg-gray-600 transition duration-300">Dismiss</a>
        </div>
    </div>
</div>

관련 구성 요소

Success Messages 구성 요소

성공 메시지를 미니멀리스트 스타일로 표시하는 반응형 구성 요소로, 어두운 테마를 지원하는 작업이나 제품을 보여주는 데 적합합니다.

열다

아르데코 성공 메시지

아르데코에서 영감을 받은 성공 메시지 구성 요소는 엔터테인먼트/미디어 플랫폼을 위해 설계된 레트로/빈티지 색상 팔레트를 사용합니다. 기하학적 패턴, 고급스러운 스타일이 특징이며 다크 모드 지원으로 완벽하게 반응합니다.

열다

Neumorphic_Charity_Success_Message

부드러운 뉴모픽 스타일과 단색 색 구성표로 설계된 간단하고 반응이 빠른 성공 메시지 구성 요소로, 비영리 및 자선 단체에 적합합니다. 다크 모드 지원이 포함됩니다.

열다