Компонент "Предупреждающие сообщения"
Простой, отзывчивый компонент предупреждающих сообщений в оттенках серого для сайтов электронной коммерции с поддержкой темного режима.
HTML-код
<div class="flex items-center p-4 text-sm text-gray-800 border border-gray-300 rounded-lg bg-gray-50 dark:bg-gray-800 dark:text-gray-300 dark:border-gray-600" role="alert">
<svg class="flex-shrink-0 inline w-4 h-4 me-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
<path d="M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5ZM9.5 4a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3ZM10 15.5a1 1 0 1 1 0-2 1 1 0 0 1 0 2Z"/>
</svg>
<span class="sr-only">Info</span>
<div>
<span class="font-medium">New message:</span> Your order has been placed successfully.
</div>
</div>Связанные компоненты
Компонент "Предупреждающие сообщения"
Адаптивный компонент предупреждающего сообщения с микровзаимодействиями, пастельной цветовой схемой, сложным дизайном, деловой/корпоративной целью, поддержкой темного режима и отсутствием JavaScript.
Компонент "Предупреждающие сообщения"
Этот компонент представляет собой тревожное сообщение с минималистичным/плоским дизайном, цветовой гаммой земляных тонов и сложной версткой. Он разработан для интерфейсов социальных сетей и является адаптивным с поддержкой темных тем. Он использует Tailwind CSS для стилизации и включает в себя множество интерактивных элементов.
Компонент "Предупреждающие сообщения"
Отзывчивый скевоморфный компонент предупреждающих сообщений, предназначенный для блогов/потребления контента, с дополнительной цветовой схемой и поддержкой темных тем.