Success Messages 구성 요소
잔인함적인 디자인 스타일로 대담한 성공 메시지를 표시하는 구성 요소로, 높은 대비, 반응형 효과 및 어두운 테마 지원을 특징으로 합니다.
HTML 코드
<div class="bg-green-500 p-5 rounded-lg shadow-lg text-white max-w-md mx-auto mt-10">
<div class="flex items-center space-x-4">
<img src="https://randomuser.me/api/portraits/thumb/men/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full border-2 border-white">
<h2 class="text-2xl font-bold">Success!</h2>
</div>
<p class="mt-2 text-lg">Your operation was completed successfully. Everything went smoothly!</p>
<img src="https://picsum.photos/seed/picsum/400/200" alt="Success Image" class="mt-3 rounded-md w-full">
<div class="mt-4">
<a href="#" class="bg-white text-green-500 font-bold py-2 px-4 rounded hover:bg-gray-200 transition duration-200">View Details</a>
</div>
</div>
<div class="bg-gray-800 p-5 rounded-lg shadow-lg text-white max-w-md mx-auto mt-10 hidden dark:block">
<div class="flex items-center space-x-4">
<img src="https://randomuser.me/api/portraits/thumb/men/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full border-2 border-gray-800 bg-gray-700">
<h2 class="text-2xl font-bold">Success!</h2>
</div>
<p class="mt-2 text-lg">Your operation was completed successfully. Everything went smoothly!</p>
<img src="https://picsum.photos/seed/picsum/400/200" alt="Success Image" class="mt-3 rounded-md w-full">
<div class="mt-4">
<a href="#" class="bg-gray-700 text-white font-bold py-2 px-4 rounded hover:bg-gray-600 transition duration-200">View Details</a>
</div>
</div>관련 구성 요소
성공 메시지 구성 요소 - Material Design Complementary
블로그/콘텐츠 사이트에 대한 머티리얼 디자인 스타일의 성공 메시지 구성 요소로, 보색 구성표를 사용합니다. 어두운 테마 지원으로 반응형입니다. 자바스크립트가 없습니다.
Success Messages 구성 요소
소셜 미디어 애플리케이션을 위한 복잡하고 반응형이며 어두운 테마와 호환되는 성공 메시지 구성 요소로, Tailwind CSS를 사용하여 생생한 3D 디자인을 특징으로 합니다. 여기에는 여러 대화형 요소가 포함됩니다.