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

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

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

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

HTML-код

<div class="max-w-md mx-auto mt-5">
    <div class="bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg shadow-sm overflow-hidden">
        <div class="flex items-center p-4">
            <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-10 h-10 rounded-full mr-3">
            <div>
                <h2 class="text-gray-800 dark:text-white text-lg font-medium">John Doe</h2>
                <p class="text-gray-600 dark:text-gray-300 text-sm">Just now</p>
            </div>
        </div>
        <div class="p-4">
            <p class="text-gray-800 dark:text-gray-300">This is a simple alert message for your social media interface.</p>
        </div>
    </div>
    <div class="bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg shadow-sm overflow-hidden mt-4">
        <div class="flex items-center p-4">
            <img src="https://randomuser.me/api/portraits/women/1.jpg" alt="Avatar" class="w-10 h-10 rounded-full mr-3">
            <div>
                <h2 class="text-gray-800 dark:text-white text-lg font-medium">Jane Smith</h2>
                <p class="text-gray-600 dark:text-gray-300 text-sm">5 minutes ago</p>
            </div>
        </div>
        <div class="p-4">
            <p class="text-gray-800 dark:text-gray-300">Another alert message from the social networking interface!</p>
        </div>
    </div>
</div>

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

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

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

Открытый

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

Простой компонент предупреждающих сообщений в стиле Neumorphism для бизнес-сайтов, отличающийся яркими цветами и адаптивной поддержкой темной темы с использованием Tailwind CSS и без JavaScript.

Открытый

Monospace_Developer_Alert_Messages_Component

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

Открытый