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를 사용하여 어두운 테마를 지원하는 반응형 디자인이 특징입니다.

열다

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

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

열다

다크 모드 모달 컴포넌트

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

열다