CCHub Logo CCHub Tailwind Collection
구성 요소 수도 레트로 블로그 모달

레트로 블로그 모달

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

미리 보기

HTML 코드 

<div class="fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full" id="my-modal">
  <div class="relative top-20 mx-auto p-5 border w-96 shadow-lg rounded-md bg-white dark:bg-cyan-800 dark:text-white">
    <div class="mt-3 text-center">
      <div class="mx-auto flex items-center justify-center h-12 w-12 rounded-full bg-cyan-100 dark:bg-cyan-600">
        <svg class="h-6 w-6 text-cyan-600 dark:text-cyan-100" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
      </div>
      <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-200">Modal Content Goes Here. Replace with your blog content or message.</p>
        <img class="mt-4 rounded-md" src="https://picsum.photos/400/200" alt="Placeholder Image">
        <div class="flex justify-center mt-4">
          <img class="h-10 w-10 rounded-full mr-4" src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar">
          <img class="h-10 w-10 rounded-full" src="https://randomuser.me/api/portraits/women/1.jpg" alt="Avatar">
        </div>
      </div>
      <div class="items-center px-4 py-3">
        <button id="ok-btn" class="px-4 py-2 bg-cyan-500 text-white text-base font-medium rounded-md w-full shadow-sm hover:bg-cyan-600 focus:outline-none focus:ring-2 focus:ring-cyan-300 dark:bg-cyan-700 dark:hover:bg-cyan-900 dark:focus:ring-cyan-800">
          Close
        </button>
      </div>
    </div>
  </div>
</div>

관련 구성 요소

글래스모피즘모달컴포넌트(GlassmorphismModalComponent)

유사한 색 구성표, 중간 정도의 복잡성을 가진 Glassmorphism 스타일의 모달 구성 요소로, 블로그/콘텐츠 표시에 적합합니다. Tailwind CSS를 사용하여 어두운 테마를 지원하는 반응형 디자인이 특징입니다.

열다

Skeuomorphism Earthy Modal 컴포넌트

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

열다

Modal 구성 요소

마이크로 인터랙션과 트라이어드 색 구성표로 스타일링된 반응형 모달 구성 요소로, 소셜 미디어 인터페이스를 위해 설계되었습니다. 상호 작용 시 사용자의 참여를 유도하는 애니메이션을 특징으로 하며 Tailwind CSS를 사용하여 어두운 테마 지원을 제공합니다.

열다