CCHub Logo CCHub Tailwind Collection
구성 요소 경고 메시지 Alert Messages 구성 요소

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 구성 요소

파스텔 색조의 미니멀하고 플랫 스타일로 디자인된 반응형 경고 메시지 구성 요소로, 소셜 미디어 인터페이스에 적합하며 어두운 테마 지원을 통합합니다.

열다

PlayfulForestAlert

숲/녹색 팔레트, 둥근 요소 및 친근한 미학으로 디자인된 장난스럽고 쾌활한 경고 메시지 구성 요소는 비즈니스/기업 웹 사이트에 적합합니다. 반응이 빠르며 다크 모드 지원이 포함되어 있습니다.

열다

Alert Messages 구성 요소

파스텔 색상 구성표가 있는 브루탈리즘 스타일의 경고 메시지 구성 요소로, 비즈니스/기업 웹사이트용으로 설계되었으며 어두운 테마 지원으로 반응합니다.

열다