Tailwind CSS Icon Buttons

Icon Buttons made using Riva Dashboard for Tailwind CSS

/r/n <link\r\n rel=\"stylesheet\"\r\n href=https://www.creative-tim.com/"https:////cdnjs.cloudflare.com//ajax//libs//font-awesome//5.15.4//css//all.min.css/"/r/n \/>\r\n<div class=\"flex flex-wrap -mx-3 mb-5 bg-white pt-7 px-4 pb-5 justify-center\">\r\n <div class=\"flex space-x-4 mb-4\">\r\n <button class=\"flex items-center justify-center bg-primary hover:bg-primaryActive rounded-xl py-2.5 px-5 text-white transition duration-300\">\r\n <i class=\"fas fa-check text-white mr-2\"><\/i>Well done!\r\n <\/button>\r\n <button class=\"flex items-center justify-center bg-success hover:bg-successActive rounded-xl py-2.5 px-5 text-white transition duration-300\">\r\n <i class=\"fas fa-check text-white mr-2\"><\/i>Success\r\n <\/button>\r\n <button class=\"flex items-center justify-center bg-info hover:bg-infoActive rounded-xl py-2.5 px-5 text-white transition duration-300\">\r\n <i class=\"fas fa-info-circle text-white mr-2\"><\/i>Read more\r\n <\/button>\r\n <button class=\"flex items-center justify-center bg-warning hover:bg-warningActive rounded-xl py-2.5 px-5 text-white transition duration-300\">\r\n <i class=\"fas fa-exclamation-triangle text-white mr-2\"><\/i>Not allowed\r\n <\/button>\r\n <button class=\"flex items-center justify-center bg-danger hover:bg-dangerActive rounded-xl py-2.5 px-5 text-white transition duration-300\">\r\n <i class=\"fas fa-times text-white mr-2\"><\/i>Error!\r\n <\/button>\r\n <button class=\"flex items-center justify-center bg-dark hover:bg-darkActive rounded-xl py-2.5 px-5 text-white transition duration-300\">\r\n <i class=\"fas fa-moon text-gray-100 mr-2\"><\/i>Dark mode\r\n <\/button>\r\n <\/div>\r\n<\/div>\r\n<div class=\"flex flex-wrap -mx-3 mb-5\">\r\n <div class=\"w-full max-w-full sm:w-3\/4 mx-auto text-center\">\r\n <p class=\"text-sm text-slate-500 py-1\"> Tailwind CSS Component from <a href=https://www.creative-tim.com/"https:////www.loopple.com//theme//riva-dashboard-tailwind?ref=tailwindcomponents\%22 class=\"text-slate-700 hover:text-slate-900\" target=\"_blank\">Riva Dashboard<\/a> by <a href=https://www.creative-tim.com/"https:////www.loopple.com/" class=\"text-slate-700 hover:text-slate-900\" target=\"_blank\">Loopple Builder<\/a>. <\/p>\r\n <\/div>\r\n<\/div>","author_type":"App\\User","author_id":14127,"collection_id":null,"fork_id":null,"votes":1,"score":"5.0","visits":381,"popularity":180,"slug":"tailwind-css-icon-buttons","approved":1,"created_at":"2024-09-04T00:00:00.000000Z","updated_at":"2024-09-19T04:57:19.000000Z","downloads":1,"code_views":61,"center":false,"notified":0,"premium":0,"tailwind_config":null,"type":"component","css":"https:\/\/cdn.tailwindcss.com","should_tweet":0,"media":[{"id":12164,"model_type":"App\\Component","model_id":6788,"collection_name":"preview","name":"temp46253","file_name":"temp46253.png","mime_type":"image\/png","disk":"public","size":17387,"manipulations":[],"custom_properties":[],"responsive_images":{"media_library_original":{"urls":["temp46253___media_library_original_1280_957.png","temp46253___media_library_original_1070_800.png"],"base64svg":"data:image\/svg+xml;base64,PCFET0NUWVBFIHN2ZyBQVUJMSUMgIi0vL1czQy8vRFREIFNWRyAxLjEvL0VOIiAiaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkIj4KPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHhtbDpzcGFjZT0icHJlc2VydmUiIHg9IjAiCiB5PSIwIiB2aWV3Qm94PSIwIDAgMTI4MCA5NTciPgoJPGltYWdlIHdpZHRoPSIxMjgwIiBoZWlnaHQ9Ijk1NyIgeGxpbms6aHJlZj0iZGF0YTppbWFnZS9qcGVnO2Jhc2U2NCwvOWovNEFBUVNrWkpSZ0FCQVFFQVlBQmdBQUQvL2dBN1ExSkZRVlJQVWpvZ1oyUXRhbkJsWnlCMk1TNHdJQ2gxYzJsdVp5QkpTa2NnU2xCRlJ5QjJPREFwTENCeGRXRnNhWFI1SUQwZ09UQUsvOXNBUXdBREFnSURBZ0lEQXdNREJBTURCQVVJQlFVRUJBVUtCd2NHQ0F3S0RBd0xDZ3NMRFE0U0VBME9FUTRMQ3hBV0VCRVRGQlVWRlF3UEZ4Z1dGQmdTRkJVVS85c0FRd0VEQkFRRkJBVUpCUVVKRkEwTERSUVVGQlFVRkJRVUZCUVVGQlFVRkJRVUZCUVVGQlFVRkJRVUZCUVVGQlFVRkJRVUZCUVVGQlFVRkJRVUZCUVVGQlFVLzhBQUVRZ0FHQUFnQXdFUkFBSVJBUU1SQWYvRUFCOEFBQUVGQVFFQkFRRUJBQUFBQUFBQUFBQUJBZ01FQlFZSENBa0tDLy9FQUxVUUFBSUJBd01DQkFNRkJRUUVBQUFCZlFFQ0F3QUVFUVVTSVRGQkJoTlJZUWNpY1JReWdaR2hDQ05Dc2NFVlV0SHdKRE5pY29JSkNoWVhHQmthSlNZbktDa3FORFUyTnpnNU9rTkVSVVpIU0VsS1UxUlZWbGRZV1ZwalpHVm1aMmhwYW5OMGRYWjNlSGw2ZzRTRmhvZUlpWXFTazVTVmxwZVltWnFpbzZTbHBxZW9xYXF5czdTMXRyZTR1YnJDdzhURnhzZkl5Y3JTMDlUVjF0ZlkyZHJoNHVQazVlYm42T25xOGZMejlQWDI5L2o1K3YvRUFCOEJBQU1CQVFFQkFRRUJBUUVBQUFBQUFBQUJBZ01FQlFZSENBa0tDLy9FQUxVUkFBSUJBZ1FFQXdRSEJRUUVBQUVDZHdBQkFnTVJCQVVoTVFZU1FWRUhZWEVUSWpLQkNCUkNrYUd4d1Frak0xTHdGV0p5MFFvV0pEVGhKZkVYR0JrYUppY29LU28xTmpjNE9UcERSRVZHUjBoSlNsTlVWVlpYV0ZsYVkyUmxabWRvYVdwemRIVjJkM2g1ZW9LRGhJV0doNGlKaXBLVGxKV1dsNWlabXFLanBLV21wNmlwcXJLenRMVzJ0N2k1dXNMRHhNWEd4OGpKeXRMVDFOWFcxOWpaMnVMajVPWG01K2pwNnZMejlQWDI5L2o1K3YvYUFBd0RBUUFDRVFNUkFEOEEvU29TRlVJSFExNlZremhUc1pyNlhFMGhmSEpweTk3Y3k1RmU1RStoVzhzeVNNdVdVNUZZUm94ZzdvN0hYbTQ4ck5ZT2RpcjJGYXBKR0RsY1NxSkNnQW9BS0FDZ0FvQUtBQ2dELzlrPSI+Cgk8L2ltYWdlPgo8L3N2Zz4="}},"order_column":1,"created_at":"2024-06-02T11:33:12.000000Z","updated_at":"2024-06-02T11:33:13.000000Z","conversions_disk":"public","uuid":"5d0790fa-23e7-4868-a327-445ac2179e81","generated_conversions":{"thumb":true,"ogimage":true},"original_url":"https:\/\/tailwindcomponents.com\/storage\/12164\/temp46253.png","preview_url":""}],"author":{"id":14127,"name":"Loopple","slug":"loopple","bio":"Drag & Drop Template Builder for Modern Developers\r\n\r\nhttps:\/\/www.loopple.com","avatar":"\/storage\/avatars\/mQDQW95iHL6HPU0BigqNwvqQ7V0LgRf4WnDy4Ixw.png","header":null,"created_at":"2023-09-12T16:02:43.000000Z","updated_at":"2023-10-26T18:39:57.000000Z"},"tags":[{"id":1,"name":{"en":"Buttons"},"description":"Choose from our large collection of ready-to-use buttons based on the most popular utility-first CSS framework.","meta_description":"Choose from our large collection of ready-to-use buttons based on the most popular utility-first CSS framework.","slug":{"en":"buttons"},"type":null,"order_column":2,"created_at":"2019-07-04T08:20:17.000000Z","updated_at":"2022-08-01T16:05:44.000000Z","pivot":{"taggable_type":"App\\Component","taggable_id":6788,"tag_id":1}},{"id":25,"name":{"en":"Icons"},"description":"See below our collection of Icon examples that you can add directly to your web project.","meta_description":"See below our collection of Icon examples that you can add directly to your web project.","slug":{"en":"icons"},"type":null,"order_column":24,"created_at":"2022-08-31T14:18:57.000000Z","updated_at":"2022-12-21T11:18:34.000000Z","pivot":{"taggable_type":"App\\Component","taggable_id":6788,"tag_id":25}}],"fork":null,"favorites":[]}" :edit="false"> Full screen Preview

Loopple

17 components

Community Rate

Related components

See more components