CCHub Logo CCHub Tailwind Collection
구성 요소 수도 다크 모드 모달 컴포넌트

다크 모드 모달 컴포넌트

읽기 및 콘텐츠 소비를 위해 설계된 간단하고 반응이 빠른 다크 모드 모달 구성 요소입니다. 보색 구성표와 최소한의 레이아웃이 특징이며 블로그 또는 콘텐츠 기반 웹 사이트에 적합합니다.

미리 보기

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>

관련 구성 요소

Skeuomorphism Earthy Modal 컴포넌트

스큐어모피즘 디자인, 어스 톤 색 구성표 및 포트폴리오 사용을 위한 어두운 테마 지원을 갖춘 복잡하고 반응이 빠른 모달 구성 요소입니다. JavaScript 없이 여러 대화형 요소를 제공합니다.

열다

레트로빈티지어스톤모달

Retro/Vintage Modal Component in Earth Tones for Dashboard with Dark Mode and Responsiveness

열다

레트로 빈티지 모달 컴포넌트

Tailwind CSS로 디자인된 반응형 레트로/빈티지 모달 구성 요소로, 다크 모드 지원과 향수를 불러일으키는 80/90년대 미학을 포함합니다.

열다