가격 표시 구성 요소 22

제품의 이미지, 이름, 가격 및 장바구니에 추가할 버튼을 보여주는 미니멀리스트 가격 표시 구성 요소입니다. Tailwind CSS를 사용하여 응답성 및 어두운 테마 지원으로 설계되었습니다.

미리 보기

HTML 코드

<div class="max-w-sm mx-auto bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden">
    <img class="w-full h-48 object-cover" src="https://picsum.photos/400/300" alt="Product Image">
    <div class="p-4">
        <h2 class="text-lg font-semibold text-gray-800 dark:text-white">Product Name</h2>
        <p class="text-xl text-gray-600 dark:text-gray-300">$29.99</p>
        <button class="mt-4 bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded transition duration-300" type="button">Add to Cart</button>
    </div>
</div>

관련 구성 요소

가격 표시 구성 요소

대시보드용 복잡하고 반응형이 빠른 가격 표시 구성 요소로, 어두운 테마를 지원하며 회색조의 미니멀한 플랫 디자인에 Tailwind CSS를 사용합니다.

열다

가격 표시 구성 요소

보색 구성표(연한 주황색 및 연한 파란색)를 갖춘 Neumorphism 스타일의 가격 표시 구성 요소로, 전자 상거래를 위한 중간 정도의 복잡성을 제공합니다. 어두운 테마를 지원하는 반응형 디자인이 특징입니다. 구성 요소는 제품 이미지, 제목 및 가격을 '장바구니에 추가' 버튼과 함께 표시합니다. 다크 모드는 채도가 낮은 보색을 사용합니다.

열다

뉴모픽 가격 표시 구성 요소

Neumorphism 디자인 스타일과 유사한 색 구성표를 갖춘 복잡하고 반응형이 빠른 다크 모드 호환 가격 표시 구성 요소로, 블로그/콘텐츠 소비에 적합합니다. 토글 및 세부 계층과 같은 여러 대화형 요소를 제공합니다.

열다