成功メッセージコンポーネント
アース トーンとダーク テーマをサポートするマテリアル デザインに触発されたレスポンシブな成功メッセージ コンポーネントで、コンテンツ消費向けに設計されています。
HTMLコード
<div class="max-w-xl mx-auto p-4 bg-white dark:bg-gray-800 rounded-lg shadow-lg">
<div class="flex items-center mb-4">
<img src="https://picsum.photos/50" alt="Success Icon" class="w-10 h-10 rounded-full mr-2">
<div class="text-lg font-semibold text-gray-800 dark:text-gray-200">Success!</div>
</div>
<p class="text-gray-600 dark:text-gray-400">
Your changes have been saved successfully. You can now continue to explore the content.
</p>
<div class="mt-4">
<button class="px-4 py-2 bg-green-500 text-white rounded hover:bg-green-600 focus:outline-none focus:ring-2 focus:ring-green-300 dark:bg-green-700 dark:hover:bg-green-800 dark:focus:ring-green-600">Continue</button>
</div>
</div>
<div class="max-w-xl mx-auto p-4 bg-white dark:bg-gray-800 rounded-lg shadow-lg mt-4">
<div class="flex items-center mb-4">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-2">
<div class="text-lg font-semibold text-gray-800 dark:text-gray-200">John Doe</div>
</div>
<p class="text-gray-600 dark:text-gray-400">
Thanks for your submission! Stay tuned for updates regarding your content.
</p>
<div class="mt-4">
<button class="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-300 dark:bg-blue-700 dark:hover:bg-blue-800 dark:focus:ring-blue-600">Learn More</button>
</div>
</div>