Success Messages 구성 요소
Tailwind CSS를 사용하여 3D 디자인 스타일, 반응형 효과 및 어두운 테마 지원으로 성공 메시지를 표시하기 위한 구성 요소입니다.
HTML 코드
<div class="p-6 max-w-md mx-auto bg-white rounded-lg shadow-md dark:bg-gray-800 transition duration-300 ease-in-out transform hover:scale-105">
<div class="flex items-center mb-4">
<img src="https://picsum.photos/50/50?random=1" alt="User Avatar" class="w-12 h-12 rounded-full mr-4 shadow-lg dark:shadow-xl">
<div class="flex-1">
<h2 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Success!</h2>
<p class="text-gray-600 dark:text-gray-400">Your action was completed successfully.</p>
</div>
</div>
<div class="flex items-center justify-between mt-4 pt-4 border-t border-gray-200 dark:border-gray-700">
<span class="text-sm text-gray-500 dark:text-gray-400">2 minutes ago</span>
<a href="#" class="inline-flex items-center text-blue-600 hover:text-blue-500 dark:text-blue-400 dark:hover:text-blue-300">View Details</a>
</div>
</div>관련 구성 요소
Neumorphic_Charity_Success_Message
부드러운 뉴모픽 스타일과 단색 색 구성표로 설계된 간단하고 반응이 빠른 성공 메시지 구성 요소로, 비영리 및 자선 단체에 적합합니다. 다크 모드 지원이 포함됩니다.