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

Success Messages 구성 요소

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

미리 보기

HTML 코드 

<div class="bg-green-500 p-5 rounded-lg shadow-lg text-white max-w-md mx-auto mt-10">
    <div class="flex items-center space-x-4">
        <img src="https://randomuser.me/api/portraits/thumb/men/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full border-2 border-white">
        <h2 class="text-2xl font-bold">Success!</h2>
    </div>
    <p class="mt-2 text-lg">Your operation was completed successfully. Everything went smoothly!</p>
    <img src="https://picsum.photos/seed/picsum/400/200" alt="Success Image" class="mt-3 rounded-md w-full">
    <div class="mt-4">
        <a href="#" class="bg-white text-green-500 font-bold py-2 px-4 rounded hover:bg-gray-200 transition duration-200">View Details</a>
    </div>
</div>
<div class="bg-gray-800 p-5 rounded-lg shadow-lg text-white max-w-md mx-auto mt-10 hidden dark:block">
    <div class="flex items-center space-x-4">
        <img src="https://randomuser.me/api/portraits/thumb/men/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full border-2 border-gray-800 bg-gray-700">
        <h2 class="text-2xl font-bold">Success!</h2>
    </div>
    <p class="mt-2 text-lg">Your operation was completed successfully. Everything went smoothly!</p>
    <img src="https://picsum.photos/seed/picsum/400/200" alt="Success Image" class="mt-3 rounded-md w-full">
    <div class="mt-4">
        <a href="#" class="bg-gray-700 text-white font-bold py-2 px-4 rounded hover:bg-gray-600 transition duration-200">View Details</a>
    </div>
</div>

관련 구성 요소

SuccessMessages구성 요소

전자 상거래를 위한 간단한 성공 메시지 구성 요소로, 단색 머티리얼 디자인 미학, 반응형 레이아웃 및 어두운 테마 지원을 제공합니다.

열다

Neumorphic_Charity_Success_Message

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

열다

산업활기찬정부성공메시지

정부/공공 서비스를 위해 설계된 성공 메시지 구성 요소로, 산업적 미학, 생생한 색상 및 다크 모드를 지원합니다. 그것은 높은 채도의 악센트와 함께 원시적이고 실용적인 모습을 특징으로합니다.

열다