검색 구성 요소

카테고리

구성 요소 피드백 구성 요소

피드백 구성 요소

사용자 피드백 및 알림을 제공하는 구성 요소

Feedback Components 구성 요소

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

                <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>

피드백 구성 요소

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

열다 미리 보기

                <div class="max-w-3xl mx-auto p-6 bg-gray-800 dark:bg-gray-900 rounded-lg shadow-lg">
    <h2 class="text-2xl font-bold text-white mb-4">Feedback</h2>
    <div class="mb-4">
        <textarea class="w-full p-3 bg-gray-700 dark:bg-gray-800 text-white rounded-lg focus:outline-none focus:ring-2 focus:ring-violet-500" rows="4" placeholder="Leave your feedback here..."></textarea>
    </div>
    <div class="flex items-center mb-6">
        <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-3">
        <span class="text-white font-medium">John Doe</span>
    </div>
    <div class="flex justify-between">
        <button class="px-4 py-2 bg-violet-600 hover:bg-violet-500 text-white font-semibold rounded-lg focus:outline-none focus:ring-2 focus:ring-violet-500">Submit</button>
        <button class="px-4 py-2 bg-gray-600 hover:bg-gray-500 text-white font-semibold rounded-lg focus:outline-none focus:ring-2 focus:ring-gray-500">Cancel</button>
    </div>
</div>

<div class="max-w-3xl mx-auto mt-8 p-6 bg-gray-800 dark:bg-gray-900 rounded-lg shadow-lg">
    <h3 class="text-xl font-bold text-white mb-4">Previous Feedback</h3>
    <div class="flex items-start mb-4">
        <img src="https://randomuser.me/api/portraits/women/2.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-3">
        <div class="flex-1">
            <p class="text-white">Amazing content! I loved the insights shared in this article.</p>
            <span class="text-gray-400 text-sm">Posted on Nov 12, 2023</span>
        </div>
    </div>
    <div class="flex items-start mb-4">
        <img src="https://randomuser.me/api/portraits/men/3.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-3">
        <div class="flex-1">
            <p class="text-white">Great reading experience. Looking forward to more articles!</p>
            <span class="text-gray-400 text-sm">Posted on Nov 11, 2023</span>
        </div>
    </div>
</div>

피드백 구성 요소

소셜 네트워킹 인터페이스용으로 설계된 반응형 피드백 구성 요소로, 다크 모드를 지원하는 그레이스케일 색 구성표에 3D 디자인 요소를 통합하고 중간 정도의 복잡성과 상호 작용에 맞게 조정되었습니다.

열다 미리 보기

                <div class="max-w-md mx-auto p-4 bg-gray-100 dark:bg-gray-800 rounded-lg shadow-lg transform hover:shadow-2xl transition-shadow duration-300">
    <div class="flex items-start mb-4">
        <img src="https://randomuser.me/api/portraits/thumb/men/1.jpg" alt="User Avatar" class="w-12 h-12 rounded-full shadow-md">
        <div class="ml-4">
            <h2 class="text-lg font-semibold text-gray-800 dark:text-gray-200">User Name</h2>
            <p class="text-gray-600 dark:text-gray-300">April 10, 2023</p>
        </div>
    </div>
    <p class="text-gray-700 dark:text-gray-300 mb-4">
        This is an example feedback message where users can share their thoughts about the platform and engage with the community.
    </p>
    <div class="flex justify-between items-center">
        <button class="px-4 py-2 bg-gray-200 dark:bg-gray-700 text-gray-800 dark:text-gray-100 rounded-md shadow hover:bg-gray-300 dark:hover:bg-gray-600 focus:outline-none">Like</button>
        <button class="px-4 py-2 bg-gray-200 dark:bg-gray-700 text-gray-800 dark:text-gray-100 rounded-md shadow hover:bg-gray-300 dark:hover:bg-gray-600 focus:outline-none">Reply</button>
    </div>
</div>
<div class="max-w-md mx-auto mt-4 p-4 bg-gray-100 dark:bg-gray-800 rounded-lg shadow-lg transform hover:shadow-2xl transition-shadow duration-300">
    <div class="flex items-start mb-4">
        <img src="https://randomuser.me/api/portraits/thumb/women/2.jpg" alt="User Avatar" class="w-12 h-12 rounded-full shadow-md">
        <div class="ml-4">
            <h2 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Another User</h2>
            <p class="text-gray-600 dark:text-gray-300">April 11, 2023</p>
        </div>
    </div>
    <p class="text-gray-700 dark:text-gray-300 mb-4">
        Feedback is important to shape the experience in a positive direction and enhance user engagement within the social platform.
    </p>
    <div class="flex justify-between items-center">
        <button class="px-4 py-2 bg-gray-200 dark:bg-gray-700 text-gray-800 dark:text-gray-100 rounded-md shadow hover:bg-gray-300 dark:hover:bg-gray-600 focus:outline-none">Like</button>
        <button class="px-4 py-2 bg-gray-200 dark:bg-gray-700 text-gray-800 dark:text-gray-100 rounded-md shadow hover:bg-gray-300 dark:hover:bg-gray-600 focus:outline-none">Reply</button>
    </div>
</div>

피드백 구성 요소

소셜 미디어 인터페이스를 위해 설계된 피드백 구성 요소로, 마이크로 인터랙션과 회색조 색 구성표를 통합하고 어두운 테마를 지원합니다.

열다 미리 보기

                <div class="p-4 bg-white dark:bg-gray-800 rounded-lg shadow-md transition-transform transform hover:scale-105">
    <div class="flex items-center mb-4">
        <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-12 h-12 rounded-full mr-3">
        <div>
            <p class="font-semibold text-gray-900 dark:text-gray-100">John Doe</p>
            <p class="text-gray-600 dark:text-gray-400 text-sm">2 hours ago</p>
        </div>
    </div>
    <p class="text-gray-800 dark:text-gray-200 mb-4">This is a feedback message that users can read and respond to. It’s engaging and has small animations to enhance interaction.</p>
    <div class="flex space-x-4">
        <button class="text-blue-500 dark:text-blue-300 hover:underline transition-all duration-300">Like</button>
        <button class="text-gray-600 dark:text-gray-400 hover:text-gray-800 dark:hover:text-gray-200 transition-all duration-300">Reply</button>
        <button class="text-red-500 dark:text-red-300 hover:underline transition-all duration-300">Report</button>
    </div>
</div>

<div class="p-4 bg-gray-200 dark:bg-gray-700 rounded-lg shadow-md mt-6">
    <h2 class="font-semibold text-gray-800 dark:text-gray-200 mb-2">Leave a Comment:</h2>
    <textarea class="w-full h-24 p-2 rounded-lg border border-gray-300 dark:border-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-300 transition-all duration-300" placeholder="Write your comment..." required></textarea>
    <div class="flex justify-end mt-2">
        <button class="bg-blue-600 dark:bg-blue-500 text-white rounded-lg px-4 py-2 transition-all duration-300 hover:bg-blue-700 dark:hover:bg-blue-400">Submit</button>
    </div>
</div>

<div class="flex justify-center mt-4">
    <img src="https://picsum.photos/300/200?random=1" alt="Random Image" class="rounded-lg shadow-lg">
</div>

피드백 구성 요소

어두운 모드의 비즈니스/기업 웹 사이트를 위해 설계된 복잡한 피드백 구성 요소로, 보색 구성표를 사용합니다.

열다 미리 보기

                <div class="bg-gray-900 p-6 rounded-lg shadow-md dark:bg-gray-800">
    <h2 class="text-2xl font-bold text-white mb-4">Feedback Component</h2>
    <form class="space-y-4">
        <div>
            <label for="name" class="block text-gray-300 dark:text-gray-200">Name</label>
            <input type="text" id="name" class="mt-1 p-2 w-full rounded-md border border-gray-700 bg-gray-800 text-gray-200 dark:bg-gray-900 dark:border-gray-600" placeholder="Your Name" required />
        </div>
        <div>
            <label for="email" class="block text-gray-300 dark:text-gray-200">Email</label>
            <input type="email" id="email" class="mt-1 p-2 w-full rounded-md border border-gray-700 bg-gray-800 text-gray-200 dark:bg-gray-900 dark:border-gray-600" placeholder="Your Email" required />
        </div>
        <div>
            <label for="feedback" class="block text-gray-300 dark:text-gray-200">Feedback</label>
            <textarea id="feedback" rows="4" class="mt-1 p-2 w-full rounded-md border border-gray-700 bg-gray-800 text-gray-200 dark:bg-gray-900 dark:border-gray-600" placeholder="Your Feedback" required></textarea>
        </div>
        <div class="flex items-center mb-4">
            <input type="checkbox" id="subscribe" class="h-4 w-4 text-teal-500 border-gray-700 rounded dark:bg-gray-900 dark:border-gray-600" />
            <label for="subscribe" class="ml-2 text-gray-300 dark:text-gray-200">Subscribe to our newsletter</label>
        </div>
        <button type="submit" class="w-full bg-teal-600 hover:bg-teal-500 rounded-md text-white font-semibold py-2 transition duration-200 ease-in-out">Submit</button>
    </form>
    <div class="mt-6">
        <h3 class="text-lg font-semibold text-gray-400 dark:text-gray-300">Recent Feedback</h3>
        <div class="mt-2 bg-gray-800 p-4 rounded-md shadow-md dark:bg-gray-700">
            <div class="flex items-center mb-2">
                <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="h-10 w-10 rounded-full mr-3" />
                <div>
                    <p class="text-gray-200 dark:text-gray-100 font-bold">John Doe</p>
                    <p class="text-gray-300 dark:text-gray-400">Great service! Highly recommend.</p>
                </div>
            </div>
            <div class="flex items-center mb-2">
                <img src="https://randomuser.me/api/portraits/women/1.jpg" alt="User Avatar" class="h-10 w-10 rounded-full mr-3" />
                <div>
                    <p class="text-gray-200 dark:text-gray-100 font-bold">Jane Smith</p>
                    <p class="text-gray-300 dark:text-gray-400">Loved the experience, will come back!</p>
                </div>
            </div>
        </div>
    </div>
</div>

피드백 구성 요소

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

열다 미리 보기

                <div class="max-w-4xl mx-auto p-6 bg-white dark:bg-gray-800 rounded-lg shadow-lg">
    <h2 class="text-2xl font-bold text-gray-800 dark:text-gray-100 mb-4">User Feedback</h2>
    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
        <!-- Feedback Item -->
        <div class="bg-gray-100 dark:bg-gray-700 p-4 rounded-lg shadow-md">
            <div class="flex items-center mb-3">
                <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-12 h-12 rounded-full mr-3" />
                <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">John Doe</h3>
            </div>
            <p class="text-gray-600 dark:text-gray-300">"The new dashboard layout is intuitive and allows for quick access to data. I really appreciate the improvements!"</p>
            <div class="mt-2">
                <span class="text-sm font-medium text-gray-500 dark:text-gray-400">Rating: </span>
                <span class="text-yellow-500 font-bold">⭐⭐⭐⭐⭐</span>
            </div>
        </div>
        <!-- Feedback Item -->
        <div class="bg-gray-100 dark:bg-gray-700 p-4 rounded-lg shadow-md">
            <div class="flex items-center mb-3">
                <img src="https://randomuser.me/api/portraits/women/2.jpg" alt="User Avatar" class="w-12 h-12 rounded-full mr-3" />
                <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Jane Smith</h3>
            </div>
            <p class="text-gray-600 dark:text-gray-300">"Great features! However, I would like to see more customization options for the charts."</p>
            <div class="mt-2">
                <span class="text-sm font-medium text-gray-500 dark:text-gray-400">Rating: </span>
                <span class="text-yellow-500 font-bold">⭐⭐⭐⭐</span>
            </div>
        </div>
    </div>
    <div class="mt-6">
        <textarea class="w-full p-3 border border-gray-300 dark:border-gray-600 rounded-lg focus:outline-none focus:ring focus:ring-gray-300 dark:focus:ring-gray-500" rows="4" placeholder="Leave your feedback here..."></textarea>
    </div>
    <button class="mt-4 bg-green-500 hover:bg-green-600 dark:bg-green-700 dark:hover:bg-green-600 text-white font-semibold py-2 px-4 rounded-lg transition duration-200">Submit Feedback</button>
</div>

Feedback Components 구성 요소

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

열다 미리 보기

                <div class="container mx-auto p-4 md:p-8 bg-gray-100 dark:bg-gray-800 shadow-lg rounded-lg">
  <h2 class="text-2xl font-bold text-gray-800 dark:text-white mb-4">Leave Feedback</h2>
  <div class="mb-4">
    <label class="block text-gray-700 dark:text-gray-300 text-sm font-bold mb-2" for="rating">
      Overall Rating
    </label>
    <div class="flex items-center">
      <input type="radio" name="rating" id="rating-5" class="hidden" value="5" />
      <label for="rating-5" class="text-3xl text-gray-400 dark:text-gray-600 cursor-pointer select-none hover:text-yellow-500 dark:hover:text-yellow-500 transition-colors duration-200">★</label>
      <input type="radio" name="rating" id="rating-4" class="hidden" value="4" />
      <label for="rating-4" class="text-3xl text-gray-400 dark:text-gray-600 cursor-pointer select-none hover:text-yellow-500 dark:hover:text-yellow-500 transition-colors duration-200">★</label>
      <input type="radio" name="rating" id="rating-3" class="hidden" value="3" />
      <label for="rating-3" class="text-3xl text-gray-400 dark:text-gray-600 cursor-pointer select-none hover:text-yellow-500 dark:hover:text-yellow-500 transition-colors duration-200">★</label>
      <input type="radio" name="rating" id="rating-2" class="hidden" value="2" />
      <label for="rating-2" class="text-3xl text-gray-400 dark:text-gray-600 cursor-pointer select-none hover:text-yellow-500 dark:hover:text-yellow-500 transition-colors duration-200">★</label>
      <input type="radio" name="rating" id="rating-1" class="hidden" value="1" />
      <label for="rating-1" class="text-3xl text-gray-400 dark:text-gray-600 cursor-pointer select-none hover:text-yellow-500 dark:hover:text-yellow-500 transition-colors duration-200">★</label>
    </div>
  </div>
  <div class="mb-4">
    <label class="block text-gray-700 dark:text-gray-300 text-sm font-bold mb-2" for="comment">
      Your Feedback
    </label>
    <textarea id="comment" name="comment" rows="4" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 dark:text-gray-200 leading-tight focus:outline-none focus:shadow-outline bg-white dark:bg-gray-700 dark:border-gray-600" placeholder="Tell us about your experience..."></textarea>
  </div>
  <div class="flex items-center justify-between">
    <button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline dark:bg-blue-700 dark:hover:bg-blue-900" type="button">
      Submit Feedback
    </button>
  </div>
</div>

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

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

열다 미리 보기

                <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>

피드백 구성 요소

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

열다 미리 보기

                <div class="flex flex-col items-center p-5 bg-white dark:bg-gray-800 rounded-lg shadow-lg">
  <h2 class="text-lg font-semibold dark:text-white mb-4">We Value Your Feedback!</h2>
  <div class="flex items-center mb-4">
    <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-12 h-12 rounded-full shadow-md">
    <textarea class="ml-3 w-full h-24 p-2 border border-gray-300 dark:border-gray-600 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400 transition-shadow duration-200 ease-in-out" placeholder="Share your thoughts..."></textarea>
  </div>
  <div class="flex justify-between w-full">
    <button class="bg-blue-600 text-white font-semibold py-2 px-4 rounded-md transition-transform transform hover:scale-105 duration-200 ease-in-out">Submit</button>
    <button class="bg-gray-300 text-gray-700 font-semibold py-2 px-4 rounded-md hover:bg-gray-400 transition-colors duration-200 ease-in-out dark:bg-gray-700 dark:text-white dark:hover:bg-gray-600">Cancel</button>
  </div>
  <p class="text-sm text-gray-500 dark:text-gray-400 mt-3">Your feedback helps us improve!</p>
</div>

피드백 구성 요소

반응형 디자인, 어두운 테마 지원 및 JavaScript 없음을 특징으로 하는 미니멀리스트 피드백 구성 요소입니다. 여기에는 아바타, 사용자 피드백 텍스트 및 별표로 표시되는 등급이 포함됩니다.

열다 미리 보기

                <div class="max-w-md mx-auto p-6 bg-white rounded-lg shadow-md dark:bg-gray-800 transition-shadow duration-300 ease-in-out">
    <div class="flex items-center mb-4">
        <img class="w-12 h-12 rounded-full" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar">
        <div class="ml-4">
            <h2 class="text-lg font-semibold text-gray-800 dark:text-white">John Doe</h2>
            <span class="text-gray-500 dark:text-gray-400 text-sm">2 hours ago</span>
        </div>
    </div>
    <div class="mb-4">
        <div class="flex items-center">
            <span class="text-yellow-500">
                📍📍📍📍📍
            </span>
            <span class="text-gray-500 dark:text-gray-400 ml-2">Rating: 4.5/5</span>
        </div>
    </div>
    <p class="text-gray-700 dark:text-gray-300">
        This is a sample feedback message from the user. It highlights the positive aspects and any areas for improvement.
    </p>
    <div class="mt-4">
        <img class="rounded-md" src="https://picsum.photos/400/200" alt="Feedback Image">
    </div>
</div>