CCHub Logo CCHub Tailwind Collection
구성 요소 수도 소셜미디어포스트모달

소셜미디어포스트모달

단순하고 반응이 빠른 Material Design에서 영감을 받은 모달 구성 요소로, 소셜 미디어 응용 프로그램에 적합한 유사한 색 구성표를 사용합니다. 어두운 테마를 지원합니다.

미리 보기

HTML 코드 


<div class="fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full flex justify-center items-center">
  <div class="relative 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-gray-100">Post Created!</h3>
      <div class="mt-2 px-7 py-3">
        <p class="text-sm text-gray-500 dark:text-gray-400">Your post has been successfully shared with your followers.</p>
        <img class="mt-4 rounded-md" src="https://picsum.photos/400/200" alt="Placeholder image for social media post">
      </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 dark:bg-blue-700 dark:hover:bg-blue-900">Awesome!</button>
      </div>
    </div>
  </div>
</div>

관련 구성 요소

다크 모드 모달 컴포넌트

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

열다

Industrial_Sepia_Medical_Modal

세피아/브라운 톤을 사용하여 산업용, 원자재 미학을 가미한 간단하고 반응성이 뛰어난 모달 구성 요소로, 헬스케어/의료 애플리케이션용으로 설계되었으며 다크 모드를 지원합니다.

열다

Modal 구성 요소

네온/전기 그라디언트 디자인의 복잡하고 반응이 빠른 모달 구성 요소로, 비즈니스/기업 웹 사이트에 적합합니다. 부드러운 전환, 다크 모드 지원 및 여러 대화형 요소가 특징입니다.

열다