Модальное оформление материалов
Модальный компонент в стиле Material Design с адаптивным дизайном и поддержкой темных тем. Включает в себя модальный оверлей, модальный контейнер с внешним видом, похожим на карту, и кнопку закрытия. JavaScript не включен.
HTML-код
<div class="fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full">
<div class="relative top-20 mx-auto p-5 border w-96 shadow-lg rounded-md bg-white dark:bg-gray-800">
<div class="mt-3 text-center">
<h3 class="text-lg leading-6 font-medium text-gray-900 dark:text-white">Modal Title</h3>
<div class="mt-2 px-7 py-3">
<p class="text-sm text-gray-500 dark:text-gray-300">Modal content goes here. This is a placeholder for your information.</p>
</div>
<div class="items-center px-4 py-3">
<button id="ok-btn" class="px-4 py-2 bg-blue-500 text-white text-base font-medium rounded-md w-full shadow-sm hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500">Got It!</button>
</div>
</div>
</div>
</div>Связанные компоненты
Ретро винтажный модальный компонент
Простой модальный компонент в стиле ретро/винтаж с дополнительной цветовой схемой для демонстрации работ или продуктов, разработанный с использованием Tailwind CSS.
Сложное земное бизнес-модальное решение с микровзаимодействиями
Сложный, отзывчивый, модальный компонент землистых тонов с микровзаимодействиями, подходящий для бизнес-сайтов, поддерживающий темный режим.
Ретро винтажный модальный компонент
Отзывчивый модальный компонент в стиле ретро/винтаж, разработанный с помощью Tailwind CSS, который включает в себя поддержку темного режима и ностальгическую эстетику 80-х/90-х годов.