Feedback-Survey

/r/n <script>\r\n tailwind.config = {\r\n theme: {\r\n extend: {\r\n colors: {\r\n 'heart': '#ef4444',\r\n }\r\n }\r\n }\r\n }\r\n <\/script>\r\n <style>\r\n .heart-rating input[type=\"radio\"] {\r\n display: none;\r\n }\r\n\r\n .heart-rating label {\r\n cursor: pointer;\r\n font-size: 2rem;\r\n }\r\n\r\n .heart-rating input[type=\"radio\"]:checked + label {\r\n color: var(--tw-color-heart);\r\n }\r\n <\/style>\r\n\r\n<body class=\"bg-gray-100 flex items-center justify-center h-screen\">\r\n <div class=\"bg-white rounded-lg shadow-lg p-8 w-96\">\r\n <div class=\"flex justify-between items-center mb-4\">\r\n <h2 class=\"text-lg font-semibold\">Emotional Feedback Survey<\/h2>\r\n <button>×<\/button>\r\n <\/div>\r\n <p class=\"text-sm text-gray-600 mb-6\">Give feedback on your emotional status.<\/p>\r\n <div class=\"mb-4\">\r\n <h3 class=\"font-semibold mb-2\">Your Rating<\/h3>\r\n <div class=\"heart-rating flex\">\r\n <input type=\"radio\" id=\"heart1\" name=\"rating\" value=\"1\">\r\n <label for=\"heart1\">❤<\/label>\r\n <input type=\"radio\" id=\"heart2\" name=\"rating\" value=\"2\">\r\n <label for=\"heart2\">❤<\/label>\r\n <input type=\"radio\" id=\"heart3\" name=\"rating\" value=\"3\">\r\n <label for=\"heart3\">❤<\/label>\r\n <input type=\"radio\" id=\"heart4\" name=\"rating\" value=\"4\">\r\n <label for=\"heart4\">❤<\/label>\r\n <input type=\"radio\" id=\"heart5\" name=\"rating\" value=\"5\">\r\n <label for=\"heart5\">❤<\/label>\r\n <\/div>\r\n <\/div>\r\n <div class=\"mb-4\">\r\n <label for=\"feeling\" class=\"font-semibold mb-2 block\">How do you feel today? (Optional)<\/label>\r\n <input type=\"text\" id=\"feeling\" placeholder=\"Sleepy\" class=\"border rounded px-4 py-2 w-full\">\r\n <\/div>\r\n <div class=\"mb-6\">\r\n <label for=\"support\" class=\"font-semibold mb-2 block\">What can we do for you? (Optional)<\/label>\r\n <textarea id=\"support\" placeholder=\"Due to the health issues I've been going through, I am lacking sleep and feeling exhausted.\" class=\"border rounded px-4 py-2 w-full h-24\"><\/textarea>\r\n <\/div>\r\n <div class=\"flex justify-between items-center\">\r\n <button class=\"border rounded px-4 py-2 text-gray-600\">Cancel<\/button>\r\n <button class=\"bg-blue-500 text-white rounded px-4 py-2\">Submit<\/button>\r\n <\/div>\r\n <\/div>\r\n<\/body>\r\n<\/html>","author_type":"App\\User","author_id":15504,"collection_id":null,"fork_id":null,"votes":0,"score":"0.0","visits":1611,"popularity":45,"slug":"feedback-survey","approved":1,"created_at":"2023-11-27T00:00:00.000000Z","updated_at":"2024-09-19T02:25:02.000000Z","downloads":15,"code_views":164,"center":true,"notified":0,"premium":0,"tailwind_config":null,"type":"component","css":"https:\/\/cdn.tailwindcss.com","should_tweet":0,"media":[{"id":10894,"model_type":"App\\Component","model_id":5815,"collection_name":"preview","name":"temp88955","file_name":"temp88955.png","mime_type":"image\/png","disk":"public","size":56082,"manipulations":[],"custom_properties":[],"responsive_images":{"media_library_original":{"urls":["temp88955___media_library_original_1280_957.png","temp88955___media_library_original_1070_800.png","temp88955___media_library_original_895_669.png","temp88955___media_library_original_749_560.png","temp88955___media_library_original_627_469.png"],"base64svg":"data:image\/svg+xml;base64,PCFET0NUWVBFIHN2ZyBQVUJMSUMgIi0vL1czQy8vRFREIFNWRyAxLjEvL0VOIiAiaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkIj4KPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHhtbDpzcGFjZT0icHJlc2VydmUiIHg9IjAiCiB5PSIwIiB2aWV3Qm94PSIwIDAgMTI4MCA5NTciPgoJPGltYWdlIHdpZHRoPSIxMjgwIiBoZWlnaHQ9Ijk1NyIgeGxpbms6aHJlZj0iZGF0YTppbWFnZS9qcGVnO2Jhc2U2NCwvOWovNEFBUVNrWkpSZ0FCQVFFQVlBQmdBQUQvL2dBN1ExSkZRVlJQVWpvZ1oyUXRhbkJsWnlCMk1TNHdJQ2gxYzJsdVp5QkpTa2NnU2xCRlJ5QjJPREFwTENCeGRXRnNhWFI1SUQwZ09UQUsvOXNBUXdBREFnSURBZ0lEQXdNREJBTURCQVVJQlFVRUJBVUtCd2NHQ0F3S0RBd0xDZ3NMRFE0U0VBME9FUTRMQ3hBV0VCRVRGQlVWRlF3UEZ4Z1dGQmdTRkJVVS85c0FRd0VEQkFRRkJBVUpCUVVKRkEwTERSUVVGQlFVRkJRVUZCUVVGQlFVRkJRVUZCUVVGQlFVRkJRVUZCUVVGQlFVRkJRVUZCUVVGQlFVRkJRVUZCUVVGQlFVLzhBQUVRZ0FHQUFnQXdFUkFBSVJBUU1SQWYvRUFCOEFBQUVGQVFFQkFRRUJBQUFBQUFBQUFBQUJBZ01FQlFZSENBa0tDLy9FQUxVUUFBSUJBd01DQkFNRkJRUUVBQUFCZlFFQ0F3QUVFUVVTSVRGQkJoTlJZUWNpY1JReWdaR2hDQ05Dc2NFVlV0SHdKRE5pY29JSkNoWVhHQmthSlNZbktDa3FORFUyTnpnNU9rTkVSVVpIU0VsS1UxUlZWbGRZV1ZwalpHVm1aMmhwYW5OMGRYWjNlSGw2ZzRTRmhvZUlpWXFTazVTVmxwZVltWnFpbzZTbHBxZW9xYXF5czdTMXRyZTR1YnJDdzhURnhzZkl5Y3JTMDlUVjF0ZlkyZHJoNHVQazVlYm42T25xOGZMejlQWDI5L2o1K3YvRUFCOEJBQU1CQVFFQkFRRUJBUUVBQUFBQUFBQUJBZ01FQlFZSENBa0tDLy9FQUxVUkFBSUJBZ1FFQXdRSEJRUUVBQUVDZHdBQkFnTVJCQVVoTVFZU1FWRUhZWEVUSWpLQkNCUkNrYUd4d1Frak0xTHdGV0p5MFFvV0pEVGhKZkVYR0JrYUppY29LU28xTmpjNE9UcERSRVZHUjBoSlNsTlVWVlpYV0ZsYVkyUmxabWRvYVdwemRIVjJkM2g1ZW9LRGhJV0doNGlKaXBLVGxKV1dsNWlabXFLanBLV21wNmlwcXJLenRMVzJ0N2k1dXNMRHhNWEd4OGpKeXRMVDFOWFcxOWpaMnVMajVPWG01K2pwNnZMejlQWDI5L2o1K3YvYUFBd0RBUUFDRVFNUkFEOEEvU2l2VFBQRUpQcG1zM05JMGpDNC93QXRnbTRqQW9qTlNFNHREYTBJQ2dCMGNvUnhtdUtwdWRWUFl0M0V1K0xvQUtLVzRWTmlsWGFjb1VBUGpFWkh6ZGE1cHhiWjBRYVNLaHU1R3VHangrN0hRMTBScHhqRy9VeWxOdDJMQXBrcy85az0iPgoJPC9pbWFnZT4KPC9zdmc+"}},"order_column":1,"created_at":"2023-11-27T19:45:53.000000Z","updated_at":"2023-11-27T19:45:55.000000Z","conversions_disk":"public","uuid":"a24b06db-466d-469f-9bdb-cf2472730aad","generated_conversions":{"thumb":true,"ogimage":true},"original_url":"https:\/\/tailwindcomponents.com\/storage\/10894\/temp88955.png","preview_url":""}],"author":{"id":15504,"name":"devsmartproject","slug":"devsmartproject","bio":null,"avatar":"https:\/\/avatars.githubusercontent.com\/u\/140632490?v=4","header":null,"created_at":"2023-11-27T19:29:02.000000Z","updated_at":"2023-11-27T19:29:02.000000Z"},"tags":[{"id":4,"name":{"en":"Cards"},"description":"Check out our examples of beautifully designed cards that will help you display your content easily. Use our snippets to preview the code and spend less time re-inventing the wheel.","meta_description":"Check out our examples of beautifully designed cards that will help you display your content easily.","slug":{"en":"cards"},"type":null,"order_column":3,"created_at":"2019-07-04T08:20:17.000000Z","updated_at":"2022-08-01T16:06:24.000000Z","pivot":{"taggable_type":"App\\Component","taggable_id":5815,"tag_id":4}},{"id":2,"name":{"en":"Forms"},"description":"Get started with our 100+ forms examples that are ready to be used in your Tailwind project. From Sign up, Sign in, to subscribe forms we got anything you need.","meta_description":"Get started with our 100+ forms examples that are ready to be used in your Tailwind project. From Sign up, Sign in, to subscribe forms we got anything you need.","slug":{"en":"forms"},"type":null,"order_column":5,"created_at":"2019-07-04T08:20:17.000000Z","updated_at":"2022-08-01T16:08:37.000000Z","pivot":{"taggable_type":"App\\Component","taggable_id":5815,"tag_id":2}},{"id":72,"name":{"en":"Testimonials"},"description":"The Tailwind CSS Testimonials is used to showcase customer or user testimonials, often with text and images. See below our collection of Testimonials components that you can add directly to your Tailwind UI project.","meta_description":"Visit our Tailwind CSS Testimonials component examples that you can add to your web project to create awesome web apps.","slug":{"en":"testimonials"},"type":null,"order_column":61,"created_at":"2023-10-05T07:53:31.000000Z","updated_at":"2023-10-05T07:53:31.000000Z","pivot":{"taggable_type":"App\\Component","taggable_id":5815,"tag_id":72}}],"fork":null,"favorites":[{"id":3241,"name":"moneya","slug":"moneya","bio":null,"avatar":"https:\/\/avatars.githubusercontent.com\/u\/7353773?v=4","header":null,"created_at":"2021-04-28T15:37:06.000000Z","updated_at":"2021-04-28T15:37:06.000000Z","pivot":{"component_id":5815,"user_id":3241}},{"id":15871,"name":"Kanyawat21","slug":"kanyawat21","bio":null,"avatar":"https:\/\/avatars.githubusercontent.com\/u\/142079819?v=4","header":null,"created_at":"2023-12-17T12:52:25.000000Z","updated_at":"2023-12-17T12:52:25.000000Z","pivot":{"component_id":5815,"user_id":15871}}]}" :edit="false"> Full screen Preview

devsmartproject

9 components Profile On

Community Rate

Related components

See more components