구성 요소 성공 메시지 Success Messages 구성 요소

Success Messages 구성 요소

성공 메시지 구성 요소: Neumorphism 디자인, 반응형 및 어두운 테마 지원

미리 보기

HTML 코드

<div class="flex items-center justify-center h-screen dark:bg-gray-900">
  <div class="bg-gray-200 p-6 rounded-xl shadow-xl s Neumorphism dark:bg-gray-800">
    <div class="text-green-500 text-2xl mb-4">
      <svg xmlns="http://www.w3.org/2000/svg" class="h-10 w-10" fill="none" viewBox="0 0 24 24" stroke="currentColor">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" 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 mb-2 dark:text-white">Success!</h3>
    <p class="text-gray-600 dark:text-gray-300">Your action was performed successfully.</p>
  </div>
</div>

관련 구성 요소

Memphis Pastel 성공 메시지

파스텔 색상을 사용하여 Memphis 디자인 미학을 가미한 간단하고 반응이 빠른 성공 메시지 구성 요소입니다. 장난기 넘치는 기하학적 모양이 특징이며 다크 모드를 지원합니다.

열다

Success Messages 구성 요소

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

열다

Success Messages 구성 요소

반응형 디자인과 다크 모드를 지원하는 간단하고 깨끗한 성공 메시지 구성 요소입니다.

열다