Компонент «Сообщения об успешном выполнении»
Отзывчивый компонент сообщений об успехе, вдохновленный Material Design с поддержкой земных тонов и темных тем, предназначенный для потребления контента.
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>
Связанные компоненты
Компонент «Сообщения об успешном выполнении»
Компонент Success Messages с темным режимом - Имеет адаптивные эффекты и поддержку темных тем. Код JavaScript не нужен. Для темного режима достаточно поддержки CSS.
Компонент «Сообщения об успешном выполнении»
Простой компонент сообщения об успехе с пастельной цветовой гаммой, тонкой анимацией для микровзаимодействий и адаптивным дизайном с поддержкой темных тем. Он предназначен для того, чтобы портфолио подтверждало действия пользователя.
Компонент «Сообщения об успешном выполнении»
Простой и понятный компонент сообщения об успешном выполнении с адаптивным дизайном и поддержкой темного режима.