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

Alert Messages 구성 요소

포트폴리오 목적을 위해 Material Design 스타일, 파스텔 색 구성표 및 복잡한 복잡성 수준이 있는 경고 메시지 구성 요소. 어두운 테마를 지원하는 반응형 디자인. JavaScript 코드가 필요하지 않으며 Tailwind 클래스가 있는 HTML만 있으면 됩니다. 다크 모드는 스타일링을 위해 Tailwind의 dark: 접두사를 사용합니다. 이미지는 이미지에 picsum.photos를 사용하고 아바타에 randomuser.me 를 사용합니다.

미리 보기

HTML 코드 

<div class="container mx-auto p-4">
  <!-- Success Alert -->
  <div class="flex items-center bg-green-200 dark:bg-green-700 text-green-800 dark:text-green-200 px-4 py-3 rounded shadow-md mb-4" role="alert">
    <svg class="fill-current w-4 h-4 mr-2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M12.432 0c1.34 0 2.01.912 2.01 1.957 0 1.305-1.164 2.512-2.66 2.512-1.27 0-2.01-.733-2.01-1.831 0-1.008 1.102-1.942 2.01-1.942zm-.432 9.024c0 1.32.826 2.12 1.905 2.12 1.04 0 1.9-.851 1.9-2.12v-.97c0-1.6.792-2.012 1.936-2.012 1.04 0 1.9.851 1.9 2.12v.97c0 1.32-.826 2.12-1.905 2.12-1.04 0-1.9-.851-1.9-2.12v-.97c0-1.6-.792-2.012-1.936-2.012-1.04 0-1.9.851-1.9 2.12v.97z"/></svg>
    <p class="text-sm">Success! Your action was completed.</p>
  </div>

  <!-- Info Alert -->
  <div class="flex items-center bg-blue-200 dark:bg-blue-700 text-blue-800 dark:text-blue-200 px-4 py-3 rounded shadow-md mb-4" role="alert">
    <svg class="fill-current w-4 h-4 mr-2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M12.432 0c1.34 0 2.01.912 2.01 1.957 0 1.305-1.164 2.512-2.66 2.512-1.27 0-2.01-.733-2.01-1.831 0-1.008 1.102-1.942 2.01-1.942zm-.432 9.024c0 1.32.826 2.12 1.905 2.12 1.04 0 1.9-.851 1.9-2.12v-.97c0-1.6.792-2.012 1.936-2.012 1.04 0 1.9.851 1.9 2.12v.97c0 1.32-.826 2.12-1.905 2.12-1.04 0-1.9-.851-1.9-2.12v-.97c0-1.6-.792-2.012-1.936-2.012-1.04 0-1.9.851-1.9 2.12v.97z"/></svg>
    <p class="text-sm">Information: This is an important message.</p>
  </div>

  <!-- Warning Alert -->
  <div class="flex items-center bg-yellow-200 dark:bg-yellow-700 text-yellow-800 dark:text-yellow-200 px-4 py-3 rounded shadow-md mb-4" role="alert">
    <svg class="fill-current w-4 h-4 mr-2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M2.93 17.07A10 10 0 1 1 17.07 2.93A10 10 0 0 1 2.93 17.07zm12.73-1.41A8 8 0 1 0 4.34 4.34a8 8 0 0 0 11.32 11.32zM9 11V9h2v6H9v-4zm0-6h2v2H9V5z"/></svg>
    <p class="text-sm">Warning: Something needs your attention.</p>
  </div>

  <!-- Danger Alert -->
  <div class="flex items-center bg-red-200 dark:bg-red-700 text-red-800 dark:text-red-200 px-4 py-3 rounded shadow-md" role="alert">
    <svg class="fill-current w-4 h-4 mr-2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M10 18a8 8 0 1 0 0-16 8 8 0 0 0 0 16zM8.28 7.22a.75.75 0 0 0-1.06 1.06L8.94 10l-1.72 1.72a.75.75 0 1 0 1.06 1.06L10 11.06l1.72 1.72a.75.75 0 1 0 1.06-1.06L11.06 10l1.72-1.72a.75.75 0 0 0-1.06-1.06L10 8.94z"/></svg>
    <p class="text-sm">Error: Something went wrong.</p>
  </div>
</div>

관련 구성 요소

Alert Messages 구성 요소

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

열다

Alert Messages 구성 요소

마이크로 인터랙션, 파스텔 색 구성표, 복잡한 디자인, 비즈니스/기업용, 다크 모드 지원 및 JavaScript 없음이 포함된 반응형 경고 메시지 구성 요소.

열다

Alert Messages 구성 요소

비즈니스/기업 웹사이트를 위한 레트로/빈티지 스타일의 경고 메시지 구성 요소로, 어스 톤과 다크 모드를 지원하는 반응형 디자인을 특징으로 합니다.

열다