구성 요소 경고 메시지 Alert Messages 구성 요소

Alert Messages 구성 요소

전자 상거래 사이트를 위한 간단하고 반응이 빠른 회색조 경고 메시지 구성 요소로, 다크 모드를 지원합니다.

미리 보기

HTML 코드

<div class="flex items-center p-4 text-sm text-gray-800 border border-gray-300 rounded-lg bg-gray-50 dark:bg-gray-800 dark:text-gray-300 dark:border-gray-600" role="alert">
  <svg class="flex-shrink-0 inline w-4 h-4 me-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
    <path d="M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5ZM9.5 4a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3ZM10 15.5a1 1 0 1 1 0-2 1 1 0 0 1 0 2Z"/>
  </svg>
  <span class="sr-only">Info</span>
  <div>
    <span class="font-medium">New message:</span> Your order has been placed successfully.
  </div>
</div>

관련 구성 요소

Alert Messages 구성 요소

전자 상거래를 위해 glassmorphism 효과로 설계된 반응형 경고 메시지 구성 요소입니다. 단색 색 구성표와 Tailwind CSS를 사용한 다크 모드 지원이 있는 간단한 레이아웃이 특징입니다.

열다

Glassmorphism 경고 메시지

전자 상거래 사이트를 위한 반응형 Glassmorphism 경고 메시지 구성 요소로, 다크 모드를 지원하고 Tailwind CSS로 구축된 유사한 색 구성표를 사용합니다.

열다

Alert Messages 구성 요소

다크 모드 반응형 경고 메시지 구성 요소는 포트폴리오에서 알림 또는 메시지를 표시하기 위한 것으로, 흙색과 여러 대화형 요소로 설계되었습니다.

열다