Компоненты Предупреждающие сообщения Компонент "Предупреждающие сообщения"

Компонент "Предупреждающие сообщения"

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

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

HTML-код

<div class="bg-gray-800 dark:bg-gray-900 p-5 rounded-lg shadow-lg">
    <h2 class="text-lg font-bold text-earth-900 dark:text-earth-300">Alert Messages</h2>
    <div class="my-4">
        <div class="bg-earth-700 dark:bg-earth-600 p-4 rounded-lg flex items-start mb-4">
            <img src="https://picsum.photos/50" alt="Avatar" class="rounded-full mr-3" />
            <div>
                <p class="text-earth-100 dark:text-earth-200">New message from your portfolio submission!</p>
                <button class="mt-2 bg-earth-600 hover:bg-earth-500 text-earth-100 font-bold py-2 px-4 rounded">View</button>
            </div>
        </div>
        <div class="bg-earth-700 dark:bg-earth-600 p-4 rounded-lg flex items-start mb-4">
            <img src="https://picsum.photos/50" alt="Avatar" class="rounded-full mr-3" />
            <div>
                <p class="text-earth-100 dark:text-earth-200">Your work has been reviewed!</p>
                <button class="mt-2 bg-earth-600 hover:bg-earth-500 text-earth-100 font-bold py-2 px-4 rounded">Reply</button>
            </div>
        </div>
        <div class="bg-earth-700 dark:bg-earth-600 p-4 rounded-lg flex items-start">
            <img src="https://picsum.photos/50" alt="Avatar" class="rounded-full mr-3" />
            <div>
                <p class="text-earth-100 dark:text-earth-200">Don't forget to update your portfolio!</p>
                <button class="mt-2 bg-earth-600 hover:bg-earth-500 text-earth-100 font-bold py-2 px-4 rounded">Update</button>
            </div>
        </div>
    </div>
</div>

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

Компонент "Предупреждающие сообщения"

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

Открытый

Компонент "Предупреждающие сообщения"

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

Открытый

Компонент "Предупреждающие сообщения"

Компонент предупреждающих сообщений с 3D-дизайном, адаптивными функциями и поддержкой темной темы с использованием Tailwind CSS. Компонент включает в себя различные типы оповещений (успех, ошибка, предупреждение, информация) с иконками и сообщениями.

Открытый