Компоненты Столица Модальный компонент темного режима

Модальный компонент темного режима

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

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

HTML-код

<div class="fixed inset-0 z-50 flex items-center justify-center bg-gray-800 bg-opacity-75 dark:bg-gray-900" role="dialog" aria-modal="true">
    <div class="bg-gray-900 rounded-lg shadow-lg max-w-sm w-full p-6">
        <button class="absolute top-3 right-3 text-gray-500 hover:text-gray-300 dark:text-gray-400 dark:hover:text-gray-200" aria-label="Close">&times;</button>
        <h2 class="text-xl text-white font-semibold mb-4">Blog Post Title</h2>
        <img class="w-full h-32 object-cover rounded-lg mb-4" src="https://picsum.photos/400/200" alt="Random Image">
        <p class="text-gray-300 dark:text-gray-200 mb-4">This is a simple modal component designed for displaying content in dark mode. It is responsive and features a clean layout that aids in reading.</p>
        <div class="flex items-center">
            <img class="w-10 h-10 rounded-full mr-3" src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar">
            <div>
                <p class="text-sm text-gray-400 dark:text-gray-300">Posted by John Doe</p>
                <p class="text-xs text-gray-500 dark:text-gray-400">3 minutes ago</p>
            </div>
        </div>
    </div>
</div>

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

Модальный компонент

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

Открытый

Memphis_Dating_Modal

Сложный, отзывчивый модальный компонент, разработанный в стиле Memphis/Retro для платформ знакомств и социальных сетей, с яркими цветами, геометрическими формами, интерактивными элементами и поддержкой темного режима.

Открытый

Ретро винтажный модальный компонент

Отзывчивый модальный компонент в стиле ретро/винтаж, разработанный с помощью Tailwind CSS, который включает в себя поддержку темного режима и ностальгическую эстетику 80-х/90-х годов.

Открытый