CCHub Logo CCHub Tailwind Collection
구성 요소 토스트 알림 토스트 알림

토스트 알림

Minimalist/Flat Design Toast Notifications 포트폴리오 목적을 위한 유사한 색 구성표, 단순한 복잡성을 가진 구성 요소. 어두운 테마 지원으로 반응형입니다.

미리 보기

HTML 코드 

<div class="fixed bottom-4 right-4 space-y-2">
  <!-- Success Toast -->
  <div class="bg-green-500 dark:bg-green-700 text-white px-4 py-3 rounded-md shadow-md flex items-center">
    <div class="mr-2">
      <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
        <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
      </svg>
    </div>
    <div>
      <p class="font-bold">Success!</p>
      <p>Your action was completed successfully.</p>
    </div>
  </div>

  <!-- Error Toast -->
  <div class="bg-red-500 dark:bg-red-700 text-white px-4 py-3 rounded-md shadow-md flex items-center">
    <div class="mr-2">
      <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
        <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586l-1.293-1.293z" clip-rule="evenodd" />
      </svg>
    </div>
    <div>
      <p class="font-bold">Error!</p>
      <p>Something went wrong. Please try again.</p>
    </div>
  </div>

  <!-- Info Toast -->
  <div class="bg-blue-500 dark:bg-blue-700 text-white px-4 py-3 rounded-md shadow-md flex items-center">
    <div class="mr-2">
      <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
        <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clip-rule="evenodd" />
      </svg>
    </div>
    <div>
      <p class="font-bold">Information</p>
      <p>This is an informational message.</p>
    </div>
  </div>
</div>

관련 구성 요소

Toast Notifications 구성 요소

Tailwind CSS를 사용하는 미니멀하고 생동감 넘치는 Toast Notifications 구성 요소입니다. 구성 요소는 포트폴리오를 위한 간단한 레이아웃으로 설계되고, 다크 모드를 지원하며, JavaScript 없이 반응합니다.

열다

Toast Notifications 구성 요소

Glassmorphism으로 설계된 반응형 Toast Notifications 구성 요소로, 단색 색 구성표, 다크 모드 지원을 특징으로 하며 포트폴리오에서 사용할 준비가 되어 있습니다.

열다

Toast Notifications 구성 요소

파스텔 색상, 반응형 디자인, 어두운 테마 지원을 제공하는 뉴모픽 토스트 알림 구성 요소로, 블로그 및 콘텐츠 사이트에 적합합니다.

열다