组件 反馈组件 Luxury_Premium_Vibrant_Simple_Food_Restaurant_Feedback_Component

Luxury_Premium_Vibrant_Simple_Food_Restaurant_Feedback_Component

一个简单、优雅的食品/餐厅网站反馈组件,具有充满活力的高饱和度配色方案和深色模式支持。专为奢华/高级感觉而设计。

预览

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>

相关组件

反馈组件

一个为黑暗模式设计的复杂反馈组件,适用于商业/企业网站,采用互补色方案。

打开

反馈组件 23

一个以材料设计风格设计的反馈组件,具有响应动画和深色主题支持,使用 Tailwind CSS 构建。

打开

反馈组件

一个使用材料设计原则设计的响应式反馈组件,融入了大地色调并支持黑暗模式。该组件专为仪表板设计,具有各种互动元素。

打开