CCHub Logo CCHub Tailwind Collection
구성 요소 수도 머티리얼 디자인 모달

머티리얼 디자인 모달

반응형 디자인과 어두운 테마를 지원하는 Material Design 스타일의 Modal Component입니다. 모달 오버레이, 카드와 같은 모양의 모달 컨테이너 및 닫기 버튼이 포함됩니다. 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>

관련 구성 요소

레트로 블로그 모달

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

열다

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

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

열다

Skeuomorphism Earthy Modal 컴포넌트

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

열다