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>

관련 구성 요소

스큐어모픽 모달(Skeuomorphic Modal)

엔터테인먼트/미디어 플랫폼을 위한 단순하고 반응성이 뛰어난 스큐어모픽에서 영감을 받은 모달 구성 요소로, 멋진 무채색과 다크 모드 지원을 특징으로 합니다.

열다

머티리얼 디자인 모달

반응형 디자인과 어두운 테마를 지원하는 Material Design 스타일의 Modal Component입니다. 모달 오버레이, 카드와 같은 모양의 모달 컨테이너 및 닫기 버튼이 포함됩니다. JavaScript는 포함되어 있지 않습니다.

열다

사이버펑크 학습 모달

교육용 플랫폼을 위한 반응형 사이버펑크 테마의 모달 구성 요소로, 어두운 배경, 네온 액센트 및 인터랙티브 요소를 특징으로 합니다. 다크 모드를 지원합니다.

열다