CCHub Logo CCHub Tailwind Collection
구성 요소 수도 Modal 구성 요소

Modal 구성 요소

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

미리 보기

HTML 코드 

<div class="fixed z-50 inset-0 flex items-center justify-center bg-gray-800 bg-opacity-75 dark:bg-gray-900 transition-opacity duration-500 ease-in-out" aria-labelledby="modal-title" role="dialog" aria-modal="true">
  <div class="bg-white dark:bg-gray-800 rounded-lg overflow-hidden shadow-xl transform transition-all sm:max-w-lg sm:w-full">
    <div class="bg-gray-100 dark:bg-gray-700 px-4 py-5 sm:px-6">
      <h3 class="text-lg leading-6 font-medium text-gray-900 dark:text-gray-100" id="modal-title">
        Share Your Thoughts
      </h3>
      <div class="mt-2">
        <p class="text-sm text-gray-500 dark:text-gray-300">
          Engage with your friends and share ideas or posts directly here.
        </p>
      </div>
    </div>
    <div class="p-6">
      <form class="space-y-4">
        <textarea class="w-full h-24 p-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-400 dark:focus:ring-blue-500" placeholder="What's on your mind?"></textarea>
        <div class="flex items-center space-x-4">
          <img class="w-10 h-10 rounded-full shadow-lg" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar">
          <button type="submit" class="inline-flex justify-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-blue-600 hover:bg-blue-700 dark:bg-blue-500 dark:hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
            Post
          </button>
        </div>
      </form>
    </div>
    <div class="bg-gray-100 dark:bg-gray-700 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse">
      <button type="button" class="mt-3 w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-indigo-600 text-base font-medium text-white hover:bg-indigo-700 dark:bg-indigo-500 dark:hover:bg-indigo-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm">
        Close
      </button>
    </div>
  </div>
</div>

관련 구성 요소

Art_Deco_Government_Modal

정부 및 공공 서비스 웹사이트를 위한 반응형 아르데코에서 영감을 받은 모달 구성 요소로, 기하학적 패턴, 고급스러운 스타일링 및 유사한 색 구성표를 특징으로 합니다. 다크 모드 지원이 포함됩니다.

열다

Paper_Print_Inspired_Autumn_Modal_Component

종이와 인쇄 재료에서 영감을 받은 복잡하고 반응이 빠른 모달 구성 요소로, 가을 색상을 특징으로 합니다. 교육용 플랫폼용으로 설계되었으며 다크 모드 지원 및 시맨틱 HTML이 포함되어 있습니다.

열다

Glassmorphism_Dashboard_Modal

단색 스타일의 복잡하고 반응성이 뛰어난 glassmorphism 모달 구성 요소로, 다크 모드 지원을 포함하여 대시보드 데이터 시각화 및 제어판에 적합합니다.

열다