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

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

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

Предварительный просмотр

HTML-код

<div class="bg-gray-800 p-6 rounded-lg shadow-lg max-w-lg mx-auto">  
    <h2 class="text-xl text-vibrant-500 font-bold mb-4">Success Messages</h2>  
    <div class="bg-gray-900 p-4 rounded-lg mb-4">  
        <div class="flex items-center mb-2">  
            <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-2">  
            <span class="text-white font-semibold">John Doe</span>  
            <span class="text-gray-400 text-sm ml-2">2 minutes ago</span>  
        </div>  
        <p class="text-gray-300">Your project has been successfully submitted!</p>  
    </div>  
    <div class="bg-gray-900 p-4 rounded-lg mb-4">  
        <div class="flex items-center mb-2">  
            <img src="https://randomuser.me/api/portraits/women/32.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-2">  
            <span class="text-white font-semibold">Jane Smith</span>  
            <span class="text-gray-400 text-sm ml-2">5 minutes ago</span>  
        </div>  
        <p class="text-gray-300">Your profile has been updated successfully!</p>  
    </div>  
    <div class="bg-gray-900 p-4 rounded-lg mb-4">  
        <div class="flex items-center mb-2">  
            <img src="https://randomuser.me/api/portraits/men/80.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-2">  
            <span class="text-white font-semibold">Mike Johnson</span>  
            <span class="text-gray-400 text-sm ml-2">10 minutes ago</span>  
        </div>  
        <p class="text-gray-300">Your order has been placed successfully!</p>  
    </div>  
    <div class="flex justify-center mt-4">  
        <img src="https://picsum.photos/300/200?random=1" alt="Success Image" class="rounded-lg shadow-lg">  
    </div>  
</div>

Связанные компоненты

Сообщение об успехе в стиле ар-деко

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

Открытый

Neumorphic_Charity_Success_Message

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

Открытый

Industrial_Success_Message

Простой компонент сообщения об успехе в индустриальном стиле с теплыми нейтральными тонами, разработанный для CRM/Business Tools, отличающийся эстетикой сырья и полной отзывчивостью с поддержкой темного режима.

Открытый