구성 요소 피드백 구성 요소 브루탈리스트 피드백 컴포넌트

브루탈리스트 피드백 컴포넌트

높은 대비와 대담한 타이포그래피를 가진 브루탈리즘 피드백 구성 요소입니다.

미리 보기

HTML 코드

<div class="bg-zinc-900 text-lime-400 p-8 max-w-sm mx-auto rounded-none shadow-xl">
  <div class="flex justify-between items-start mb-4">
    <h3 class="text-2xl font-bold uppercase">Feedback</h3>
    <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-lime-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 12h.01M12 12h.01M19 12h.01M6 12a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0z" />
    </svg>
  </div>
  <p class="text-sm mb-6">
    "This product is loud and in your face, exactly what I needed. No-nonsense and it gets the job done with aggressive efficiency."
  </p>
  <div class="flex items-center">
    <img src="https://randomuser.me/api/portraits/men/75.jpg" alt="User Avatar" class="w-10 h-10 rounded-full border-2 border-lime-400 mr-4">
    <div>
      <p class="text-sm font-bold uppercase">Alex "The Brutal" Johnson</p>
      <p class="text-xs text-lime-400">CEO of Concrete Solutions</p>
    </div>
  </div>
</div>

<!-- Dark Mode -->
<div class="dark bg-lime-400 text-zinc-900 p-8 max-w-sm mx-auto rounded-none shadow-xl mt-8">
  <div class="flex justify-between items-start mb-4">
    <h3 class="text-2xl font-bold uppercase">Feedback</h3>
    <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-zinc-900" fill="none" viewBox="0 0 24 24" stroke="currentColor">
      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 12h.01M12 12h.01M19 12h.01M6 12a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0z" />
    </svg>
  </div>
  <p class="text-sm mb-6">
    "This product is loud and in your face, exactly what I needed. No-nonsense and it gets the job done with aggressive efficiency."
  </p>
  <div class="flex items-center">
    <img src="https://randomuser.me/api/portraits/men/75.jpg" alt="User Avatar" class="w-10 h-10 rounded-full border-2 border-zinc-900 mr-4">
    <div>
      <p class="text-sm font-bold uppercase">Alex "The Brutal" Johnson</p>
      <p class="text-xs text-zinc-900">CEO of Concrete Solutions</p>
    </div>
  </div>
</div>

관련 구성 요소

Feedback Components 구성 요소

전자 상거래를 위해 설계된 미니멀한 피드백 구성 요소로, 부드러운 파스텔 색상, 반응형 디자인 및 어두운 테마 지원을 특징으로 합니다. 구성 요소에는 입력 필드가 있는 피드백 양식, 등급 시스템 및 제출 버튼이 포함되어 있으며 모두 Tailwind CSS로 스타일이 지정되었습니다.

열다

피드백 구성 요소

매력적인 애니메이션과 마이크로 상호 작용을 통합하는 반응형 피드백 구성 요소입니다. 다크 모드를 지원하도록 설계되었으며 자리 표시자 이미지 및 아바타와 함께 사용자 피드백을 위한 요소를 제공합니다.

열다

피드백 구성 요소

생생한 색상의 다크 모드를 위해 설계된 반응형 피드백 구성 요소로, 블로그 및 콘텐츠 소비에 이상적입니다.

열다