구성 요소 수도 레트로 빈티지 모달 컴포넌트

레트로 빈티지 모달 컴포넌트

Tailwind CSS를 사용하여 디자인된 작품이나 제품을 선보이기 위한 보색 구성표가 있는 간단한 레트로/빈티지 모달 구성 요소입니다.

미리 보기

HTML 코드

<div class="fixed inset-0 flex items-center justify-center bg-gray-900 bg-opacity-80 dark:bg-black dark:bg-opacity-90">  <div class="bg-yellow-300 dark:bg-yellow-700 text-gray-800 dark:text-gray-200 rounded-lg p-6 max-w-md w-full shadow-lg">    <h2 class="text-lg font-bold mb-4">My Portfolio Item</h2>    <img class="mb-4 rounded" src="https://picsum.photos/300/200" alt="Portfolio Item">    <p class="mb-4">This is a short description of the portfolio item showcasing the work or product. Explore more to find out how it can benefit you!</p>    <div class="flex items-center">      <img class="rounded-full w-10 h-10 mr-2" src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar">      <span class="font-semibold">John Doe</span>    </div>    <div class="mt-6 flex justify-end">      <button class="bg-yellow-500 hover:bg-yellow-600 dark:bg-yellow-600 dark:hover:bg-yellow-500 text-white font-bold py-2 px-4 rounded">Close</button>    </div>  </div></div>

관련 구성 요소

Modal 구성 요소

검은색, 흰색 및 액센트 색상 구성표가 있는 복잡하고 반응이 빠른 모달 구성 요소로, 제조/산업 응용 분야에 적합한 그라디언트 전환을 특징으로 합니다. 다크 모드 지원이 포함됩니다.

열다

소셜미디어포스트모달

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

열다

Modal 구성 요소

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

열다