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 구성 요소

반응형 Success Messages 구성 요소는 생생한 색 구성표와 함께 다크 모드를 위해 설계되었으며, 포트폴리오에서 작업을 보여주는 데 이상적입니다.

열다

Success Messages 구성 요소

잔인함적인 디자인 스타일로 대담한 성공 메시지를 표시하는 구성 요소로, 높은 대비, 반응형 효과 및 어두운 테마 지원을 특징으로 합니다.

열다

Success Messages 구성 요소

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

열다