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

Alert Messages 구성 요소

마이크로 인터랙션에 중점을 둔 애니메이션, 다크 모드 지원 및 응답성이 있는 블로그를 위한 간단한 단색 경고 메시지 구성 요소입니다.

미리 보기

HTML 코드 

<div class="max-w-sm mx-auto bg-gray-100 dark:bg-gray-800 rounded-lg shadow-md overflow-hidden mt-4">
  <div class="flex items-center px-4 py-3 animate-bounce">
    <div class="flex-shrink-0">
      <svg class="h-6 w-6 text-gray-500 dark:text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
      </svg>
    </div>
    <div class="ml-3">
      <p class="text-sm leading-5 font-medium text-gray-700 dark:text-gray-300">
        New article published!
      </p>
    </div>
  </div>
</div>

관련 구성 요소

Retro_Alert_Messages_Component

대시보드에 적합한 레트로/빈티지 블랙, 화이트 및 네온 액센트 색상 구성표가 있는 간단하고 반응이 빠른 경고 메시지 구성 요소입니다. 다크 모드 지원이 포함됩니다.

열다

Glassmorphism 경고 메시지

Glassmorphism Alert Message 구성 요소는 트라이어딕 색 구성표와 단순한 레이아웃을 갖추고 있으며, 반응형 디자인과 다크 모드를 지원하는 포트폴리오용으로 설계되었습니다.

열다

Alert Messages 구성 요소

어두운 UI, 가을 색 구성표로 설계된 경고 메시지 구성 요소로 전문 컨설팅 서비스에 적합합니다. 반응이 빠르며 다크 모드를 지원합니다.

열다