Alert Messages 구성 요소
마이크로 인터랙션에 중점을 둔 애니메이션, 다크 모드 지원 및 응답성이 있는 블로그를 위한 간단한 단색 경고 메시지 구성 요소입니다.
HTML 코드
<div class="max-w-sm mx-auto bg-gray-100 dark:bg-gray-800 rounded-lg shadow-md overflow-hidden mt-4">
<div class="flex items-center px-4 py-3 animate-bounce">
<div class="flex-shrink-0">
<svg class="h-6 w-6 text-gray-500 dark:text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<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" />
</svg>
</div>
<div class="ml-3">
<p class="text-sm leading-5 font-medium text-gray-700 dark:text-gray-300">
New article published!
</p>
</div>
</div>
</div>관련 구성 요소
Alert Messages 구성 요소
Tailwind CSS를 사용하여 3D 디자인, 반응형 기능 및 어두운 테마를 지원하는 Alert Messages 구성 요소입니다. 구성 요소에는 아이콘과 메시지가 있는 다양한 경고 유형(성공, 오류, 경고, 정보)이 포함됩니다.
Alert Messages 구성 요소
이 구성 요소는 미니멀리스트/플랫 디자인, 흙색 색 구성표 및 복잡한 레이아웃이 있는 경고 메시지입니다. 소셜 미디어 인터페이스용으로 설계되었으며 어두운 테마 지원으로 반응합니다. 스타일링을 위해 Tailwind CSS를 사용하며 여러 대화형 요소를 포함합니다.