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

다크 모드 모달 컴포넌트

파스텔 색 구성표가 있는 어두운 모드에서 소셜 미디어 인터페이스를 위해 설계된 간단한 반응형 모달 구성 요소입니다.

미리 보기

HTML 코드 

<div class="fixed inset-0 flex items-center justify-center z-50 bg-gray-900 bg-opacity-80 dark:bg-gray-800">
    <div class="bg-gray-800 rounded-lg shadow-lg w-11/12 md:w-1/3 p-6">
        <h2 class="text-xl font-bold text-white mb-4">Welcome to Our Community!</h2>
        <p class="text-gray-300 mb-4">Join us in sharing ideas, experiences, and connecting with one another. We believe in the power of community.</p>
        <div class="flex items-center mb-4">
            <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-12 h-12 rounded-full mr-3">
            <span class="text-pink-200 font-semibold">John Doe</span>
        </div>
        <img src="https://picsum.photos/300/150" alt="Placeholder" class="rounded-lg mb-4">
        <button class="w-full bg-pink-500 hover:bg-pink-400 text-white font-bold py-2 px-4 rounded">Join Now</button>
        <button class="w-full mt-2 bg-transparent border border-pink-500 hover:bg-pink-500 hover:text-white text-pink-500 font-bold py-2 px-4 rounded">Cancel</button>
    </div>
</div>

관련 구성 요소

레트로 블로그 모달

블로그 콘텐츠를 위한 레트로 빈티지에서 영감을 받은 모달 구성 요소로, 보색, 인터랙티브 요소를 통한 적당한 복잡성, 반응형 디자인 및 다크 모드 지원을 특징으로 합니다. JavaScript는 사용되지 않으며 HTML 및 Tailwind CSS 클래스에만 의존합니다. 이미지는 picsum.photos에서, 아바타는 randomuser.me 에서 가져옵니다.

열다

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

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

열다

스큐어모픽 모달 컴포넌트(Skeuomorphic Modal Component)

전자 상거래를 위한 보색이 있는 스큐어모픽 디자인으로 스타일링된 복잡한 반응형 모달 구성 요소입니다.

열다