CCHub Logo CCHub Tailwind Collection
コンポーネント 製品レビュー Product Reviews コンポーネント

Product Reviews コンポーネント

Neumorphismスタイル、レスポンシブエフェクト、ダークテーマのサポートを備えたTailwind CSSを使用した製品レビューコンポーネント。JavaScript コードは含まれていません。プレースホルダー画像とアバターが使用されます。

プレビュー

HTMLコード 

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/tailwind.min.css" rel="stylesheet">

<style>
  body {
    background-color: #e0e0e0;
  }

  .neumorphism-card {
    background: #e0e0e0;
    box-shadow: 7px 7px 15px #bebebe, -7px -7px 15px #ffffff;
    border-radius: 12px;
  }

  .neumorphism-card-dark {
    background: #333;
    box-shadow: 7px 7px 15px #222, -7px -7px 15px #444;
  }

  @media (prefers-color-scheme: dark) {
    body {
      background-color: #333;
    }

    .neumorphism-card {
      background: #333;
      box-shadow: 7px 7px 15px #222, -7px -7px 15px #444;
    }
  }
</style>

<div class="container mx-auto p-4">
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">

        <!-- Review Card 1 -->
        <div class="neumorphism-card p-6 flex flex-col items-center text-center">
            <img class="w-16 h-16 rounded-full mb-4" src="https://randomuser.me/api/portraits/men/32.jpg" alt="Avatar">
            <p class="text-gray-700 dark:text-gray-300 mb-4">"This product is amazing! It exceeded my expectations."</p>
            <div class="flex items-center mb-4">
                <svg class="w-5 h-5 text-yellow-500" fill="currentColor" viewBox="0 0 20 20"><path d="M10 15l-5.92 3.17 1.12-6.54L.43 7.33l6.59-.96L10 0l2.98 6.37 6.59.96-4.77 4.3.9 6.54L10 15z"/></svg>
                <svg class="w-5 h-5 text-yellow-500" fill="currentColor" viewBox="0 0 20 20"><path d="M10 15l-5.92 3.17 1.12-6.54L.43 7.33l6.59-.96L10 0l2.98 6.37 6.59.96-4.77 4.3.9 6.54L10 15z"/></svg>
                <svg class="w-5 h-5 text-yellow-500" fill="currentColor" viewBox="0 0 20 20"><path d="M10 15l-5.92 3.17 1.12-6.54L.43 7.33l6.59-.96L10 0l2.98 6.37 6.59.96-4.77 4.3.9 6.54L10 15z"/></svg>
                <svg class="w-5 h-5 text-yellow-500" fill="currentColor" viewBox="0 0 20 20"><path d="M10 15l-5.92 3.17 1.12-6.54L.43 7.33l6.59-.96L10 0l2.98 6.37 6.59.96-4.77 4.3.9 6.54L10 15z"/></svg>
                <svg class="w-5 h-5 text-gray-400" fill="currentColor" viewBox="0 0 20 20"><path d="M10 15l-5.92 3.17 1.12-6.54L.43 7.33l6.59-.96L10 0l2.98 6.37 6.59.96-4.77 4.3.9 6.54L10 15z"/></svg>
            </div>
            <p class="font-semibold text-gray-800 dark:text-gray-200">- John Doe</p>
        </div>

        <!-- Review Card 2 -->
         <div class="neumorphism-card p-6 flex flex-col items-center text-center">
            <img class="w-16 h-16 rounded-full mb-4" src="https://randomuser.me/api/portraits/women/44.jpg" alt="Avatar">
            <p class="text-gray-700 dark:text-gray-300 mb-4">"Highly recommend this to everyone. Great quality and value."</p>
            <div class="flex items-center mb-4">
                <svg class="w-5 h-5 text-yellow-500" fill="currentColor" viewBox="0 0 20 20"><path d="M10 15l-5.92 3.17 1.12-6.54L.43 7.33l6.59-.96L10 0l2.98 6.37 6.59.96-4.77 4.3.9 6.54L10 15z"/></svg>
                <svg class="w-5 h-5 text-yellow-500" fill="currentColor" viewBox="0 0 20 20"><path d="M10 15l-5.92 3.17 1.12-6.54L.43 7.33l6.59-.96L10 0l2.98 6.37 6.59.96-4.77 4.3.9 6.54L10 15z"/></svg>
                <svg class="w-5 h-5 text-yellow-500" fill="currentColor" viewBox="0 0 20 20"><path d="M10 15l-5.92 3.17 1.12-6.54L.43 7.33l6.59-.96L10 0l2.98 6.37 6.59.96-4.77 4.3.9 6.54L10 15z"/></svg>
                <svg class="w-5 h-5 text-yellow-500" fill="currentColor" viewBox="0 0 20 20"><path d="M10 15l-5.92 3.17 1.12-6.54L.43 7.33l6.59-.96L10 0l2.98 6.37 6.59.96-4.77 4.3.9 6.54L10 15z"/></svg>
                 <svg class="w-5 h-5 text-yellow-500" fill="currentColor" viewBox="0 0 20 20"><path d="M10 15l-5.92 3.17 1.12-6.54L.43 7.33l6.59-.96L10 0l2.98 6.37 6.59.96-4.77 4.3.9 6.54L10 15z"/></svg>
            </div>
            <p class="font-semibold text-gray-800 dark:text-gray-200">- Jane Smith</p>
        </div>

        <!-- Review Card 3 -->
         <div class="neumorphism-card p-6 flex flex-col items-center text-center">
            <img class="w-16 h-16 rounded-full mb-4" src="https://randomuser.me/api/portraits/men/50.jpg" alt="Avatar">
            <p class="text-gray-700 dark:text-gray-300 mb-4">"Satisfied with my purchase. Will buy again."</p>
            <div class="flex items-center mb-4">
                <svg class="w-5 h-5 text-yellow-500" fill="currentColor" viewBox="0 0 20 20"><path d="M10 15l-5.92 3.17 1.12-6.54L.43 7.33l6.59-.96L10 0l2.98 6.37 6.59.96-4.77 4.3.9 6.54L10 15z"/></svg>
                <svg class="w-5 h-5 text-yellow-500" fill="currentColor" viewBox="0 0 20 20"><path d="M10 15l-5.92 3.17 1.12-6.54L.43 7.33l6.59-.96L10 0l2.98 6.37 6.59.96-4.77 4.3.9 6.54L10 15z"/></svg>
                <svg class="w-5 h-5 text-yellow-500" fill="currentColor" viewBox="0 0 20 20"><path d="M10 15l-5.92 3.17 1.12-6.54L.43 7.33l6.59-.96L10 0l2.98 6.37 6.59.96-4.77 4.3.9 6.54L10 15z"/></svg>
                <svg class="w-5 h-5 text-gray-400" fill="currentColor" viewBox="0 0 20 20"><path d="M10 15l-5.92 3.17 1.12-6.54L.43 7.33l6.59-.96L10 0l2.98 6.37 6.59.96-4.77 4.3.9 6.54L10 15z"/></svg>
                <svg class="w-5 h-5 text-gray-400" fill="currentColor" viewBox="0 0 20 20"><path d="M10 15l-5.92 3.17 1.12-6.54L.43 7.33l6.59-.96L10 0l2.98 6.37 6.59.96-4.77 4.3.9 6.54L10 15z"/></svg>
            </div>
            <p class="font-semibold text-gray-800 dark:text-gray-200">- Peter Jones</p>
        </div>

    </div>
</div>

関連コンポーネント

Product Reviews コンポーネント

製品レビューコンポーネントは、3Dデザイン要素、レスポンシブエフェクト、およびTailwind CSSを使用したダークテーマのサポートを備えています。

開ける

Product Reviews コンポーネント

Tailwind CSSを使用して設計されたミニマリスト製品レビューコンポーネントで、レスポンシブエフェクトとダークテーマのサポートが特徴です。

開ける

Product Reviews コンポーネント

ブルータリズムスタイルでデザインされた製品レビューコンポーネントで、ハイコントラスト、レスポンシブデザイン、ダークテーマのサポートが特徴です。これには、プレースホルダーサービスからのユーザーアバターと製品画像が含まれます。

開ける