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

SuccessMessages구성 요소

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

미리 보기

HTML 코드 

<div class="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900">
  <div class="relative p-6 bg-white dark:bg-gray-800 rounded-lg shadow-lg max-w-sm mx-auto">
    <div class="text-center">
      <div class="mb-4 text-green-500 mx-auto">
        <svg xmlns="http://www.w3.org/2000/svg" class="h-12 w-12 mx-auto" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
          <path stroke-linecap="round" stroke-linejoin="round" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
        </svg>
      </div>
      <h3 class="text-xl font-semibold text-gray-800 dark:text-white mb-2">Order Confirmed!</h3>
      <p class="text-gray-600 dark:text-gray-300 text-sm mb-4">Your order #12345 has been successfully placed.</p>
      <button class="bg-green-500 hover:bg-green-600 text-white font-bold py-2 px-4 rounded-full transition duration-300 ease-in-out">
        Continue Shopping
      </button>
    </div>
  </div>
</div>

관련 구성 요소

아르데코 성공 메시지

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

열다

Success Messages 구성 요소

성공 메시지 구성 요소: 다크 모드 - 반응형 효과 및 어두운 테마 지원 기능을 제공합니다. JavaScript 코드가 필요하지 않습니다. 다크 모드의 경우 CSS 지원으로 충분합니다.

열다

Success Messages 구성 요소

소셜 미디어 애플리케이션을 위한 복잡한 Material Design에서 영감을 받은 성공 메시지 구성 요소로, 유사한 색상, 응답성 및 다크 모드 지원을 특징으로 합니다.

열다