CCHub Logo CCHub Tailwind Collection
구성 요소 제품 리뷰 제품 리뷰 구성 요소

제품 리뷰 구성 요소

잔인함 스타일로 디자인된 제품 리뷰 구성 요소로, 고대비, 반응형 디자인 및 어두운 테마 지원을 특징으로 합니다. 여기에는 자리 표시자 서비스의 사용자 아바타 및 제품 이미지가 포함됩니다.

미리 보기

HTML 코드 

<div class="bg-gray-100 dark:bg-gray-800 p-6 rounded-lg shadow-md max-w-lg mx-auto">
    <h2 class="text-2xl font-bold text-black dark:text-white mb-4">Product Reviews</h2>
    <div class="border-t border-gray-300 dark:border-gray-600 pt-4">
        <div class="flex items-start mb-4">
            <img class="w-12 h-12 rounded-full mr-4" src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar">
            <div>
                <h3 class="text-lg font-semibold text-black dark:text-white">John Doe</h3>
                <p class="text-gray-700 dark:text-gray-300">This product is amazing! It exceeded my expectations and I would highly recommend it.</p>
                <img class="mt-2 w-full h-auto rounded" src="https://picsum.photos/400/200?random=1" alt="Product Image">
            </div>
        </div>
        <div class="flex items-start mb-4">
            <img class="w-12 h-12 rounded-full mr-4" src="https://randomuser.me/api/portraits/women/32.jpg" alt="User Avatar">
            <div>
                <h3 class="text-lg font-semibold text-black dark:text-white">Jane Smith</h3>
                <p class="text-gray-700 dark:text-gray-300">I didn't like this product. It was not what I expected and I had some issues with it.</p>
                <img class="mt-2 w-full h-auto rounded" src="https://picsum.photos/400/200?random=2" alt="Product Image"> 
            </div>
        </div>
        <div class="flex items-start mb-4">
            <img class="w-12 h-12 rounded-full mr-4" src="https://randomuser.me/api/portraits/men/33.jpg" alt="User Avatar">
            <div>
                <h3 class="text-lg font-semibold text-black dark:text-white">Michael Lee</h3>
                <p class="text-gray-700 dark:text-gray-300">Great quality and fast shipping! Will purchase again.</p>
                <img class="mt-2 w-full h-auto rounded" src="https://picsum.photos/400/200?random=3" alt="Product Image">
            </div>
        </div>
    </div>
    <button class="mt-4 bg-blue-500 dark:bg-blue-700 text-white font-bold py-2 px-4 rounded hover:bg-blue-600 dark:hover:bg-blue-800">Submit Your Review</button>
</div>

관련 구성 요소

게임 제품 리뷰 구성 요소

게임 웹사이트를 위한 재미있고 생동감 넘치는 제품 리뷰 구성 요소로, 둥근 요소, 채도가 높은 색상, 별 등급, 사용자 아바타, 리뷰 텍스트 및 좋아요/싫어요 버튼이 있는 풍부한 인터페이스를 특징으로 합니다. 다크 모드 지원으로 완벽하게 반응합니다.

열다

제품 리뷰 Component - Paper/Print-Neon/Electric

종이/인쇄물에서 영감을 받은 디자인과 네온/전기 색 구성표가 있는 간단하고 반응이 빠른 제품 리뷰 구성 요소로, 문서 또는 Wiki 사이트에 적합합니다. 다크 모드 지원이 포함됩니다.

열다

제품 리뷰 구성 요소

뉴모픽 스타일의 제품 리뷰 구성 요소로, 사용자 아바타, 리뷰 텍스트 및 별 등급을 포함합니다. Tailwind CSS를 사용하여 반응형 디자인과 다크 모드 지원을 통합합니다.

열다