Success Messages 구성 요소
Tailwind CSS를 활용하여 3D 디자인 요소와 어두운 테마 지원을 특징으로 하는 반응형 성공 메시지 구성 요소입니다.
HTML 코드
<div class="max-w-md mx-auto p-6 bg-white rounded-lg shadow-lg transform transition-all duration-300 hover:scale-105 dark:bg-gray-800 dark:shadow-2xl">
<div class="flex items-center mb-4">
<img src="https://picsum.photos/50/50" alt="Avatar" class="w-12 h-12 rounded-full mr-3 shadow-md" />
<h2 class="font-bold text-lg text-gray-800 dark:text-gray-200">Success Message Title</h2>
</div>
<p class="text-gray-600 dark:text-gray-400">
Your operation was successful! This message confirms that your changes were saved properly.
</p>
<div class="mt-4">
<img src="https://picsum.photos/300/200" alt="Success Illustration" class="w-full h-auto rounded-lg shadow-md" />
</div>
</div>
<style>
@media (prefers-color-scheme: dark) {
.dark\:bg-gray-800 {
background-color: #1F2937;
}
.dark\:text-gray-200 {
color: #E5E7EB;
}
.dark\:text-gray-400 {
color: #9CA3AF;
}
.dark\:shadow-2xl {
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}
}
</style>관련 구성 요소
Memphis Pastel 성공 메시지
파스텔 색상을 사용하여 Memphis 디자인 미학을 가미한 간단하고 반응이 빠른 성공 메시지 구성 요소입니다. 장난기 넘치는 기하학적 모양이 특징이며 다크 모드를 지원합니다.
Success Messages 구성 요소
소셜 미디어 애플리케이션을 위한 복잡하고 반응형이며 어두운 테마와 호환되는 성공 메시지 구성 요소로, Tailwind CSS를 사용하여 생생한 3D 디자인을 특징으로 합니다. 여기에는 여러 대화형 요소가 포함됩니다.