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

Product Reviews コンポーネント

レトロ/ビンテージスタイル、アースカラーの配色、適度な複雑さの製品レビューコンポーネント、レスポンシブデザイン、ダークテーマのサポート。スタイリングにはTailwind CSS、商品画像にはpicsum.photos、アバターには randomuser.me を使用します。JavaScript はありません。

プレビュー

HTMLコード 

<div class="container mx-auto p-4 font-mono">
  <!-- Light Mode -->
  <div class="bg-amber-100 text-amber-900 min-h-screen p-4 dark:hidden">
    <h2 class="text-3xl font-bold mb-6 text-center">Customer Reviews</h2>
    <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
      <!-- Review 1 -->
      <div class="bg-amber-200 p-6 rounded-lg shadow-md border-2 border-amber-800">
        <div class="flex items-center mb-4">
          <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar" class="w-12 h-12 rounded-full border-2 border-amber-800">
          <div class="ml-4">
            <h3 class="text-lg font-semibold">John Doe</h3>
            <div class="flex items-center text-yellow-600">
              <span class="material-icons">star</span>
              <span class="material-icons">star</span>
              <span class="material-icons">star</span>
              <span class="material-icons">star</span>
              <span class="material-icons">star_half</span>
            </div>
          </div>
        </div>
        <p class="italic mb-4">"This product is amazing! Highly recommend it to everyone."</p>
        <img src="https://picsum.photos/id/237/400/300" alt="Product Image" class="rounded-lg border-2 border-amber-800">
      </div>
      <!-- Review 2 -->
      <div class="bg-amber-200 p-6 rounded-lg shadow-md border-2 border-amber-800">
        <div class="flex items-center mb-4">
          <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="User Avatar" class="w-12 h-12 rounded-full border-2 border-amber-800">
          <div class="ml-4">
            <h3 class="text-lg font-semibold">Jane Smith</h3>
            <div class="flex items-center text-yellow-600">
              <span class="material-icons">star</span>
              <span class="material-icons">star</span>
              <span class="material-icons">star</span>
              <span class="material-icons">star</span>
              <span class="material-icons">star</span>
            </div>
          </div>
        </div>
        <p class="italic mb-4">"I

関連コンポーネント

Product Reviews コンポーネント

ダッシュボード用に設計された複雑な製品レビューコンポーネントで、3Dデザイン要素、アースカラー、ダークモードのサポートが特徴です。

開ける

Product Reviews コンポーネント

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

開ける

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

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

開ける