CCHub Logo CCHub Tailwind Collection
구성 요소 피드백 구성 요소 Feedback Components 구성 요소

Feedback Components 구성 요소

소셜 미디어를 위한 간단한 Glassmorphism 피드백 구성 요소로, 트라이어딕 색 구성표, 반응형 디자인 및 어두운 테마 지원을 특징으로 합니다. JavaScript가 필요하지 않습니다.

미리 보기

HTML 코드 

<div class="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900 p-4">
  <div class="w-full max-w-sm bg-white dark:bg-gray-800 p-6 rounded-lg shadow-xl bg-opacity-60 dark:bg-opacity-60 glassmorphism-card">
    <h2 class="text-xl font-semibold text-gray-800 dark:text-white mb-4 text-center">Leave Feedback</h2>
    <textarea class="w-full p-3 mb-4 border border-gray-300 dark:border-gray-700 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 dark:text-white dark:bg-gray-700 dark:placeholder-gray-400 bg-white bg-opacity-50 dark:bg-opacity-50 glassmorphism-input" rows="4" placeholder="Your feedback..."></textarea>
    <button class="w-full bg-blue-500 text-white py-2 px-4 rounded-md hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50 transition duration-200 ease-in-out">Submit Feedback</button>
  </div>
</div>

<style>
.glassmorphism-card {
  background-color: rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.dark .glassmorphism-card {
  background-color: rgba(31, 41, 55, 0.6);
}

.glassmorphism-input {
  background-color: rgba(255, 255, 255, 0.5);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
}

.dark .glassmorphism-input {
  background-color: rgba(55, 65, 81, 0.5);
}
</style>

관련 구성 요소

Feedback Components 구성 요소

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

열다

피드백 구성 요소 23

머티리얼 디자인 스타일로 디자인된 피드백 구성 요소로, 반응형 애니메이션과 어두운 테마 지원을 특징으로 하며 Tailwind CSS로 빌드되었습니다.

열다

피드백 구성 요소

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

열다