Компонент «Сообщения об успешном выполнении»
Компонент для отображения сообщений об успешном выполнении со стилем 3D-дизайна, адаптивными эффектами и поддержкой темной темы с использованием Tailwind CSS.
HTML-код
<div class="p-6 max-w-md mx-auto bg-white rounded-lg shadow-md dark:bg-gray-800 transition duration-300 ease-in-out transform hover:scale-105">
<div class="flex items-center mb-4">
<img src="https://picsum.photos/50/50?random=1" alt="User Avatar" class="w-12 h-12 rounded-full mr-4 shadow-lg dark:shadow-xl">
<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-400">Your action was completed successfully.</p>
</div>
</div>
<div class="flex items-center justify-between mt-4 pt-4 border-t border-gray-200 dark:border-gray-700">
<span class="text-sm text-gray-500 dark:text-gray-400">2 minutes ago</span>
<a href="#" class="inline-flex items-center text-blue-600 hover:text-blue-500 dark:text-blue-400 dark:hover:text-blue-300">View Details</a>
</div>
</div>Связанные компоненты
Компонент «Сообщения об успешном выполнении»
Минималистичный компонент сообщения об успехе с адаптивными эффектами, поддерживающий как светлую, так и темную темы с использованием Tailwind CSS.
Компонент сообщения об успешном выполнении с помощью нейроморфного
Простой компонент Neumorphic Success Message с дополнительной цветовой схемой для панели управления, отличающийся адаптивным дизайном и поддержкой темного режима.
Компонент «Сообщения об успешном выполнении»
Компонент, который отображает смелые сообщения об успехе с брутальным стилем дизайна, высокой контрастностью, отзывчивыми эффектами и поддержкой темных тем.