検索コンポーネント

カテゴリ

製品レビュー

製品に関するユーザーレビューと評価

Product Reviews コンポーネント

オーガニック/自然にインスパイアされたデザイン、セピア/ブラウンの色調、ダークモードのサポート、エンターテインメント/メディアプラットフォームに適した、シンプルでレスポンシブな製品レビューコンポーネント。

                <div class="font-sans antialiased text-gray-800 bg-amber-50 dark:bg-stone-900 dark:text-gray-200 p-4 sm:p-6 lg:p-8 flex items-center justify-center min-h-screen">
  <div class="w-full max-w-2xl bg-amber-100 dark:bg-stone-800 rounded-xl shadow-lg overflow-hidden border border-amber-200 dark:border-stone-700 mx-auto">
    <div class="p-6 sm:p-8">
      <h2 class="text-2xl sm:text-3xl font-serif text-amber-900 dark:text-amber-50 mb-6 text-center tracking-wide">What Our Viewers Say</h2>

      <!-- Review 1 -->
      <div class="bg-amber-50 dark:bg-stone-700 p-5 rounded-lg mb-6 last:mb-0 border border-amber-100 dark:border-stone-600 shadow-sm flex flex-col sm:flex-row items-start sm:items-center">
        <img class="w-16 h-16 rounded-full object-cover mr-4 mb-4 sm:mb-0 border-2 border-amber-300 dark:border-amber-600 flex-shrink-0" src="https://randomuser.me/api/portraits/women/44.jpg" alt="Alice Johnson">
        <div class="flex-grow">
          <div class="flex items-center mb-2">
            <span class="text-amber-700 dark:text-amber-300 font-semibold mr-2">Alice J.</span>
            <div class="flex text-amber-500 dark:text-amber-400">
              <svg class="w-4 h-4 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.277L12 18.896l-7.416 3.882 1.48-8.277-6.064-5.828 8.332-1.151z"/></svg>
              <svg class="w-4 h-4 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.277L12 18.896l-7.416 3.882 1.48-8.277-6.064-5.828 8.332-1.151z"/></svg>
              <svg class="w-4 h-4 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.277L12 18.896l-7.416 3.882 1.48-8.277-6.064-5.828 8.332-1.151z"/></svg>
              <svg class="w-4 h-4 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.277L12 18.896l-7.416 3.882 1.48-8.277-6.064-5.828 8.332-1.151z"/></svg>
              <svg class="w-4 h-4 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.277L12 18.896l-7.416 3.882 1.48-8.277-6.064-5.828 8.332-1.151z"/></svg>
            </div>
          </div>
          <p class="text-stone-700 dark:text-stone-300 leading-relaxed text-sm lg:text-base">"Absolutely captivated! The storyline was so immersive, and the visuals were stunning. A truly unique experience that felt both fresh and familiar."</p>
        </div>
      </div>

      <!-- Review 2 -->
      <div class="bg-amber-50 dark:bg-stone-700 p-5 rounded-lg mb-6 last:mb-0 border border-amber-100 dark:border-stone-600 shadow-sm flex flex-col sm:flex-row items-start sm:items-center">
        <img class="w-16 h-16 rounded-full object-cover mr-4 mb-4 sm:mb-0 border-2 border-amber-300 dark:border-amber-600 flex-shrink-0" src="https://randomuser.me/api/portraits/men/32.jpg" alt="Mark Davis">
        <div class="flex-grow">
          <div class="flex items-center mb-2">
            <span class="text-amber-700 dark:text-amber-300 font-semibold mr-2">Mark D.</span>
            <div class="flex text-amber-500 dark:text-amber-400">
              <svg class="w-4 h-4 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.277L12 18.896l-7.416 3.882 1.48-8.277-6.064-5.828 8.332-1.151z"/></svg>
              <svg class="w-4 h-4 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.277L12 18.896l-7.416 3.882 1.48-8.277-6.064-5.828 8.332-1.151z"/></svg>
              <svg class="w-4 h-4 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.277L12 18.896l-7.416 3.882 1.48-8.277-6.064-5.828 8.332-1.151z"/></svg>
              <svg class="w-4 h-4 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.277L12 18.896l-7.416 3.882 1.48-8.277-6.064-5.828 8.332-1.151z"/></svg>
              <svg class="w-4 h-4 fill-current text-amber-200 dark:text-stone-500" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.277L12 18.896l-7.416 3.882 1.48-8.277-6.064-5.828 8.332-1.151z"/></svg>
            </div>
          </div>
          <p class="text-stone-700 dark:text-stone-300 leading-relaxed text-sm lg:text-base">"Great content for a relaxing evening. The pacing was perfect, and the character development was surprisingly deep. Definitely recommend it!"</p>
        </div>
      </div>
      
      <!-- Review 3 -->
      <div class="bg-amber-50 dark:bg-stone-700 p-5 rounded-lg last:mb-0 border border-amber-100 dark:border-stone-600 shadow-sm flex flex-col sm:flex-row items-start sm:items-center">
        <img class="w-16 h-16 rounded-full object-cover mr-4 mb-4 sm:mb-0 border-2 border-amber-300 dark:border-amber-600 flex-shrink-0" src="https://randomuser.me/api/portraits/women/22.jpg" alt="Sophia Lee">
        <div class="flex-grow">
          <div class="flex items-center mb-2">
            <span class="text-amber-700 dark:text-amber-300 font-semibold mr-2">Sophia L.</span>
            <div class="flex text-amber-500 dark:text-amber-400">
              <svg class="w-4 h-4 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.277L12 18.896l-7.416 3.882 1.48-8.277-6.064-5.828 8.332-1.151z"/></svg>
              <svg class="w-4 h-4 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.277L12 18.896l-7.416 3.882 1.48-8.277-6.064-5.828 8.332-1.151z"/></svg>
              <svg class="w-4 h-4 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.277L12 18.896l-7.416 3.882 1.48-8.277-6.064-5.828 8.332-1.151z"/></svg>
              <svg class="w-4 h-4 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.277L12 18.896l-7.416 3.882 1.48-8.277-6.064-5.828 8.332-1.151z"/></svg>
              <svg class="w-4 h-4 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.277L12 18.896l-7.416 3.882 1.48-8.277-6.064-5.828 8.332-1.151z"/></svg>
            </div>
          </div>
          <p class="text-stone-700 dark:text-stone-300 leading-relaxed text-sm lg:text-base">"A cinematic masterpiece! The production quality was top-notch, and the music score was simply breathtaking. It truly transported me to another world."</p>
        </div>
      </div>

    </div>
  </div>
</div>

Retro_Vintage_Product_Reviews_Component

レトロ/ビンテージの美学を備えたシンプルで応答性の高い製品レビューコンポーネントで、製造/工業企業に適したプロフェッショナルなブルートーンを使用しています。ダークモードのサポートが含まれています。

開けるプレビュー

                <section class="font-mono bg-blue-50 dark:bg-gray-900 py-12 px-4 sm:px-6 lg:px-8">
  <div class="max-w-4xl mx-auto">
    <h2 class="text-3xl sm:text-4xl font-bold text-center mb-12 uppercase tracking-wider text-blue-800 dark:text-blue-200 border-b-4 border-blue-600 dark:border-blue-400 pb-4 inline-block mx-auto">
      Customer Feedback Terminal
    </h2>

    <div class="grid gap-8 sm:grid-cols-1 lg:grid-cols-2">
      <!-- Review Card 1 -->
      <div class="bg-blue-100 dark:bg-gray-800 p-6 rounded-lg shadow-lg border-2 border-blue-300 dark:border-gray-700 transform transition duration-300 hover:scale-105 hover:shadow-xl">
        <div class="flex items-center mb-4">
          <img class="w-12 h-12 rounded-full border-2 border-blue-500 dark:border-blue- সহায়-400 mr-4" src="https://randomuser.me/api/portraits/men/32.jpg" alt="Customer Avatar">
          <div>
            <p class="font-semibold text-blue-800 dark:text-blue-100">Jasper 'The Cog' Milligan</p>
            <p class="text-sm text-blue-600 dark:text-blue-300">Production Manager</p>
          </div>
        </div>
        <div class="flex items-center mb-4">
          <svg class="w-5 h-5 text-yellow-500 dark:text-yellow-400 mr-1" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.538 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.783.57-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118l-2.8-2.034c-.783-.57-.381-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
          <svg class="w-5 h-5 text-yellow-500 dark:text-yellow-400 mr-1" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.538 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.783.57-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118l-2.8-2.034c-.783-.57-.381-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
          <svg class="w-5 h-5 text-yellow-500 dark:text-yellow-400 mr-1" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.538 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.783.57-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118l-2.8-2.034c-.783-.57-.381-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
          <svg class="w-5 h-5 text-yellow-500 dark:text-yellow-400 mr-1" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.538 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.783.57-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118l-2.8-2.034c-.783-.57-.381-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
          <svg class="w-5 h-5 text-gray-400 dark:text-gray-600" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.538 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.783.57-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118l-2.8-2.034c-.783-.57-.381-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
        </div>
        <blockquote class="text-blue-700 dark:text-blue-200 italic mb-4 border-l-4 border-blue-500 dark:border-blue-400 pl-4">
          "This machinery is a workhorse! Precision engineering from a bygone era, but with modern reliability. Integrates seamlessly with our existing setup. A true industrial classic!"
        </blockquote>
        <p class="text-sm text-blue-600 dark:text-blue-300 text-right">— Reviewed on: Octane 23, 1997</p>
      </div>

      <!-- Review Card 2 -->
      <div class="bg-blue-100 dark:bg-gray-800 p-6 rounded-lg shadow-lg border-2 border-blue-300 dark:border-gray-700 transform transition duration-300 hover:scale-105 hover:shadow-xl">
        <div class="flex items-center mb-4">
          <img class="w-12 h-12 rounded-full border-2 border-blue-500 dark:border-blue-400 mr-4" src="https://randomuser.me/api/portraits/women/44.jpg" alt="Customer Avatar">
          <div>
            <p class="font-semibold text-blue-800 dark:text-blue-100">Eleanor 'The Spark' Vance</p>
            <p class="text-sm text-blue-600 dark:text-blue-300">Lead Engineer, Robotics Division</p>
          </div>
        </div>
        <div class="flex items-center mb-4">
          <svg class="w-5 h-5 text-yellow-500 dark:text-yellow-400 mr-1" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.538 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.783.57-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118l-2.8-2.034c-.783-.57-.381-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
          <svg class="w-5 h-5 text-yellow-500 dark:text-yellow-400 mr-1" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.538 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.783.57-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118l-2.8-2.034c-.783-.57-.381-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
          <svg class="w-5 h-5 text-yellow-500 dark:text-yellow-400 mr-1" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.538 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.783.57-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118l-2.8-2.034c-.783-.57-.381-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
          <svg class="w-5 h-5 text-yellow-500 dark:text-yellow-400 mr-1" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.538 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.783.57-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118l-2.8-2.034c-.783-.57-.381-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
          <svg class="w-5 h-5 text-yellow-500 dark:text-yellow-400" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.538 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.783.57-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118l-2.8-2.034c-.783-.57-.381-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
        </div>
        <blockquote class="text-blue-700 dark:text-blue-200 italic mb-4 border-l-4 border-blue-500 dark:border-blue-400 pl-4">
          "Absolutely fantastic! The build quality reminds me of the good old days – robust and reliable. It handles extreme conditions without a hitch. A crucial asset for our high-tech industrial applications."
        </blockquote>
        <p class="text-sm text-blue-600 dark:text-blue-300 text-right">— Reviewed on: Nov 14, 1998</p>
      </div>

    </div>
  </div>
</section>

製品レビューコンポーネント - Bauhaus Rainbow Gradient

バウハウスにインスパイアされたデザインとレインボーグラデーションの配色を備えたシンプルで機能的な製品レビューコンポーネントで、コンサルティング/サービスに適しています。ダークモードのサポートにより完全にレスポンシブ。

開けるプレビュー

                <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>

Product Reviews コンポーネント

製造/工業企業向けに設計された、シンプルで単色のスキューモーフィック製品レビューコンポーネントで、レスポンシブレイアウトとダークモードのサポートが特徴です。

開けるプレビュー

                <div class="p-4 sm:p-6 md:p-8 bg-gray-200 dark:bg-gray-800 font-sans">
  <div class="max-w-3xl mx-auto bg-gray-100 dark:bg-gray-900 shadow-xl rounded-lg border-2 border-gray-300 dark:border-gray-700
    p-6 sm:p-8 md:p-10
    transform skew-y-1 rotate-1 scale-95
    hover:scale-100 hover:rotate-0 hover:skew-y-0 hover:shadow-2xl
    transition-all duration-300 ease-in-out
    relative overflow-hidden
    before:content-[''] before:absolute before:inset-0 before:bg-gradient-to-br before:from-gray-300/50 before:to-transparent before:via-gray-100/30 dark:before:from-gray-700/50 dark:before:to-transparent dark:before:via-gray-900/30
    after:content-[''] after:absolute after:bottom-0 after:left-0 after:right-0 after:h-12 after:bg-gradient-to-t after:from-gray-200/80 after:to-transparent dark:after:from-gray-800/80 dark:after:to-transparent">

    <div class="relative z-10 flex items-center justify-between mb-6">
      <h2 class="text-2xl sm:text-3xl font-bold text-gray-800 dark:text-gray-100 drop-shadow-md">Customer Feedback</h2>
      <span class="px-3 py-1 bg-gray-300 dark:bg-gray-700 text-gray-700 dark:text-gray-300 rounded-full text-sm font-semibold shadow-inner-lg shadow-gray-400/50 dark:shadow-gray-950/50">Total: 124 reviews</span>
    </div>

    <div class="grid grid-cols-1 gap-6 sm:gap-8 relative z-10">

      <!-- Review 1 -->
      <div class="bg-gray-200 dark:bg-gray-800 p-5 rounded-lg shadow-inner-lg shadow-gray-400/50 dark:shadow-gray-950/50
        border border-gray-300 dark:border-gray-700
        transform translate-x-1 translate-y-1 rotate-1
        hover:translate-x-0 hover:translate-y-0 hover:rotate-0
        transition-all duration-200 ease-in-out">
        <div class="flex items-start mb-4">
          <img class="w-12 h-12 rounded-full border-2 border-gray-400 dark:border-gray-600 shadow-md mr-4" src="https://randomuser.me/api/portraits/men/32.jpg" alt="Reviewer Avatar">
          <div>
            <p class="font-semibold text-gray-800 dark:text-gray-100">John D.</p>
            <div class="flex mt-1">
              <svg class="w-5 h-5 text-yellow-500 fill-current" viewBox="0 0 24 24"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/></svg>
              <svg class="w-5 h-5 text-yellow-500 fill-current" viewBox="0 0 24 24"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/></svg>
              <svg class="w-5 h-5 text-yellow-500 fill-current" viewBox="0 0 24 24"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/></svg>
              <svg class="w-5 h-5 text-yellow-500 fill-current" viewBox="0 0 24 24"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/></svg>
              <svg class="w-5 h-5 text-gray-400 fill-current" viewBox="0 0 24 24"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/></svg>
            </div>
          </div>
        </div>
        <p class="text-gray-700 dark:text-gray-300 leading-relaxed">
          "The XYZ-1000 machine has significantly boosted our production efficiency. Robust and reliable, it handles extreme loads with ease. A truly industrial-grade product."
        </p>
        <p class="text-xs text-gray-500 dark:text-gray-400 mt-3">Reviewed on: Oct 24, 2023</p>
      </div>

      <!-- Review 2 -->
      <div class="bg-gray-200 dark:bg-gray-800 p-5 rounded-lg shadow-inner-lg shadow-gray-400/50 dark:shadow-gray-950/50
        border border-gray-300 dark:border-gray-700
        transform translate-x-1 translate-y-1 rotate-1
        hover:translate-x-0 hover:translate-y-0 hover:rotate-0
        transition-all duration-200 ease-in-out">
        <div class="flex items-start mb-4">
          <img class="w-12 h-12 rounded-full border-2 border-gray-400 dark:border-gray-600 shadow-md mr-4" src="https://randomuser.me/api/portraits/women/44.jpg" alt="Reviewer Avatar">
          <div>
            <p class="font-semibold text-gray-800 dark:text-gray-100">Maria S.</p>
            <div class="flex mt-1">
              <svg class="w-5 h-5 text-yellow-500 fill-current" viewBox="0 0 24 24"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/></svg>
              <svg class="w-5 h-5 text-yellow-500 fill-current" viewBox="0 0 24 24"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/></svg>
              <svg class="w-5 h-5 text-yellow-500 fill-current" viewBox="0 0 24 24"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/></svg>
              <svg class="w-5 h-5 text-yellow-500 fill-current" viewBox="0 0 24 24"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/></svg>
              <svg class="w-5 h-5 text-yellow-500 fill-current" viewBox="0 0 24 24"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/></svg>
            </div>
          </div>
        </div>
        <p class="text-gray-700 dark:text-gray-300 leading-relaxed">
          "Exceptional quality and precision from their industrial-grade components. Their team provided excellent support throughout the integration process. Highly recommend for critical applications."
        </p>
        <p class="text-xs text-gray-500 dark:text-gray-400 mt-3">Reviewed on: Sep 10, 2023</p>
      </div>

    </div>

    <button class="relative z-10 mt-8 w-full py-3 px-6
      bg-gray-300 dark:bg-gray-700 text-gray-800 dark:text-gray-200 font-bold rounded-lg
      shadow-lg shadow-gray-400/50 dark:shadow-gray-950/50
      border border-gray-400 dark:border-gray-600
      transform active:translate-y-0.5 active:shadow-none
      hover:bg-gray-400 hover:dark:bg-gray-600
      transition-colors duration-200 ease-in-out
      text-lg sm:text-xl
      before:content-[''] before:absolute before:inset-0 before:rounded-lg before:bg-gradient-to-br before:from-gray-300/30 before:to-transparent dark:before:from-gray-700/30 dark:before:to-transparent">
      Load More Reviews
    </button>

  </div>
</div>

Product Reviews コンポーネント

ブログやコンテンツサイトに適したシンプルでレスポンシブな製品レビューコンポーネントで、マテリアルデザインの原則に基づいて設計されています。トライアドカラースキームとダークモードのサポートが特徴です。

開けるプレビュー

                <div class="p-4 sm:p-6 md:p-8 lg:p-10 bg-gradient-to-br from-indigo-50 to-purple-50 dark:from-gray-900 dark:to-teal-950 min-h-screen font-sans">
  <div class="max-w-4xl mx-auto bg-white dark:bg-gray-800 rounded-lg shadow-xl overflow-hidden">
    <div class="p-6 sm:p-8 md:p-10">
      <h2 class="text-3xl sm:text-4xl font-extrabold text-blue-800 dark:text-blue-400 mb-6 text-center tracking-tight leading-tight">
        Customer Reviews
      </h2>
      <div class="space-y-8">
        <!-- Review 1 -->
        <div class="flex flex-col sm:flex-row items-start sm:items-center p-4 bg-blue-50 dark:bg-gray-700 rounded-lg shadow-md">
          <img class="w-16 h-16 rounded-full object-cover ring-2 ring-blue-500 dark:ring-blue-400 mb-4 sm:mb-0 sm:mr-6 flex-shrink-0" src="https://randomuser.me/api/portraits/women/68.jpg" alt="Reviewer Avatar">
          <div class="flex-grow">
            <div class="flex items-center justify-between mb-2">
              <p class="text-lg font-semibold text-blue-700 dark:text-blue-300">Alice Johnson</p>
              <div class="flex text-yellow-500">
                <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.286 3.96h4.16c.969 0 1.371 1.24.588 1.81l-3.36 2.443 1.286 3.96c.3.921-.755 1.688-1.538 1.144L10 14.347l-3.36 2.443c-.783.544-1.838-.223-1.538-1.144l1.286-3.96-3.36-2.443c-.783-.57-.381-1.81.588-1.81h4.16l1.286-3.96z"></path></svg>
                <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.286 3.96h4.16c.969 0 1.371 1.24.588 1.81l-3.36 2.443 1.286 3.96c.3.921-.755 1.688-1.538 1.144L10 14.347l-3.36 2.443c-.783.544-1.838-.223-1.538-1.144l1.286-3.96-3.36-2.443c-.783-.57-.381-1.81.588-1.81h4.16l1.286-3.96z"></path></svg>
                <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.286 3.96h4.16c.969 0 1.371 1.24.588 1.81l-3.36 2.443 1.286 3.96c.3.921-.755 1.688-1.538 1.144L10 14.347l-3.36 2.443c-.783.544-1.838-.223-1.538-1.144l1.286-3.96-3.36-2.443c-.783-.57-.381-1.81.588-1.81h4.16l1.286-3.96z"></path></svg>
                <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.286 3.96h4.16c.969 0 1.371 1.24.588 1.81l-3.36 2.443 1.286 3.96c.3.921-.755 1.688-1.538 1.144L10 14.347l-3.36 2.443c-.783.544-1.838-.223-1.538-1.144l1.286-3.96-3.36-2.443c-.783-.57-.381-1.81.588-1.81h4.16l1.286-3.96z"></path></svg>
                <svg class="w-5 h-5 text-gray-300 dark:text-gray-500" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.286 3.96h4.16c.969 0 1.371 1.24.588 1.81l-3.36 2.443 1.286 3.96c.3.921-.755 1.688-1.538 1.144L10 14.347l-3.36 2.443c-.783.544-1.838-.223-1.538-1.144l1.286-3.96-3.36-2.443c-.783-.57-.381-1.81.588-1.81h4.16l1.286-3.96z"></path></svg>
              </div>
            </div>
            <p class="text-gray-600 dark:text-gray-300 text-sm italic mb-3">"This product exceeded my expectations!"</p>
            <p class="text-gray-700 dark:text-gray-200 leading-relaxed text-sm">
              I've been using this for a few weeks now and I'm incredibly impressed. It's user-friendly, robust, and performs exactly as advertised. Highly recommend for anyone looking for a reliable solution. The material quality feels premium.
            </p>
          </div>
        </div>

        <!-- Review 2 -->
        <div class="flex flex-col sm:flex-row items-start sm:items-center p-4 bg-purple-50 dark:bg-gray-700 rounded-lg shadow-md">
          <img class="w-16 h-16 rounded-full object-cover ring-2 ring-purple-500 dark:ring-purple-400 mb-4 sm:mb-0 sm:mr-6 flex-shrink-0" src="https://randomuser.me/api/portraits/men/44.jpg" alt="Reviewer Avatar">
          <div class="flex-grow">
            <div class="flex items-center justify-between mb-2">
              <p class="text-lg font-semibold text-purple-700 dark:text-purple-300">David Lee</p>
              <div class="flex text-yellow-500">
                <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.286 3.96h4.16c.969 0 1.371 1.24.588 1.81l-3.36 2.443 1.286 3.96c.3.921-.755 1.688-1.538 1.144L10 14.347l-3.36 2.443c-.783.544-1.838-.223-1.538-1.144l1.286-3.96-3.36-2.443c-.783-.57-.381-1.81.588-1.81h4.16l1.286-3.96z"></path></svg>
                <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.286 3.96h4.16c.969 0 1.371 1.24.588 1.81l-3.36 2.443 1.286 3.96c.3.921-.755 1.688-1.538 1.144L10 14.347l-3.36 2.443c-.783.544-1.838-.223-1.538-1.144l1.286-3.96-3.36-2.443c-.783-.57-.381-1.81.588-1.81h4.16l1.286-3.96z"></path></svg>
                <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.286 3.96h4.16c.969 0 1.371 1.24.588 1.81l-3.36 2.443 1.286 3.96c.3.921-.755 1.688-1.538 1.144L10 14.347l-3.36 2.443c-.783.544-1.838-.223-1.538-1.144l1.286-3.96-3.36-2.443c-.783-.57-.381-1.81.588-1.81h4.16l1.286-3.96z"></path></svg>
                <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.286 3.96h4.16c.969 0 1.371 1.24.588 1.81l-3.36 2.443 1.286 3.96c.3.921-.755 1.688-1.538 1.144L10 14.347l-3.36 2.443c-.783.544-1.838-.223-1.538-1.144l1.286-3.96-3.36-2.443c-.783-.57-.381-1.81.588-1.81h4.16l1.286-3.96z"></path></svg>
                <svg class="w-5 h-5 fill-current text-yellow-500" viewBox="0 0 20 20"><path d="M10 15.27l-3.82 2.43 1.05-4.59-3.56-3.09 4.67-.4 1.86-4.22 1.86 4.22 4.67.4-3.56 3.09 1.05 4.59z"/></svg>
              </div>
            </div>
            <p class="text-gray-600 dark:text-gray-300 text-sm italic mb-3">"Good value for the price, minor flaw."</p>
            <p class="text-gray-700 dark:text-gray-200 leading-relaxed text-sm">
              Overall, I'm happy with my purchase. It does what it promises and is a good value. However, I noticed a small ding on the side upon arrival, which was a bit disappointing. Still, it functions perfectly.
            </p>
          </div>
        </div>

        <!-- Review 3 -->
        <div class="flex flex-col sm:flex-row items-start sm:items-center p-4 bg-yellow-50 dark:bg-gray-700 rounded-lg shadow-md">
          <img class="w-16 h-16 rounded-full object-cover ring-2 ring-yellow-500 dark:ring-yellow-400 mb-4 sm:mb-0 sm:mr-6 flex-shrink-0" src="https://randomuser.me/api/portraits/women/2.jpg" alt="Reviewer Avatar">
          <div class="flex-grow">
            <div class="flex items-center justify-between mb-2">
              <p class="text-lg font-semibold text-yellow-700 dark:text-yellow-300">Sarah Kim</p>
              <div class="flex text-yellow-500">
                 <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.286 3.96h4.16c.969 0 1.371 1.24.588 1.81l-3.36 2.443 1.286 3.96c.3.921-.755 1.688-1.538 1.144L10 14.347l-3.36 2.443c-.783.544-1.838-.223-1.538-1.144l1.286-3.96-3.36-2.443c-.783-.57-.381-1.81.588-1.81h4.16l1.286-3.96z"></path></svg>
                <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.286 3.96h4.16c.969 0 1.371 1.24.588 1.81l-3.36 2.443 1.286 3.96c.3.921-.755 1.688-1.538 1.144L10 14.347l-3.36 2.443c-.783.544-1.838-.223-1.538-1.144l1.286-3.96-3.36-2.443c-.783-.57-.381-1.81.588-1.81h4.16l1.286-3.96z"></path></svg>
                <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.286 3.96h4.16c.969 0 1.371 1.24.588 1.81l-3.36 2.443 1.286 3.96c.3.921-.755 1.688-1.538 1.144L10 14.347l-3.36 2.443c-.783.544-1.838-.223-1.538-1.144l1.286-3.96-3.36-2.443c-.783-.57-.381-1.81.588-1.81h4.16l1.286-3.96z"></path></svg>
                <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.286 3.96h4.16c.969 0 1.371 1.24.588 1.81l-3.36 2.443 1.286 3.96c.3.921-.755 1.688-1.538 1.144L10 14.347l-3.36 2.443c-.783.544-1.838-.223-1.538-1.144l1.286-3.96-3.36-2.443c-.783-.57-.381-1.81.588-1.81h4.16l1.286-3.96z"></path></svg>
                 <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.286 3.96h4.16c.969 0 1.371 1.24.588 1.81l-3.36 2.443 1.286 3.96c.3.921-.755 1.688-1.538 1.144L10 14.347l-3.36 2.443c-.783.544-1.838-.223-1.538-1.144l1.286-3.96-3.36-2.443c-.783-.57-.381-1.81.588-1.81h4.16l1.286-3.96z"></path></svg>
              </div>
            </div>
            <p class="text-gray-600 dark:text-gray-300 text-sm italic mb-3">"Absolutely perfect, no complaints!"</p>
            <p class="text-gray-700 dark:text-gray-200 leading-relaxed text-sm">
              From the moment I unboxed it, I knew this was a quality product. Setup was a breeze, and it works flawlessly. It's truly transformed my daily routine. A definite five-star experience!
            </p>
          </div>
        </div>

      </div>
    </div>
  </div>
</div>

Neumorphic Product Reviews コンポーネント

ニューモルフィックデザイン、類似の配色、ダークモードのサポートを備えたシンプルでレスポンシブな製品レビューコンポーネントで、ビジネスや企業のWebサイトに適しています。

開けるプレビュー

                <div class="p-4 sm:p-6 md:p-8 bg-gradient-to-br from-purple-100 via-pink-100 to-red-100 dark:from-purple-900 dark:via-pink-900 dark:to-red-900 min-h-screen flex items-center justify-center font-sans">
  <div class="w-full max-w-md mx-auto p-6 md:p-8 rounded-2xl shadow-xl transition-all duration-300 ease-in-out
              bg-gradient-to-br from-purple-50 to-pink-50
              dark:from-purple-800 dark:to-pink-800
              dark:shadow-neutral-900/50
              shadow-purple-200/50 dark:shadow-inner-xl
              dark:border dark:border-pink-700/50">

    <h3 class="text-2xl sm:text-3xl font-bold text-gray-800 dark:text-gray-100 mb-6 text-center
               drop-shadow-sm dark:drop-shadow-md">
      Customer Reviews
    </h3>

    <div class="space-y-6">

      <!-- Review 1 -->
      <div class="p-4 rounded-xl shadow-md transition-all duration-300 ease-in-out
                  bg-gradient-to-br from-purple-100 to-pink-100
                  dark:from-purple-900 dark:to-pink-900
                  shadow-md shadow-purple-200/50 dark:shadow-neutral-900/40
                  dark:hover:shadow-neutral-900/60
                  hover:shadow-lg hover:shadow-purple-300/50
                  dark:border dark:border-pink-800/50">
        <div class="flex items-center mb-3">
          <img class="w-10 h-10 rounded-full mr-3 shadow-sm from-red-200 to-pink-200 dark:from-red-800 dark:to-pink-800"
               src="https://randomuser.me/api/portraits/women/44.jpg" alt="User Avatar">
          <div>
            <p class="font-semibold text-gray-800 dark:text-gray-200">Jane Doe</p>
            <div class="flex text-yellow-500">
              <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.538 1.118l-2.8-2.034a1 1 0 00-1.176 0l-2.8 2.034c-.783.57-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.381-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
              <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.538 1.118l-2.8-2.034a1 1 0 00-1.176 0l-2.8 2.034c-.783.57-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.381-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
              <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.538 1.118l-2.8-2.034a1 1 0 00-1.176 0l-2.8 2.034c-.783.57-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.381-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
              <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.538 1.118l-2.8-2.034a1 1 0 00-1.176 0l-2.8 2.034c-.783.57-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.381-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
              <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.538 1.118l-2.8-2.034a1 1 0 00-1.176 0l-2.8 2.034c-.783.57-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.381-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
            </div>
          </div>
        </div>
        <p class="text-gray-700 dark:text-gray-300 text-sm leading-relaxed">
          “This product exceeded my expectations! The quality is superb and it was exactly what I needed. Highly recommend it to everyone looking for a reliable solution.”
        </p>
      </div>

      <!-- Review 2 -->
      <div class="p-4 rounded-xl shadow-md transition-all duration-300 ease-in-out
                  bg-gradient-to-br from-purple-100 to-pink-100
                  dark:from-purple-900 dark:to-pink-900
                  shadow-md shadow-purple-200/50 dark:shadow-neutral-900/40
                  dark:hover:shadow-neutral-900/60
                  hover:shadow-lg hover:shadow-purple-300/50
                  dark:border dark:border-pink-800/50">
        <div class="flex items-center mb-3">
          <img class="w-10 h-10 rounded-full mr-3 shadow-sm from-red-200 to-pink-200 dark:from-red-800 dark:to-pink-800"
               src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar">
          <div>
            <p class="font-semibold text-gray-800 dark:text-gray-200">John Smith</p>
            <div class="flex text-yellow-500">
              <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.538 1.118l-2.8-2.034a1 1 0 00-1.176 0l-2.8 2.034c-.783.57-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.381-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
              <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.538 1.118l-2.8-2.034a1 1 0 00-1.176 0l-2.8 2.034c-.783.57-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.381-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
              <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.538 1.118l-2.8-2.034a1 1 0 00-1.176 0l-2.8 2.034c-.783.57-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.381-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
              <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.538 1.118l-2.8-2.034a1 1 0 00-1.176 0l-2.8 2.034c-.783.57-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.381-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
              <svg class="w-4 h-4 text-gray-300 dark:text-gray-600" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.538 1.118l-2.8-2.034a1 1 0 00-1.176 0l-2.8 2.034c-.783.57-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.381-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
            </div>
          </div>
        </div>
        <p class="text-gray-700 dark:text-gray-300 text-sm leading-relaxed">
          “Good product overall, but there's room for improvement in the user interface. Still, it delivers on its core promises. Worth considering.”
        </p>
      </div>

      <!-- Review 3 -->
      <div class="p-4 rounded-xl shadow-md transition-all duration-300 ease-in-out
                  bg-gradient-to-br from-purple-100 to-pink-100
                  dark:from-purple-900 dark:to-pink-900
                  shadow-md shadow-purple-200/50 dark:shadow-neutral-900/40
                  dark:hover:shadow-neutral-900/60
                  hover:shadow-lg hover:shadow-purple-300/50
                  dark:border dark:border-pink-800/50">
        <div class="flex items-center mb-3">
          <img class="w-10 h-10 rounded-full mr-3 shadow-sm from-red-200 to-pink-200 dark:from-red-800 dark:to-pink-800"
               src="https://randomuser.me/api/portraits/women/2.jpg" alt="User Avatar">
          <div>
            <p class="font-semibold text-gray-800 dark:text-gray-200">Emily White</p>
            <div class="flex text-yellow-500">
              <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.538 1.118l-2.8-2.034a1 1 0 00-1.176 0l-2.8 2.034c-.783.57-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.381-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
              <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.538 1.118l-2.8-2.034a1 1 0 00-1.176 0l-2.8 2.034c-.783.57-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.381-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
              <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.538 1.118l-2.8-2.034a1 1 0 00-1.176 0l-2.8 2.034c-.783.57-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.381-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
              <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.538 1.118l-2.8-2.034a1 1 0 00-1.176 0l-2.8 2.034c-.783.57-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.381-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
              <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.538 1.118l-2.8-2.034a1 1 0 00-1.176 0l-2.8 2.034c-.783.57-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.381-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
            </div>
          </div>
        </div>
        <p class="text-gray-700 dark:text-gray-300 text-sm leading-relaxed">
          “Absolutely fantastic! The customer support was incredibly helpful, and the product itself is flawless. A joy to use every day.”
        </p>
      </div>

    </div>
  </div>
</div>

Product Reviews コンポーネント

グレースケールの配色でマテリアルデザインスタイルでデザインされたシンプルな製品レビューコンポーネント。

開けるプレビュー

                <div class="max-w-md mx-auto my-10 bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden">
    <div class="p-5">
        <h2 class="text-lg font-bold text-gray-800 dark:text-gray-100">Product Reviews</h2>
        <div class="mt-4">
            <div class="flex items-center mb-4">
                <img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" />
                <div class="ml-3">
                    <h3 class="text-gray-800 dark:text-gray-100 font-semibold">John Doe</h3>
                    <p class="text-gray-600 dark:text-gray-400">5 stars</p>
                    <p class="text-gray-600 dark:text-gray-400">This product is amazing! Highly recommend.</p>
                </div>
            </div>
            <div class="flex items-center mb-4">
                <img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/women/2.jpg" alt="User Avatar" />
                <div class="ml-3">
                    <h3 class="text-gray-800 dark:text-gray-100 font-semibold">Jane Smith</h3>
                    <p class="text-gray-600 dark:text-gray-400">4 stars</p>
                    <p class="text-gray-600 dark:text-gray-400">Great quality but could be a bit cheaper.</p>
                </div>
            </div>
            <div class="flex items-center mb-4">
                <img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/men/3.jpg" alt="User Avatar" />
                <div class="ml-3">
                    <h3 class="text-gray-800 dark:text-gray-100 font-semibold">Michael Johnson</h3>
                    <p class="text-gray-600 dark:text-gray-400">3 stars</p>
                    <p class="text-gray-600 dark:text-gray-400">Average experience, nothing special.</p>
                </div>
            </div>
        </div>
    </div>
</div>

レトロな製品レビューカード

レトロ/ビンテージの美学でデザインされた製品レビューコンポーネントで、トライアドの配色(ティール、フクシア、アンバー)を使用しています。シンプルで応答性が高く、ダークモードをサポートし、製品のフィードバックを紹介するポートフォリオに適しています。Tailwind CSSを使用します。

開けるプレビュー

                <div class="max-w-sm mx-auto mb-8 p-6 bg-gray-100 rounded-lg shadow-lg border-2 border-dashed border-teal-500 dark:bg-gray-800 dark:border-teal-400">
  <div class="flex items-center mb-4">
    <img class="w-12 h-12 rounded-full mr-4 border-2 border-fuchsia-500 dark:border-fuchsia-400" src="https://randomuser.me/api/portraits/women/44.jpg" alt="User Avatar">
    <div>
      <p class="text-lg font-bold text-fuchsia-600 dark:text-fuchsia-400">Janet Doe</p>
      <div class="flex items-center text-amber-500 dark:text-amber-400 text-sm">
        &#9733;&#9733;&#9733;&#9733;&#9734; <!-- 4 out of 5 stars -->
      </div>
    </div>
  </div>
  <div>
    <p class="text-gray-800 dark:text-gray-200 leading-relaxed">
      This product is amazing! The quality is fantastic, and it exceeded my expectations. Highly recommended for anyone looking for a great value. The retro design elements really pop!
    </p>
  </div>
</div>

<div class="max-w-sm mx-auto mb-8 p-6 bg-gray-100 rounded-lg shadow-lg border-2 border-dotted border-teal-500 dark:bg-gray-800 dark:border-teal-400">
  <div class="flex items-center mb-4">
    <img class="w-12 h-12 rounded-full mr-4 border-2 border-fuchsia-500 dark:border-fuchsia-400" src="https://randomuser.me/api/portraits/men/33.jpg" alt="User Avatar">
    <div>
      <p class="text-lg font-bold text-fuchsia-600 dark:text-fuchsia-400">Michael Smith</p>
      <div class="flex items-center text-amber-500 dark:text-amber-400 text-sm">
        &#9733;&#9733;&#9733;&#9733;&#9733; <!-- 5 out of 5 stars -->
      </div>
    </div>
  </div>
  <div>
    <p class="text-gray-800 dark:text-gray-200 leading-relaxed">
      Absolutely love this! It fits perfectly into my retro-themed setup. The colors are vibrant a truly classic feel. Will definitely buy again.
    </p>
  </div>
</div>

Product Reviews コンポーネント

ソーシャルメディアインターフェース用に設計されたミニマリストの製品レビューコンポーネントで、トライアドの配色とインタラクティブな要素を統合しています。

開けるプレビュー

                <div class="bg-white dark:bg-gray-800 p-5 rounded-lg shadow-md max-w-md mx-auto">
    <h2 class="text-xl font-semibold mb-4 text-gray-800 dark:text-white">Product Reviews</h2>
    <div class="flex items-center space-x-4 mb-6">
        <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar" class="w-12 h-12 rounded-full">
        <div>
            <h3 class="text-lg font-medium text-gray-900 dark:text-gray-100">John Doe</h3>
            <span class="text-sm text-gray-600 dark:text-gray-300">1 hour ago</span>
        </div>
    </div>
    <div class="mb-4">
        <img src="https://picsum.photos/500/200" alt="Product Image" class="w-full h-32 object-cover rounded-md">
    </div>
    <p class="text-gray-800 dark:text-gray-200 mb-3">This product has exceeded my expectations! The quality is exceptional and it looks great in my living room.</p>
    <div class="flex items-center space-x-4 mb-4">
        <button class="bg-blue-500 hover:bg-blue-600 text-white font-semibold py-1 px-2 rounded">Like</button>
        <button class="bg-green-500 hover:bg-green-600 text-white font-semibold py-1 px-2 rounded">Reply</button>
    </div>
    <div class="border-t border-gray-300 dark:border-gray-700 pt-4 mt-4">
        <h4 class="text-md font-semibold text-gray-700 dark:text-gray-300">Leave a Review</h4>
        <textarea class="w-full border border-gray-300 dark:border-gray-700 rounded-md p-2 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-700" rows="4" placeholder="Write your thoughts..."></textarea>
        <button class="mt-2 bg-blue-500 hover:bg-blue-600 text-white font-semibold py-1 px-2 rounded">Submit</button>
    </div>
</div>

製品レビューコンポーネント(スキュアモーフィックパステル)

パステルカラーを使用し、ダークモードをサポートするSkeuomorphicデザインの美学でスタイリングされた、複雑で応答性の高い製品レビューコンポーネント。レイヤー化されたカード、微妙なグラデーション、影が特徴で、奥行きを演出します。アバター、名前、星評価、レビューテキスト、オプションの画像が含まれます。Tailwind CSSをJavaScriptなしで排他的に使用します。

開けるプレビュー

                <div class="container mx-auto p-4 sm:p-6 lg:p-8 max-w-4xl bg-blue-50 dark:bg-gray-900">
    <!-- Reviews Header -->
    <div class="mb-8 text-center">
        <h2 class="text-3xl font-bold text-gray-800 dark:text-gray-200 mb-2">Customer Reviews</h2>
        <!-- Static Average Rating - Skeuomorphic feel -->
        <div class="inline-block bg-gradient-to-b from-gray-200 to-gray-300 dark:from-gray-700 dark:to-gray-800 border border-gray-300 dark:border-gray-600 rounded-full px-4 py-2 shadow-md dark:shadow-xl dark:shadow-gray-950">
            <span class="text-xl font-semibold text-yellow-600 dark:text-yellow-400 mr-2">★★★★☆</span>
            <span class="text-gray-700 dark:text-gray-300 font-medium">4.5 out of 5</span>
        </div>
    </div>

    <!-- Reviews List -->
    <div class="space-y-6">
        <!-- Individual Review Card -->
        <div class="bg-gradient-to-b from-gray-100 to-white dark:from-gray-800 dark:to-gray-900 border border-gray-200 dark:border-gray-700 rounded-lg p-6 shadow-xl dark:shadow-xl dark:shadow-gray-950 transform hover:scale-[1.01] transition-transform duration-200">
            <div class="flex items-start space-x-4 mb-4">
                <!-- Avatar - Skeuomorphic border/shadow -->
                <img class="w-12 h-12 rounded-full border-2 border-gray-300 dark:border-gray-600 shadow-md dark:shadow-lg" src="https://randomuser.me/api/portraits/women/32.jpg" alt="Reviewer Avatar">
                <div class="flex-1">
                    <div class="flex items-center justify-between mb-1">
                        <span class="text-lg font-semibold text-gray-800 dark:text-gray-200">Alice Wonderland</span>
                        <!-- Star Rating - Skeuomorphic feel -->
                        <div class="inline-block text-yellow-500 dark:text-yellow-400 text-xl">★★★★★</div>
                    </div>
                    <p class="text-sm text-gray-600 dark:text-gray-400">Reviewed on <span class="font-medium">January 15, 2023</span></p>
                </div>
            </div>

            <h4 class="text-xl font-bold text-gray-800 dark:text-gray-200 mb-3">Absolutely Love This Product!</h4>
            <p class="text-gray-700 dark:text-gray-300 leading-relaxed mb-4">
                The quality is outstanding, and it exceeded all my expectations. It feels premium and works flawlessly. Highly recommend!
            </p>

            <!-- Review Images - Skeuomorphic border/shadow -->
            <div class="flex space-x-3 mb-4">
                <img class="w-20 h-20 sm:w-24 sm:h-24 object-cover rounded-md border border-gray-300 dark:border-gray-600 shadow-sm dark:shadow-lg" src="https://picsum.photos/seed/review1a/200/200" alt="Review Image 1">
                <img class="w-20 h-20 sm:w-24 sm:h-24 object-cover rounded-md border border-gray-300 dark:border-gray-600 shadow-sm dark:shadow-lg" src="https://picsum.photos/seed/review1b/200/200" alt="Review Image 2">
            </div>

            <!-- Static Helpful/Report buttons - Skeuomorphic feel -->
             <div class="flex items-center space-x-4 text-sm text-gray-600 dark:text-gray-400">
                <div class="flex items-center bg-gradient-to-b from-gray-200 to-gray-300 dark:from-gray-700 dark:to-gray-800 border border-gray-300 dark:border-gray-600 rounded-full px-3 py-1 shadow-inset dark:shadow-lg">
                    <span class="mr-1">👍</span> Helpful <span class="font-semibold ml-1">(42)</span>
                </div>
                 <div class="flex items-center bg-gradient-to-b from-gray-200 to-gray-300 dark:from-gray-700 dark:to-gray-800 border border-gray-300 dark:border-gray-600 rounded-full px-3 py-1 shadow-inset dark:shadow-lg">
                    <span class="mr-1">👎</span> Not Helpful <span class="font-semibold ml-1">(5)</span>
                </div>
                 <div class="flex items-center bg-gradient-to-b from-gray-200 to-gray-300 dark:from-gray-700 dark:to-gray-800 border border-gray-300 dark:border-gray-600 rounded-full px-3 py-1 shadow-inset dark:shadow-lg">
                    <span class="mr-1">🚩</span> Report
                </div>
            </div>
        </div>

         <!-- Individual Review Card 2 -->
         <div class="bg-gradient-to-b from-gray-100 to-white dark:from-gray-800 dark:to-gray-900 border border-gray-200 dark:border-gray-700 rounded-lg p-6 shadow-xl dark:shadow-xl dark:shadow-gray-950 transform hover:scale-[1.01] transition-transform duration-200">
            <div class="flex items-start space-x-4 mb-4">
                <!-- Avatar - Skeuomorphic border/shadow -->
                <img class="w-12 h-12 rounded-full border-2 border-gray-300 dark:border-gray-600 shadow-md dark:shadow-lg" src="https://randomuser.me/api/portraits/men/45.jpg" alt="Reviewer Avatar">
                <div class="flex-1">
                    <div class="flex items-center justify-between mb-1">
                        <span class="text-lg font-semibold text-gray-800 dark:text-gray-200">Bob The Builder</span>
                        <!-- Star Rating - Skeuomorphic feel -->
                         <div class="inline-block text-yellow-500 dark:text-yellow-400 text-xl">★★★★☆</div>
                    </div>
                    <p class="text-sm text-gray-600 dark:text-gray-400">Reviewed on <span class="font-medium">January 10, 2023</span></p>
                </div>
            </div>

            <h4 class="text-xl font-bold text-gray-800 dark:text-gray-200 mb-3">Very Good, Minor Issue</h4>
            <p class="text-gray-700 dark:text-gray-300 leading-relaxed mb-4">
                Overall this product is excellent and performs well. The setup was straightforward. My only minor complaint is...
            </p>

            <!-- No images for this review -->

             <div class="flex items-center space-x-4 text-sm text-gray-600 dark:text-gray-400">
                <div class="flex items-center bg-gradient-to-b from-gray-200 to-gray-300 dark:from-gray-700 dark:to-gray-800 border border-gray-300 dark:border-gray-600 rounded-full px-3 py-1 shadow-inset dark:shadow-lg">
                    <span class="mr-1">👍</span> Helpful <span class="font-semibold ml-1">(18)</span>
                </div>
                 <div class="flex items-center bg-gradient-to-b from-gray-200 to-gray-300 dark:from-gray-700 dark:to-gray-800 border border-gray-300 dark:border-gray-600 rounded-full px-3 py-1 shadow-inset dark:shadow-lg">
                    <span class="mr-1">👎</span> Not Helpful <span class="font-semibold ml-1">(2)</span>
                </div>
                 <div class="flex items-center bg-gradient-to-b from-gray-200 to-gray-300 dark:from-gray-700 dark:to-gray-800 border border-gray-300 dark:border-gray-600 rounded-full px-3 py-1 shadow-inset dark:shadow-lg">
                    <span class="mr-1">🚩</span> Report
                </div>
            </div>
        </div>

        <!-- Individual Review Card 3 - Lower rating -->
         <div class="bg-gradient-to-b from-gray-100 to-white dark:from-gray-800 dark:to-gray-900 border border-gray-200 dark:border-gray-700 rounded-lg p-6 shadow-xl dark:shadow-xl dark:shadow-gray-950 transform hover:scale-[1.01] transition-transform duration-200">
            <div class="flex items-start space-x-4 mb-4">
                <!-- Avatar - Skeuomorphic border/shadow -->
                <img class="w-12 h-12 rounded-full border-2 border-gray-300 dark:border-gray-600 shadow-md dark:shadow-lg" src="https://randomuser.me/api/portraits/women/19.jpg" alt="Reviewer Avatar">
                <div class="flex-1">
                    <div class="flex items-center justify-between mb-1">
                        <span class="text-lg font-semibold text-gray-800 dark:text-gray-200">Charlie Davis</span>
                        <!-- Star Rating - Skeuomorphic feel -->
                         <div class="inline-block text-yellow-500 dark:text-yellow-400 text-xl">★★★☆☆</div>
                    </div>
                    <p class="text-sm text-gray-600 dark:text-gray-400">Reviewed on <span class="font-medium">January 05, 2023</span></p>
                </div>
            </div>

            <h4 class="text-xl font-bold text-gray-800 dark:text-gray-200 mb-3">It's Okay, Not What I Expected</h4>
            <p class="text-gray-700 dark:text-gray-300 leading-relaxed mb-4">
                The features are decent, but it feels a bit flimsy compared to the description. It gets the job done, but I wouldn't purchase it again.
            </p>

            <!-- Review Images -->
             <div class="flex space-x-3 mb-4">
                <img class="w-20 h-20 sm:w-24 sm:h-24 object-cover rounded-md border border-gray-300 dark:border-gray-600 shadow-sm dark:shadow-lg" src="https://picsum.photos/seed/review3a/200/200" alt="Review Image 1">
             </div>

             <div class="flex items-center space-x-4 text-sm text-gray-600 dark:text-gray-400">
                <div class="flex items-center bg-gradient-to-b from-gray-200 to-gray-300 dark:from-gray-700 dark:to-gray-800 border border-gray-300 dark:border-gray-600 rounded-full px-3 py-1 shadow-inset dark:shadow-lg">
                    <span class="mr-1">👍</span> Helpful <span class="font-semibold ml-1">(7)</span>
                </div>
                 <div class="flex items-center bg-gradient-to-b from-gray-200 to-gray-300 dark:from-gray-700 dark:to-gray-800 border border-gray-300 dark:border-gray-600 rounded-full px-3 py-1 shadow-inset dark:shadow-lg">
                    <span class="mr-1">👎</span> Not Helpful <span class="font-semibold ml-1">(15)</span>
                </div>
                 <div class="flex items-center bg-gradient-to-b from-gray-200 to-gray-300 dark:from-gray-700 dark:to-gray-800 border border-gray-300 dark:border-gray-600 rounded-full px-3 py-1 shadow-inset dark:shadow-lg">
                    <span class="mr-1">🚩</span> Report
                </div>
            </div>
        </div>
    </div>
</div>