Компоненты Сообщения об успехе Компонент «Сообщения об успешном выполнении»

Компонент «Сообщения об успешном выполнении»

Отзывчивый компонент сообщений об успехе, вдохновленный 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.

Открытый

Компонент «Сообщения об успешном выполнении»

Простой компонент сообщения об успехе с пастельной цветовой гаммой, тонкой анимацией для микровзаимодействий и адаптивным дизайном с поддержкой темных тем. Он предназначен для того, чтобы портфолио подтверждало действия пользователя.

Открытый

Компонент «Сообщения об успешном выполнении»

Простой и понятный компонент сообщения об успешном выполнении с адаптивным дизайном и поддержкой темного режима.

Открытый