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

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

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

미리 보기

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

평가 척도와 댓글을 위한 텍스트 영역을 특징으로 하는 피드백 구성 요소로, 반응형 디자인과 어두운 테마를 지원합니다.

열다

Feedback Components 구성 요소

복잡하고 반응이 빠르며 어두운 테마로 지원되는 피드백 구성 요소 구성 요소는 대시보드에 대해 제공되며, 미니멀리스트/플랫 미학과 파스텔 색상 구성표로 설계되었습니다. Tailwind CSS 클래스와 함께 HTML만 사용하여 진행률 표시줄, 상태 표시기 및 최근 활동과 같은 다양한 피드백 요소를 표시합니다.

열다

Neon_Glow_Feedback_Component

유사한 색 구성표를 사용하여 네온/글로우 미학을 가진 컨설팅/서비스를 위해 설계된 피드백 구성 요소입니다. 기능에는 빛나는 버튼, 미묘한 배경 그라디언트 및 다크 모드 지원이 포함됩니다.

열다