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

레트로 토스트 알림

레트로/빈티지 디자인, 트라이어딕 색 구성표 및 다크 모드를 지원하는 반응형 Toast Notifications 구성 요소로, Portfolio 사용을 위해 Tailwind CSS로 구축되었습니다.

미리 보기

HTML 코드 

<div class="fixed bottom-5 right-5 space-y-4">
  <!-- Success Toast -->
  <div class="bg-teal-200 dark:bg-teal-700 text-teal-800 dark:text-teal-200 p-4 rounded-lg shadow-md flex items-center space-x-3 transform transition-all duration-300 ease-out hover:scale-105">
    <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><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"></path></svg>
    <div>
      <div class="font-bold">Success!</div>
      <div class="text-sm">Item successfully added.</div>
    </div>
  </div>

  <!-- Info Toast -->
  <div class="bg-blue-200 dark:bg-blue-700 text-blue-800 dark:text-blue-200 p-4 rounded-lg shadow-md flex items-center space-x-3 transform transition-all duration-300 ease-out hover:scale-105">
    <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
    <div>
      <div class="font-bold">Information</div>
      <div class="text-sm">Your request is being processed.</div>
    </div>
  </div>

  <!-- Warning Toast -->
  <div class="bg-yellow-200 dark:bg-yellow-700 text-yellow-800 dark:text-yellow-200 p-4 rounded-lg shadow-md flex items-center space-x-3 transform transition-all duration-300 ease-out hover:scale-105">
    <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><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"></path></svg>
    <div>
      <div class="font-bold">Warning!</div>
      <div class="text-sm">Some issues were found.</div>
    </div>
  </div>

  <!-- Error Toast -->
  <div class="bg-red-200 dark:bg-red-700 text-red-800 dark:text-red-200 p-4 rounded-lg shadow-md flex items-center space-x-3 transform transition-all duration-300 ease-out hover:scale-105">
    <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
    <div>
      <div class="font-bold">Error!</div>
      <div class="text-sm">Action could not be completed.</div>
    </div>
  </div>
</div>

관련 구성 요소

Toast Notifications 구성 요소

Glassmorphism 스타일과 생생한 색 구성표를 갖춘 반응형 Toast Notifications 구성 요소로 전자 상거래 응용 프로그램에 적합합니다. 어두운 테마를 지원하며 여러 대화형 요소가 있는 복잡한 인터페이스가 있습니다.

열다

Toast Notifications 구성 요소

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

열다

Toast Notifications 구성 요소

보석 톤 그라데이션 전환이 있는 반응형 토스트 알림 구성 요소로, 정부/공공 서비스 웹사이트용으로 설계되었으며 밝은 모드와 어두운 모드를 지원합니다.

열다