Feedback Components

Feedback Components Component

A brutalist-style feedback component with a pastel color scheme, moderate complexity, and responsive design with dark theme support. Designed for a portfolio to showcase feedback or testimonials.

Open Preview

                <div class="min-h-screen bg-pink-100 dark:bg-stone-900 p-8 flex items-center justify-center">
  <div class="max-w-4xl w-full bg-white dark:bg-stone-800 shadow-brutalist border-4 border-stone-900 dark:border-pink-500 p-8 md:p-12 relative">
    <h2 class="text-3xl md:text-5xl font-extrabold text-stone-900 dark:text-pink-100 mb-8 border-b-4 border-stone-900 dark:border-pink-500 pb-4 inline-block">
      Client Testimonials
    </h2>
    
    <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
      <!-- Testimonial 1 -->
      <div class="bg-pink-200 dark:bg-stone-700 p-6 border-4 border-stone-900 dark:border-pink-500 relative group">
        <p class="text-stone-800 dark:text-pink-200 text-lg mb-4 italic leading-relaxed">
          "Working with [Your Name] was an absolute game-changer for my project. Their unique vision and relentless dedication brought my ideas to life in ways I hadn

Minimalist/Flat Design Feedback Component for Dashboard with Complementary Color Scheme and Moderate Complexity, Responsive and Dark Theme Support. Uses HTML and Tailwind CSS. No JavaScript. Features interactive elements. Images from picsum.photos and avatars from randomuser.me.

Open Preview

                <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6">
  <div class="flex items-center justify-between mb-4">
    <h2 class="text-lg font-semibold text-gray-800 dark:text-white">User Feedback</h2>
    <span class="text-sm text-gray-500 dark:text-gray-400">Last 30 days</span>
  </div>
  <div class="space-y-4">
    <div class="flex items-start space-x-4">
      <img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar">
      <div class="flex-1">
        <div class="flex items-center justify-between">
          <h4 class="text-sm font-medium text-gray-900 dark:text-white">John Doe</h4>
          <span class="text-xs text-gray-500 dark:text-gray-400">2 days ago</span>
        </div>
        <p class="text-sm text-gray-600 dark:text-gray-300">This dashboard is very helpful. The data is presented clearly.</p>
      </div>
    </div>
    <div class="flex items-start space-x-4">
      <img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/women/44.jpg" alt="User Avatar">
      <div class="flex-1">
        <div class="flex items-center justify-between">
          <h4 class="text-sm font-medium text-gray-900 dark:text-white">Jane Smith</h4>
          <span class="text-xs text-gray-500 dark:text-gray-400">5 days ago</span>
        </div>
        <p class="text-sm text-gray-600 dark:text-gray-300">I love the new features! Especially the real-time updates.</p>
      </div>
    </div>
    <div class="flex items-start space-x-4">
      <img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/men/19.jpg" alt="User Avatar">
      <div class="flex-1">
        <div class="flex items-center justify-between">
          <h4 class="text-sm font-medium text-gray-900 dark:text-white">Peter Jones</h4>
          <span class="text-xs text-gray-500 dark:text-gray-400">1 week ago</span>
        </div>
        <p class="text-sm text-gray-600 dark:text-gray-300">Could you add an option to export data as a CSV file?</p>
      </div>
    </div>
  </div>
  <div class="mt-6 flex justify-center">
    <button class="px-4 py-2 bg-indigo-600 text-white text-sm font-medium rounded-md hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 dark:bg-indigo-700 dark:hover:bg-indigo-600 dark:focus:ring-offset-gray-800">View All Feedback</button>
  </div>
</div>

Feedback Components Component

A minimalist feedback component designed for e-commerce, featuring soft pastel colors, responsive design, and dark theme support. The component includes a feedback form with input fields, a rating system, and a submit button, all styled with Tailwind CSS.

Open Preview

                <div class="max-w-md mx-auto p-6 bg-white rounded-lg shadow-md dark:bg-gray-800">
    <h2 class="text-2xl font-semibold text-gray-800 dark:text-gray-200 mb-4">Your Feedback Matters!</h2>
    <p class="text-gray-600 dark:text-gray-400 mb-6">We value your opinion. Please leave your feedback below!</p>
    <form class="space-y-4">
        <div>
            <label class="block text-sm font-medium text-gray-700 dark:text-gray-300" for="name">Name</label>
            <input id="name" type="text" placeholder="Your Name" class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-pink-500 dark:bg-gray-700 dark:border-gray-600 dark:text-gray-200" required />
        </div>
        <div>
            <label class="block text-sm font-medium text-gray-700 dark:text-gray-300" for="email">Email</label>
            <input id="email" type="email" placeholder="Your Email" class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-pink-500 dark:bg-gray-700 dark:border-gray-600 dark:text-gray-200" required />
        </div>
        <div>
            <label class="block text-sm font-medium text-gray-700 dark:text-gray-300" for="rating">Rating</label>
            <select id="rating" class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-pink-500 dark:bg-gray-700 dark:border-gray-600 dark:text-gray-200" required>
                <option value="5">⭐⭐⭐⭐⭐</option>
                <option value="4">⭐⭐⭐⭐</option>
                <option value="3">⭐⭐⭐</option>
                <option value="2">⭐⭐</option>
                <option value="1">⭐</option>
            </select>
        </div>
        <div>
            <label class="block text-sm font-medium text-gray-700 dark:text-gray-300" for="message">Message</label>
            <textarea id="message" rows="4" placeholder="Your Feedback" class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-pink-500 dark:bg-gray-700 dark:border-gray-600 dark:text-gray-200" required></textarea>
        </div>
        <div>
            <button type="submit" class="w-full py-2 px-4 bg-pink-500 text-white font-semibold rounded-md shadow-md hover:bg-pink-600 focus:outline-none focus:ring-2 focus:ring-pink-500 dark:bg-pink-600 dark:hover:bg-pink-700">Submit Feedback</button>
        </div>
    </form>
    <div class="mt-6 flex items-center space-x-2">
        <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="h-10 w-10 rounded-full">
        <span class="text-gray-600 dark:text-gray-400">John Doe</span>
    </div>

    <div class="mt-4 text-sm text-gray-500 dark:text-gray-400">
        <p>Feedback received on: <span class="text-gray-800 dark:text-gray-200">10/23/2023</span></p>
    </div>
</div>

Feedback Component

Skeuomorphism-inspired feedback component featuring an analogous color scheme for a dashboard. Designed to be simple, responsive, and supports dark mode using Tailwind CSS. Utilizes shadcn/ui for enhanced styling and components.

Open Preview

                <div class="bg-gray-200 dark:bg-gray-800 p-6 rounded-lg shadow-xl">
  <div class="flex items-center mb-4">
    <img class="w-12 h-12 rounded-full mr-4" src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar">
    <div>
      <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">John Doe</h3>
      <p class="text-sm text-gray-600 dark:text-gray-400">Financial Analyst</p>
    </div>
  </div>
  <p class="text-gray-700 dark:text-gray-300 mb-4">
    The new dashboard features are excellent! The data visualization is clear and concisely presented, making it much easier to track key metrics. The performance has also improved significantly.
  </p>
  <div class="flex items-center text-yellow-500">
    <svg class="w-5 h-5 mr-1" fill="currentColor" viewBox="0 0 20 20">
      <path d="M10 15l-5.878 3.09 1.123-6.545L.489 6.309l6.572-.955L10 0l2.939 5.354 6.572.955-4.756 4.936 1.123 6.545z"/>
    </svg>
    <span>4.5</span>
  </div>
</div>

Feedback Components Component

Simple Glassmorphism feedback component for social media, featuring a triadic color scheme, responsive design, and dark theme support. No JavaScript required.

Open Preview

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

A responsive feedback component designed for dark mode with vibrant colors, ideal for blog and content consumption.

Open Preview

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

Feedback Component

A responsive feedback component designed for social networking interfaces, incorporating 3D design elements in a grayscale color scheme with dark mode support, tailored for medium complexity and interactivity.

Open Preview

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

Feedback Component

A feedback component designed for social media interfaces, incorporating microinteractions and a grayscale color scheme, with dark theme support.

Open Preview

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

A complex feedback component designed for business/corporate websites in dark mode, utilizing a complementary color scheme.

Open Preview

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

Feedback Component

A responsive feedback component designed with Material Design principles, incorporating earth tones and equipped for dark mode support. This component is specifically designed for dashboards and features various interactive elements.

Open Preview

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

Categories

Feedback Components