Success Messages 구성 요소
소셜 미디어 애플리케이션을 위한 복잡하고 반응형이며 어두운 테마와 호환되는 성공 메시지 구성 요소로, Tailwind CSS를 사용하여 생생한 3D 디자인을 특징으로 합니다. 여기에는 여러 대화형 요소가 포함됩니다.
HTML 코드
<div class="min-h-screen bg-gray-100 dark:bg-gray-900 flex flex-col items-center justify-center p-4">
<div class="relative bg-white dark:bg-gray-800 rounded-3xl shadow-2xl p-8 max-w-md w-full overflow-hidden transform transition-all duration-500 hover:scale-105">
<div class="absolute top-0 left-0 w-full h-full bg-gradient-to-br from-purple-600 to-pink-500 opacity-75 rounded-3xl transform -rotate-3 translate-x-2 translate-y-2 group-hover:rotate-0 group-hover:translate-x-0 group-hover:translate-y-0 transition-all duration-500"></div>
<div class="absolute top-0 left-0 w-full h-full bg-gradient-to-br from-blue-500 to-green-400 opacity-75 rounded-3xl transform rotate-3 -translate-x-2 -translate-y-2 group-hover:rotate-0 group-hover:translate-x-0 group-hover:translate-y-0 transition-all duration-500"></div>
<div class="relative z-10 flex flex-col items-center justify-center text-center">
<div class="mb-6 flex items-center justify-center space-x-2">
<div class="relative">
<img src="https://i.pravatar.cc/150?img=1" alt="Avatar 1" class="w-16 h-16 rounded-full ring-4 ring-purple-400 object-cover shadow-lg">
<span class="absolute bottom-0 right-0 block h-4 w-4 rounded-full ring-2 ring-white bg-green-500"></span>
</div>
<div class="relative">
<img src="https://i.pravatar.cc/150?img=2" alt="Avatar 2" class="w-16 h-16 rounded-full ring-4 ring-pink-400 object-cover shadow-lg">
<span class="absolute bottom-0 right-0 block h-4 w-4 rounded-full ring-2 ring-white bg-green-500"></span>
</div>
<div class="relative">
<img src="https://i.pravatar.cc/150?img=3" alt="Avatar 3" class="w-16 h-16 rounded-full ring-4 ring-blue-400 object-cover shadow-lg">
<span class="absolute bottom-0 right-0 block h-4 w-4 rounded-full ring-2 ring-white bg-green-500"></span>
</div>
</div>
<h2 class="text-4xl font-extrabold text-gray-900 dark:text-white mb-4 leading-tight" style="text-shadow: 2px 2px 4px rgba(0,0,0,0.2);">
Success!
</h2>
<p class="text-gray-700 dark:text-gray-300 mb-6 text-lg">
Your post was successfully shared with your network. Expect lots of engagement!
</p>
<div class="w-full flex flex-col space-y-4">
<button class="w-full bg-gradient-to-r from-purple-500 to-pink-500 hover:from-purple-600 hover:to-pink-600 text-white font-bold py-3 px-6 rounded-full shadow-lg transform hover:scale-105 transition-all duration-300 text-lg">
View Post
</button>
<button class="w-full bg-gray-200 dark:bg-gray-700 hover:bg-gray-300 dark:hover:bg-gray-600 text-gray-800 dark:text-white font-bold py-3 px-6 rounded-full shadow-lg transform hover:scale-105 transition-all duration-300 text-lg">
Share Again
</button>
</div>
<div class="mt-8 text-sm text-gray-500 dark:text-gray-400">
<p>You've reached <span class="font-semibold text-purple-600">1,234 friends</span> this time!</p>
<div class="relative pt-1">
<div class="overflow-hidden h-2 mb-4 text-xs flex rounded bg-fuchsia-200 dark:bg-fuchsia-800">
<div style="width: 80%" class="shadow-none flex flex-col text-center whitespace-nowrap text-white justify-center bg-fuchsia-500 dark:bg-fuchsia-400"></div>
</div>
</div>
</div>
</div>
</div>
</div>