Luxury_Premium_Vibrant_Simple_Food_Restaurant_Feedback_Component
鮮やかで彩度の高い配色とダークモードのサポートを備えた、食品/レストランのWebサイト向けのシンプルでエレガントなフィードバックコンポーネント。豪華/プレミアムな感触のために設計されています。
HTMLコード
<section class="py-12 bg-white dark:bg-gray-900 font-sans">
<div class="container mx-auto px-4 max-w-2xl">
<h2 class="text-4xl md:text-5xl font-extrabold text-center text-rose-600 dark:text-rose-400 mb-6 tracking-tight leading-tight">
What Our Guests Say
</h2>
<p class="text-center text-lg text-gray-700 dark:text-gray-300 mb-12 max-w-xl mx-auto">
Hear from those who've savored our culinary delights and experienced our exceptional service.
</p>
<div class="bg-gradient-to-br from-rose-100 to-rose-200 dark:from-rose-900 dark:to-rose-800 p-8 md:p-12 rounded-3xl shadow-xl border border-rose-300 dark:border-rose-700 transform hover:scale-105 transition duration-300 ease-in-out">
<div class="flex items-center justify-center mb-6">
<img src="https://randomuser.me/api/portraits/women/68.jpg" alt="Customer Avatar" class="w-24 h-24 rounded-full border-4 border-rose-500 dark:border-rose-400 object-cover shadow-lg">
</div>
<p class="text-center text-xl md:text-2xl italic text-rose-900 dark:text-rose-100 leading-relaxed mb-6">
"The ambiance was exquisite, and the pasta dish I had was simply divine. A true culinary masterpiece! I've never tasted anything quite like it. Highly recommend for a special occasion."
</p>
<div class="flex justify-center items-center gap-1 mb-6">
<svg class="w-6 h-6 text-rose-500 dark:text-rose-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.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-6 h-6 text-rose-500 dark:text-rose-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.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-6 h-6 text-rose-500 dark:text-rose-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.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-6 h-6 text-rose-500 dark:text-rose-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.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-6 h-6 text-rose-500 dark:text-rose-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.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>
<p class="text-center text-lg font-semibold text-rose-700 dark:text-rose-200">Sophia M.</p>
<p class="text-center text-md text-rose-600 dark:text-rose-300">Frequent Guest</p>
</div>
</div>
</section>関連コンポーネント
スキューモーフィックフィードバックコンポーネント(シンプル、アーストーン)
ダッシュボード用のシンプルなスキューモーフィックフィードバックコンポーネントで、アースカラーを使用し、現実世界の要素を模倣するように設計されています。ダークモードのサポートにより完全にレスポンシブ。
Organic_Nature_Inspired_Food_Feedback_Component
食品/レストランのWebサイト向けの適度な複雑さのフィードバックコンポーネントで、アースカラーのオーガニック/自然にインスパイアされたデザインと、ダークモードのサポートを含む完全な応答性が特徴です。
フィードバックコンポーネント
レスポンシブデザイン、ダークテーマのサポート、JavaScriptなしを特徴とするミニマリストフィードバックコンポーネント。アバター、ユーザーフィードバックテキスト、星で表される評価が含まれます。