成功したアクションの確認
レスポンシブエフェクトとダークテーマのサポートを特徴とする3Dデザインスタイルの成功メッセージコンポーネントで、画像とアバターのプレースホルダーがあります。
<div class="flex flex-col items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900"> <div class="bg-white dark:bg-gray-800 shadow-lg rounded-lg p-6 max-w-md w-full transform transition-transform hover:scale-105"> <div class="flex items-center space-x-4"> <img src="https://picsum.photos/60/60" alt="Avatar" class="w-14 h-14 rounded-full shadow-md"> <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-300">Your operation was completed successfully.</p> </div> </div> <div class="mt-4 space-x-2"> <a href="#" class="inline-block px-4 py-2 text-sm font-medium text-white bg-blue-600 rounded-md shadow hover:bg-blue-500 transition duration-300">Okay</a> <a href="#" class="inline-block px-4 py-2 text-sm font-medium text-gray-700 dark:text-gray-300 bg-gray-200 dark:bg-gray-700 rounded-md shadow hover:bg-gray-300 dark:hover:bg-gray-600 transition duration-300">Dismiss</a> </div> </div> </div>
Tailwind CSSでデザインされた大胆で生々しい成功メッセージコンポーネントで、レスポンシブエフェクトとダークテーマのサポートが特徴です。
<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>