성공 메시지 구성 요소 - Material Design Complementary
블로그/콘텐츠 사이트에 대한 머티리얼 디자인 스타일의 성공 메시지 구성 요소로, 보색 구성표를 사용합니다. 어두운 테마 지원으로 반응형입니다. 자바스크립트가 없습니다.
HTML 코드
<div class="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900 p-4">
<div class="max-w-sm w-full bg-white dark:bg-gray-800 rounded-lg shadow-lg p-6">
<div class="flex items-center mb-4">
<div class="flex-shrink-0">
<svg class="h-8 w-8 text-green-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/>
</svg>
</div>
<div class="ml-3">
<h3 class="text-lg leading-6 font-medium text-gray-900 dark:text-white">Success!</h3>
</div>
</div>
<div class="mt-2">
<p class="text-sm text-gray-500 dark:text-gray-300">
Your action was completed successfully.
</p>
</div>
<div class="mt-4">
<button type="button" class="inline-flex justify-center px-4 py-2 text-sm font-medium text-blue-600 dark:text-blue-400 bg-blue-100 dark:bg-blue-900 border border-transparent rounded-md hover:bg-blue-200 dark:hover:bg-blue-800 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:focus:ring-offset-gray-900">
Close
</button>
</div>
</div>
</div>