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

토스트 알림

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

미리 보기

HTML 코드 

<div class="fixed bottom-0 right-0 mb-4 mr-4">
  <div class="bg-white dark:bg-gray-800 bg-opacity-20 dark:bg-opacity-20 backdrop-filter backdrop-blur-lg rounded-lg shadow-lg overflow-hidden mx-auto" style="max-width: 300px;">
    <div class="flex items-center justify-between px-4 py-2">
      <div class="flex items-center">
        <img class="h-8 w-8 rounded-full object-cover" src="https://randomuser.me/api/portraits/women/1.jpg" alt="Avatar">
        <p class="text-gray-700 dark:text-gray-200 text-sm font-semibold ml-2">User Name</p>
      </div>
      <button class="text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200 focus:outline-none">
        <svg class="h-4 w-4" 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="M6 18L18 6M6 6l12 12"></path>
        </svg>
      </button>
    </div>
    <div class="px-4 py-2">
      <p class="text-gray-600 dark:text-gray-300 text-sm">This is a toast notification.</p>
    </div>
  </div>
</div>

관련 구성 요소

Brutalism Toast Notifications 구성 요소

브루탈리즘에서 영감을 받은 토스트 알림 세트로, 예약/예약 시스템에 적합한 따뜻한 뉴트럴 색상으로 되어 있습니다. 원시적이고 대담한 대비와 다크 모드 지원과 함께 반응형 디자인이 특징입니다.

열다

Toast Notifications 구성 요소

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

열다

Toast Notifications 구성 요소

전자 상거래를 위한 단순하고 예술적이며 다채로운 토스트 알림 구성 요소로, 수채화와 같은 부드러운 질감과 무지개 그라데이션을 특징으로 합니다. 다크 모드 지원으로 완벽하게 반응합니다.

열다