CCHub Logo CCHub Tailwind Collection
구성 요소 제품 리뷰 제품 리뷰 구성 요소 - Bauhaus Rainbow Gradient

제품 리뷰 구성 요소 - Bauhaus Rainbow Gradient

Bauhaus에서 영감을 받은 디자인과 무지개 그라데이션 색 구성표가 있는 단순하고 기능적인 제품 리뷰 구성 요소로 컨설팅/서비스에 적합합니다. 다크 모드 지원으로 완벽하게 반응합니다.

미리 보기

HTML 코드 

<div class="font-sans antialiased text-gray-900 dark:text-gray-100 bg-gray-50 dark:bg-gray-900 min-h-screen py-8 px-4 sm:px-6 lg:px-8">
  <div class="max-w-3xl mx-auto bg-white dark:bg-gray-800 shadow-lg rounded-lg overflow-hidden border border-gray-200 dark:border-gray-700">
    <div class="bg-gradient-to-r from-red-500 via-yellow-500 to-green-500 p-6 sm:p-8">
      <h2 class="text-2xl sm:text-3xl font-bold text-white uppercase tracking-wider text-center drop-shadow-md">Client Testimonials</h2>
    </div>
    
    <div class="p-6 sm:p-8 space-y-8">
      <!-- Review 1 -->
      <div class="flex flex-col sm:flex-row items-center sm:items-start gap-4 sm:gap-6 bg-gray-100 dark:bg-gray-700 p-5 rounded-md shadow-sm border border-gray-200 dark:border-gray-600">
        <img class="w-16 h-16 sm:w-20 sm:h-20 rounded-full object-cover border-2 border-green-500 shrink-0" src="https://randomuser.me/api/portraits/women/68.jpg" alt="Client Avatar">
        <div class="text-center sm:text-left flex-grow">
          <div class="flex justify-center sm:justify-start items-center mb-2">
            <svg class="w-5 h-5 text-yellow-400 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279-7.416-3.908-7.416 3.908 1.48-8.279-6.064-5.828 8.332-1.151z"/></svg>
            <svg class="w-5 h-5 text-yellow-400 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279-7.416-3.908-7.416 3.908 1.48-8.279-6.064-5.828 8.332-1.151z"/></svg>
            <svg class="w-5 h-5 text-yellow-400 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279-7.416-3.908-7.416 3.908 1.48-8.279-6.064-5.828 8.332-1.151z"/></svg>
            <svg class="w-5 h-5 text-yellow-400 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279-7.416-3.908-7.416 3.908 1.48-8.279-6.064-5.828 8.332-1.151z"/></svg>
            <svg class="w-5 h-5 text-gray-400 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279-7.416-3.908-7.416 3.908 1.48-8.279-6.064-5.828 8.332-1.151z"/></svg>
          </div>
          <p class="text-lg dark:text-gray-200 leading-relaxed italic mb-3">"The strategic guidance provided by this team was instrumental in our recent growth. Highly recommend their services!"</p>
          <p class="font-semibold text-blue-600 dark:text-blue-400">Jane Doe</p>
          <p class="text-sm text-gray-500 dark:text-gray-400">CEO, Tech Solutions Inc.</p>
        </div>
      </div>

      <!-- Review 2 -->
      <div class="flex flex-col sm:flex-row items-center sm:items-start gap-4 sm:gap-6 bg-gray-100 dark:bg-gray-700 p-5 rounded-md shadow-sm border border-gray-200 dark:border-gray-600">
        <img class="w-16 h-16 sm:w-20 sm:h-20 rounded-full object-cover border-2 border-purple-500 shrink-0" src="https://randomuser.me/api/portraits/men/45.jpg" alt="Client Avatar">
        <div class="text-center sm:text-left flex-grow">
          <div class="flex justify-center sm:justify-start items-center mb-2">
            <svg class="w-5 h-5 text-yellow-400 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279-7.416-3.908-7.416 3.908 1.48-8.279-6.064-5.828 8.332-1.151z"/></svg>
            <svg class="w-5 h-5 text-yellow-400 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279-7.416-3.908-7.416 3.908 1.48-8.279-6.064-5.828 8.332-1.151z"/></svg>
            <svg class="w-5 h-5 text-yellow-400 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279-7.416-3.908-7.416 3.908 1.48-8.279-6.064-5.828 8.332-1.151z"/></svg>
            <svg class="w-5 h-5 text-yellow-400 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279-7.416-3.908-7.416 3.908 1.48-8.279-6.064-5.828 8.332-1.151z"/></svg>
            <svg class="w-5 h-5 text-yellow-400 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279-7.416-3.908-7.416 3.908 1.48-8.279-6.064-5.828 8.332-1.151z"/></svg>
          </div>
          <p class="text-lg dark:text-gray-200 leading-relaxed italic mb-3">"Exceptional clarity and actionable insights. Our operations are far more efficient now. Five stars!"</p>
          <p class="font-semibold text-blue-600 dark:text-blue-400">John Smith</p>
          <p class="text-sm text-gray-500 dark:text-gray-400">Founder, Global Ventures</p>
        </div>
      </div>

      <!-- Review 3 -->
      <div class="flex flex-col sm:flex-row items-center sm:items-start gap-4 sm:gap-6 bg-gray-100 dark:bg-gray-700 p-5 rounded-md shadow-sm border border-gray-200 dark:border-gray-600">
        <img class="w-16 h-16 sm:w-20 sm:h-20 rounded-full object-cover border-2 border-pink-500 shrink-0" src="https://randomuser.me/api/portraits/women/5.jpg" alt="Client Avatar">
        <div class="text-center sm:text-left flex-grow">
          <div class="flex justify-center sm:justify-start items-center mb-2">
            <svg class="w-5 h-5 text-yellow-400 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279-7.416-3.908-7.416 3.908 1.48-8.279-6.064-5.828 8.332-1.151z"/></svg>
            <svg class="w-5 h-5 text-yellow-400 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279-7.416-3.908-7.416 3.908 1.48-8.279-6.064-5.828 8.332-1.151z"/></svg>
            <svg class="w-5 h-5 text-yellow-400 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279-7.416-3.908-7.416 3.908 1.48-8.279-6.064-5.828 8.332-1.151z"/></svg>
            <svg class="w-5 h-5 text-yellow-400 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279-7.416-3.908-7.416 3.908 1.48-8.279-6.064-5.828 8.332-1.151z"/></svg>
            <svg class="w-5 h-5 text-gray-400 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279-7.416-3.908-7.416 3.908 1.48-8.279-6.064-5.828 8.332-1.151z"/></svg>
          </div>
          <p class="text-lg dark:text-gray-200 leading-relaxed italic mb-3">"Professional, insightful, and truly transformative for our business strategy. A pleasure to work with!"</p>
          <p class="font-semibold text-blue-600 dark:text-blue-400">Sarah Chen</p>
          <p class="text-sm text-gray-500 dark:text-gray-400">Director, Creative Agency</p>
        </div>
      </div>
    </div>
    
    <div class="bg-gradient-to-r from-blue-500 via-indigo-500 to-purple-500 p-6 sm:p-8 text-center">
      <p class="text-white text-md sm:text-lg font-medium">Ready to transform your business? <a href="#" class="underline font-bold hover:text-yellow-200 transition-colors">Contact us today!</a></p>
    </div>
  </div>
</div>

관련 구성 요소

제품 리뷰 구성 요소

제품에 대한 사용자 리뷰를 표시하는 웹 구성 요소로, Tailwind CSS를 사용하여 마이크로 인터랙션 및 어두운 테마를 지원합니다.

열다

제품 리뷰 구성 요소

대시보드용으로 설계된 복잡한 제품 검토 구성 요소로, 3D 디자인 요소, 흙색 색상 및 다크 모드 지원을 제공합니다.

열다

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

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

열다