제품 카드 구성 요소

Tailwind CSS를 사용하는 소셜 미디어 인터페이스용으로 설계된 마이크로 인터랙션이 있는 간단한 반응형 제품 카드 구성 요소로, 어두운 테마와 회색조 색 구성표를 지원합니다.

미리 보기

HTML 코드

<div class="flex flex-col max-w-xs mx-auto rounded-lg shadow-lg overflow-hidden bg-white dark:bg-gray-800 transition-shadow duration-300 hover:shadow-xl">
    <img class="w-full h-48 object-cover" src="https://picsum.photos/seed/pic1/400/300" alt="Product Image">
    <div class="p-4">
        <h2 class="text-lg font-semibold text-gray-800 dark:text-white transition-colors duration-300">Product Title</h2>
        <p class="mt-1 text-gray-600 dark:text-gray-300 transition-colors duration-300">Brief description of the product. Engaging text to attract users.</p>
        <div class="flex items-center mt-3">
            <img class="w-8 h-8 rounded-full" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar">
            <span class="ml-2 text-gray-700 dark:text-gray-200 transition-colors duration-300">User Name</span>
        </div>
    </div>
</div>
<div class="mt-4">
    <button class="w-full py-2 px-4 bg-gray-800 text-white rounded hover:bg-gray-700 dark:bg-gray-600 dark:hover:bg-gray-500 transition-colors duration-300">Add to Cart</button>
</div>

제품 카드 구성 요소

미리 보기

HTML 코드

관련 구성 요소

제품 카드 구성 요소

Skeuomorphic Analogous Job Card 컴포넌트

제품 카드 구성 요소