Give Feedback Using Tailwind UI
A Give Feedback component created with Tailwind offers a convenient and accessible way for users to provide valuable input and suggestions, promoting active engagement and continuous improvement. Inspired design by Ildiko Gaspar from dribbble.
forms
Loading component...
107 lines
<!-- Component Inspired design by Ildiko Gaspar from dribbble https://dribbble.com/shots/16970180-Give-Feedback-UI-Design -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link
href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;0,800;1,200;1,300;1,400;1,500;1,600;1,700;1,800&display=swap"
rel="stylesheet">
<style>
body {
font-family: 'Plus Jakarta Sans', sans-serif;
}
</style>
<div class="h-screen flex flex-col justify-center w-full items-center text-[#090B2E] bg-[#EEEFF9]">
<card class="flex flex-col max-w-xl p-8 mx-auto space-y-8 text-gray-900 bg-white shadow-xl rounded-xl">
<div>
<h1 class="mb-2 text-xl font-semibold ">Give Feedback</h1>
<p class="text-xs font-semibold">
What do you think of the issue search experience whitin Saga project?
</p>
</div>
<ul class="flex justify-center gap-2">
<li
class="w-32 px-4 py-3 text-center border border-[#666E9E] rounded hover:scale-105 hover:border-pink-600 group ">
<svg class="w-8 h-8 mx-auto mb-1" role="img Terrible" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 496 512">
<path fill="currentColor"
d="M248 8C111 8 0 119 0 256s111 248 248 248 248-111 248-248S385 8 248 8zm0 448c-110.3 0-200-89.7-200-200S137.7 56 248 56s200 89.7 200 200-89.7 200-200 200zm0-144c-33.6 0-65.2 14.8-86.8 40.6-8.5 10.2-7.1 25.3 3.1 33.8s25.3 7.2 33.8-3c24.8-29.7 75-29.7 99.8 0 8.1 9.7 23.2 11.9 33.8 3 10.2-8.5 11.5-23.6 3.1-33.8-21.6-25.8-53.2-40.6-86.8-40.6zm-48-72c10.3 0 19.9-6.7 23-17.1 3.8-12.7-3.4-26.1-16.1-29.9l-80-24c-12.8-3.9-26.1 3.4-29.9 16.1-3.8 12.7 3.4 26.1 16.1 29.9l28.2 8.5c-3.1 4.9-5.3 10.4-5.3 16.6 0 17.7 14.3 32 32 32s32-14.4 32-32.1zm199-54.9c-3.8-12.7-17.1-19.9-29.9-16.1l-80 24c-12.7 3.8-19.9 17.2-16.1 29.9 3.1 10.4 12.7 17.1 23 17.1 0 17.7 14.3 32 32 32s32-14.3 32-32c0-6.2-2.2-11.7-5.3-16.6l28.2-8.5c12.7-3.7 19.9-17.1 16.1-29.8z">
</path>
</svg>
<span class="text-xs font-medium text-gray-600 group-hover:text-pink-600">Terrible</span>
</li>
<li
class="px-4 w-32 py-3 border text-center border-[#666E9E] mx-auto rounded hover:scale-105 hover:border-pink-600 group">
<svg class="w-8 h-8 mx-auto mb-1" role="img Bad" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 496 512">
<path fill="currentColor"
d="M248 8C111 8 0 119 0 256s111 248 248 248 248-111 248-248S385 8 248 8zm0 448c-110.3 0-200-89.7-200-200S137.7 56 248 56s200 89.7 200 200-89.7 200-200 200zm-80-216c17.7 0 32-14.3 32-32s-14.3-32-32-32-32 14.3-32 32 14.3 32 32 32zm160-64c-17.7 0-32 14.3-32 32s14.3 32 32 32 32-14.3 32-32-14.3-32-32-32zm-80 128c-40.2 0-78 17.7-103.8 48.6-8.5 10.2-7.1 25.3 3.1 33.8 10.2 8.4 25.3 7.1 33.8-3.1 16.6-19.9 41-31.4 66.9-31.4s50.3 11.4 66.9 31.4c8.1 9.7 23.1 11.9 33.8 3.1 10.2-8.5 11.5-23.6 3.1-33.8C326 321.7 288.2 304 248 304z">
</path>
</svg>
<span class="text-xs font-medium text-gray-600 group-hover:text-pink-600">Bad</span>
</li>
<li
class="w-32 px-4 py-3 text-center border border-[#666E9E] rounded hover:scale-105 hover:border-pink-600 group">
<svg class="w-8 h-8 mx-auto mb-1" role="img Okay" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 496 512">
<path fill="currentColor"
d="M248 8C111 8 0 119 0 256s111 248 248 248 248-111 248-248S385 8 248 8zm0 448c-110.3 0-200-89.7-200-200S137.7 56 248 56s200 89.7 200 200-89.7 200-200 200zm-80-216c17.7 0 32-14.3 32-32s-14.3-32-32-32-32 14.3-32 32 14.3 32 32 32zm160-64c-17.7 0-32 14.3-32 32s14.3 32 32 32 32-14.3 32-32-14.3-32-32-32zm8 144H160c-13.2 0-24 10.8-24 24s10.8 24 24 24h176c13.2 0 24-10.8 24-24s-10.8-24-24-24z">
</path>
</svg>
<span class="text-xs font-medium text-gray-600 group-hover:text-pink-600">Okay</span>
</li>
<li
class="w-32 px-4 py-3 text-center border border-[#666E9E] rounded hover:scale-105 hover:border-pink-600 group">
<svg class="w-8 h-8 mx-auto mb-1" role="img Good" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 496 512">
<path fill="currentColor"
d="M248 8C111 8 0 119 0 256s111 248 248 248 248-111 248-248S385 8 248 8zm0 448c-110.3 0-200-89.7-200-200S137.7 56 248 56s200 89.7 200 200-89.7 200-200 200zm-80-216c17.7 0 32-14.3 32-32s-14.3-32-32-32-32 14.3-32 32 14.3 32 32 32zm160 0c17.7 0 32-14.3 32-32s-14.3-32-32-32-32 14.3-32 32 14.3 32 32 32zm4 72.6c-20.8 25-51.5 39.4-84 39.4s-63.2-14.3-84-39.4c-8.5-10.2-23.7-11.5-33.8-3.1-10.2 8.5-11.5 23.6-3.1 33.8 30 36 74.1 56.6 120.9 56.6s90.9-20.6 120.9-56.6c8.5-10.2 7.1-25.3-3.1-33.8-10.1-8.4-25.3-7.1-33.8 3.1z">
</path>
</svg>
<span class="text-xs font-medium text-gray-600 group-hover:text-pink-600">Good</span>
</li>
<li
class="w-32 px-4 py-3 text-center border border-[#666E9E] rounded hover:scale-105 hover:border-pink-600 group">
<svg class="w-8 h-8 mx-auto mb-1" role="img Amazing" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 496 512">
<path fill="currentColor"
d="M248 8C111 8 0 119 0 256s111 248 248 248 248-111 248-248S385 8 248 8zm0 448c-110.3 0-200-89.7-200-200S137.7 56 248 56s200 89.7 200 200-89.7 200-200 200zm105.6-151.4c-25.9 8.3-64.4 13.1-105.6 13.1s-79.6-4.8-105.6-13.1c-9.8-3.1-19.4 5.3-17.7 15.3 7.9 47.2 71.3 80 123.3 80s115.3-32.9 123.3-80c1.6-9.8-7.7-18.4-17.7-15.3zm-227.9-57.5c-1 6.2 5.4 11 11 7.9l31.3-16.3 31.3 16.3c5.6 3.1 12-1.7 11-7.9l-6-34.9 25.4-24.6c4.5-4.5 1.9-12.2-4.3-13.2l-34.9-5-15.5-31.6c-2.9-5.8-11-5.8-13.9 0l-15.5 31.6-34.9 5c-6.2.9-8.9 8.6-4.3 13.2l25.4 24.6-6.1 34.9zm259.7-72.7l-34.9-5-15.5-31.6c-2.9-5.8-11-5.8-13.9 0l-15.5 31.6-34.9 5c-6.2.9-8.9 8.6-4.3 13.2l25.4 24.6-6 34.9c-1 6.2 5.4 11 11 7.9l31.3-16.3 31.3 16.3c5.6 3.1 12-1.7 11-7.9l-6-34.9 25.4-24.6c4.5-4.6 1.8-12.2-4.4-13.2z">
</path>
</svg>
<span class="text-xs font-medium text-gray-600 group-hover:text-pink-600">Amazing</span>
</li>
</ul>
<div class="">
<p class="text-sm font-semibold transition-all">
What are the main reasons for you rating?
</p>
<textarea
class="w-full p-2 mt-2 text-sm border-2 border-gray-400 rounded-lg outline-none resize-none focus:border-pink-700 placeholder:text-sm"></textarea>
<div class="mt-4">
<div class="flex items-center mb-4">
<input id="default-checkbox" type="checkbox" value=""
class="w-4 h-4 text-pink-600 bg-gray-100 border-gray-300 rounded focus:ring-pink-500 dark:focus:ring-pink-600 dark:ring-offset-gray-800 focus:ring-2">
<label for="default-checkbox" class="ml-2 text-xs font-medium text-gray-900 dark:text-gray-300">I may be
contacted about this feedback. <span
class="font-bold text-pink-600 cursor-pointer hover:text-pink-500">Privacy Policy</span></label>
</div>
<div class="flex items-center">
<input checked id="checked-checkbox" type="checkbox" value=""
class="w-4 h-4 text-pink-600 bg-gray-100 border-gray-300 rounded focus:ring-pink-500 dark:focus:ring-pink-600 dark:ring-offset-gray-800 focus:ring-2">
<label for="checked-checkbox" class="ml-2 text-xs font-medium text-gray-900 dark:text-gray-300">I'd like to
help improve by joining the <span
class="font-bold text-pink-600 cursor-pointer hover:text-pink-500">Reasearch Group</span>.</label>
</div>
</div>
<div class="flex justify-end mt-6 space-x-4">
<button
class="px-6 py-2.5 bg-pink-600 text-sm font-medium text-white rounded-lg transition-all cursor-pointer hover:bg-pink-900">
Submit
</button>
<button class="px-6 py-2.5 text-sm font-medium text-gray-600 transition-all cursor-pointer hover:text-pink-400">
Cancel
</button>
</div>
</div>
</card>
</div>