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>

관련 구성 요소

토스트 알림

Tailwind CSS를 사용하여 Glassmorphism 스타일, 반응형 효과 및 어두운 테마를 지원하는 Toast Notifications 구성 요소

열다

Toast Notifications 구성 요소

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

열다

Toast Notifications 구성 요소

Glassmorphism 스타일로 디자인된 Toast Notifications 구성 요소로, 반응형 효과와 어두운 테마 지원을 특징으로 합니다. 스타일링에는 Tailwind CSS를 사용하고, 비주얼에는 picsum.photos의 플레이스홀더 이미지를, 아바타에는 randomuser.me 사용합니다.

열다