구성 요소 성공 메시지 아르데코 성공 메시지

아르데코 성공 메시지

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

미리 보기

HTML 코드

<div class="p-4 dark:bg-gray-900 bg-gray-50 min-h-screen flex items-center justify-center font-serif">
  <div class="max-w-md w-full mx-auto p-6 md:p-8 rounded-lg shadow-2xl relative overflow-hidden
              bg-gradient-to-br from-amber-50 dark:from-gray-800 to-amber-200 dark:to-gray-700
              border-4 border-amber-300 dark:border-amber-600
              transform transition-all duration-300 ease-in-out hover:scale-[1.01]">

    <!-- Art Deco Geometric Background Elements -->
    <div class="absolute inset-0 pointer-events-none opacity-20 dark:opacity-10">
      <svg class="w-full h-full" viewBox="0 0 100 100" preserveAspectRatio="none">
        <defs>
          <pattern id="artDecoPattern" x="0" y="0" width="10" height="10" patternUnits="userSpaceOnUse">
            <path d="M0 5 L5 0 L10 5 L5 10 Z" fill="rgba(180, 150, 60, 0.5)" class="dark:fill-amber-700"></path>
          </pattern>
        </defs>
        <rect width="100%" height="100%" fill="url(#artDecoPattern)"/>
        <path d="M0 0 L100 0 L100 100 L0 100 Z" fill="none" stroke="rgba(180, 150, 60, 0.7)" stroke-width="1.5" class="dark:stroke-amber-800"/>
      </svg>
    </div>

    <div class="relative z-10 text-center">
      <!-- Diamond / Jewel Icon -->
      <div class="mb-6 mx-auto w-20 h-20 rounded-full bg-amber-400 dark:bg-amber-600 flex items-center justify-center shadow-lg transform rotate-45 border-4 border-amber-100 dark:border-amber-800 group-hover:scale-105 transition-transform duration-300">
        <svg class="w-10 h-10 text-white dark:text-amber-100 transform -rotate-45" fill="currentColor" viewBox="0 0 20 20">
          <path fill-rule="evenodd" d="M10 18.25L2.83 11.08l.7-.71L10 16.83l6.47-6.47.7.71L10 18.25zm0-16.5L2.83 8.92l.7.71L10 2.17l6.47 6.47.7-.71L10 1.75z" clip-rule="evenodd"/>
        </svg>
      </div>

      <h2 class="text-3xl md:text-4xl font-bold mb-4 text-amber-900 dark:text-amber-100 leading-tight tracking-wider">
        <span class="block italic text-amber-700 dark:text-amber-300 text-lg mb-1">Ritz & Glamour Presents...</span>
        Success Unlocked!
      </h2>

      <p class="text-lg text-gray-700 dark:text-gray-300 mb-6 leading-relaxed">
        Your journey into the Golden Age of entertainment just got an upgrade.
        Prepare for a cinematic experience like no other.
      </p>

      <div class="flex justify-center flex-wrap gap-4">
        <button class="flex items-center px-6 py-3 rounded-full text-lg font-semibold
                       bg-amber-600 text-white dark:bg-amber-700 dark:text-amber-50
                       shadow-lg hover:shadow-xl hover:bg-amber-700 dark:hover:bg-amber-800
                       transition duration-300 ease-in-out transform hover:-translate-y-0.5
                       border border-amber-700 dark:border-amber-800">
          <svg class="w-5 h-5 mr-2" fill="currentColor" viewBox="0 0 20 20">
            <path d="M10 12a2 2 0 100-4 2 2 0 000 4z" />
            <path fill-rule="evenodd" d="M.458 10C1.732 5.943 5.522 3 10 3s8.268 2.943 9.542 7c-1.274 4.057-5.064 7-9.542 7S1.732 14.057.458 10zM14 10a4 4 0 11-8 0 4 4 0 018 0z" clip-rule="evenodd" />
          </svg>
          Explore New Features
        </button>

        <button class="flex items-center px-6 py-3 rounded-full text-lg font-semibold
                       bg-white text-amber-700 dark:bg-gray-700 dark:text-amber-300
                       shadow-lg hover:shadow-xl hover:bg-gray-100 dark:hover:bg-gray-600
                       transition duration-300 ease-in-out transform hover:-translate-y-0.5
                       border border-amber-300 dark:border-amber-600">
          <svg class="w-5 h-5 mr-2" fill="currentColor" viewBox="0 0 20 20">
            <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM9.555 7.168A1 1 0 008 8v4a1 1 0 001.555.832l3-2a1 1 0 000-1.664l-3-2z" clip-rule="evenodd" />
          </svg>
          Watch Now
        </button>
      </div>
    </div>
  </div>
</div>

관련 구성 요소

성공 메시지 구성 요소 - Material Design Complementary

블로그/콘텐츠 사이트에 대한 머티리얼 디자인 스타일의 성공 메시지 구성 요소로, 보색 구성표를 사용합니다. 어두운 테마 지원으로 반응형입니다. 자바스크립트가 없습니다.

열다

Success Messages 구성 요소

반응형 효과가 있는 미니멀한 성공 메시지 구성 요소로, Tailwind CSS를 사용하여 밝은 테마와 어두운 테마를 모두 지원합니다.

열다

스큐어모피즘SuccessMessage

대시보드에 대한 스큐어모피즘 성공 메시지, 보색 및 다크 모드가 있는 복합

열다