구성 요소 피드백 구성 요소 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>

관련 구성 요소

피드백 구성 요소

머티리얼 디자인 원칙에 따라 설계된 반응형 피드백 구성 요소로, 흙색을 통합하고 다크 모드를 지원합니다. 이 구성 요소는 대시보드용으로 특별히 설계되었으며 다양한 대화형 요소를 제공합니다.

열다

Feedback Components 구성 요소

그레이스케일 색상, 다크 모드 지원 및 반응형 디자인을 갖춘 간단한 브루탈리스트 피드백 구성 요소입니다.

열다

Feedback Components 구성 요소

파스텔 색조, 적당한 복잡성, 어두운 테마를 지원하는 반응형 디자인을 갖춘 브루탈리즘 스타일의 피드백 구성 요소입니다. 피드백 또는 추천을 보여줄 수 있는 포트폴리오를 위해 설계되었습니다.

열다