Alert Messages 구성 요소

비즈니스 웹 사이트를 위한 간단한 Neumorphism 스타일의 경고 메시지 구성 요소로, JavaScript 없이 Tailwind CSS를 사용하여 생생한 색상과 반응형 어두운 테마 지원을 제공합니다.

미리 보기

HTML 코드

<div class="flex items-center justify-center h-screen bg-gray-200 dark:bg-gray-800">
  <div class="p-6 rounded-xl shadow-xl bg-gray-300 dark:bg-gray-700 dark:shadow-xl-dark">
    <div class="flex items-center">
      <div class="flex-shrink-0">
        <svg class="h-6 w-6 text-green-500 dark:text-green-400" xmlns="http://www.w3.org/2000/svg" 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>
      <div class="ml-3">
        <p class="text-sm leading-5 font-medium text-gray-900 dark:text-gray-100">
          Successfully updated!
        </p>
      </div>
    </div>
  </div>
</div>

Alert Messages 구성 요소

미리 보기

HTML 코드

관련 구성 요소

Alert Messages 구성 요소

Alert Messages 구성 요소

Alert Messages 구성 요소