성공 메시지 구성 요소 17
반응형 효과와 어두운 테마 지원을 특징으로 하는 Tailwind CSS로 디자인된 대담하고 생생한 성공 메시지 구성 요소입니다.
HTML 코드
<div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-lg max-w-sm mx-auto">
<div class="flex items-center mb-4">
<img src="https://picsum.photos/50/50" alt="Avatar" class="rounded-full border-2 border-green-500 mr-3">
<h2 class="text-xl font-bold text-green-700 dark:text-green-400">Success!</h2>
</div>
<p class="text-gray-700 dark:text-gray-300">
Your operation was completed successfully. Check your account for the latest updates!
</p>
<div class="flex justify-end mt-4">
<button class="bg-green-500 hover:bg-green-600 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline">
Close
</button>
</div>
</div>
<style>
@media (prefers-color-scheme: dark) {
.bg-white {
background-color: #2D3748;
}
.text-gray-700 {
color: #E2E8F0;
}
}
</style>