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