Tailwind CSS Alert with Icon

By Material Tailwind

Create web projects more efficient with our ready-to-use Tailwind CSS Alert with Icon. Customize the alert with icon to integrate it into your website's design, ensuring consistency with the overall aesthetics of your website. www.material-tailwind.com/docs/html/alert#alert-with-icon

Fork

/r/n \r\n\r\n<script src=\"https:\/\/unpkg.com\/@material-tailwind\/html@latest\/scripts\/script-name.js\"><\/script>","author_type":"App\\User","author_id":14416,"collection_id":null,"fork_id":null,"votes":1,"score":"5.0","visits":1393,"popularity":204,"slug":"tailwind-css-alert-with-icon-by-material-tailwind","approved":1,"created_at":"2023-10-08T08:15:52.000000Z","updated_at":"2024-09-19T04:01:08.000000Z","downloads":63,"code_views":96,"center":true,"notified":0,"premium":0,"tailwind_config":null,"type":"component","css":"https:\/\/cdn.tailwindcss.com","should_tweet":0,"media":[{"id":10408,"model_type":"App\\Component","model_id":5523,"collection_name":"preview","name":"temp70519","file_name":"temp70519.png","mime_type":"image\/png","disk":"public","size":20217,"manipulations":[],"custom_properties":[],"responsive_images":{"media_library_original":{"urls":["temp70519___media_library_original_1280_957.png","temp70519___media_library_original_1070_800.png"],"base64svg":"data:image\/svg+xml;base64,PCFET0NUWVBFIHN2ZyBQVUJMSUMgIi0vL1czQy8vRFREIFNWRyAxLjEvL0VOIiAiaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkIj4KPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHhtbDpzcGFjZT0icHJlc2VydmUiIHg9IjAiCiB5PSIwIiB2aWV3Qm94PSIwIDAgMTI4MCA5NTciPgoJPGltYWdlIHdpZHRoPSIxMjgwIiBoZWlnaHQ9Ijk1NyIgeGxpbms6aHJlZj0iZGF0YTppbWFnZS9qcGVnO2Jhc2U2NCwvOWovNEFBUVNrWkpSZ0FCQVFFQVlBQmdBQUQvL2dBN1ExSkZRVlJQVWpvZ1oyUXRhbkJsWnlCMk1TNHdJQ2gxYzJsdVp5QkpTa2NnU2xCRlJ5QjJPREFwTENCeGRXRnNhWFI1SUQwZ09UQUsvOXNBUXdBREFnSURBZ0lEQXdNREJBTURCQVVJQlFVRUJBVUtCd2NHQ0F3S0RBd0xDZ3NMRFE0U0VBME9FUTRMQ3hBV0VCRVRGQlVWRlF3UEZ4Z1dGQmdTRkJVVS85c0FRd0VEQkFRRkJBVUpCUVVKRkEwTERSUVVGQlFVRkJRVUZCUVVGQlFVRkJRVUZCUVVGQlFVRkJRVUZCUVVGQlFVRkJRVUZCUVVGQlFVRkJRVUZCUVVGQlFVLzhBQUVRZ0FHQUFnQXdFUkFBSVJBUU1SQWYvRUFCOEFBQUVGQVFFQkFRRUJBQUFBQUFBQUFBQUJBZ01FQlFZSENBa0tDLy9FQUxVUUFBSUJBd01DQkFNRkJRUUVBQUFCZlFFQ0F3QUVFUVVTSVRGQkJoTlJZUWNpY1JReWdaR2hDQ05Dc2NFVlV0SHdKRE5pY29JSkNoWVhHQmthSlNZbktDa3FORFUyTnpnNU9rTkVSVVpIU0VsS1UxUlZWbGRZV1ZwalpHVm1aMmhwYW5OMGRYWjNlSGw2ZzRTRmhvZUlpWXFTazVTVmxwZVltWnFpbzZTbHBxZW9xYXF5czdTMXRyZTR1YnJDdzhURnhzZkl5Y3JTMDlUVjF0ZlkyZHJoNHVQazVlYm42T25xOGZMejlQWDI5L2o1K3YvRUFCOEJBQU1CQVFFQkFRRUJBUUVBQUFBQUFBQUJBZ01FQlFZSENBa0tDLy9FQUxVUkFBSUJBZ1FFQXdRSEJRUUVBQUVDZHdBQkFnTVJCQVVoTVFZU1FWRUhZWEVUSWpLQkNCUkNrYUd4d1Frak0xTHdGV0p5MFFvV0pEVGhKZkVYR0JrYUppY29LU28xTmpjNE9UcERSRVZHUjBoSlNsTlVWVlpYV0ZsYVkyUmxabWRvYVdwemRIVjJkM2g1ZW9LRGhJV0doNGlKaXBLVGxKV1dsNWlabXFLanBLV21wNmlwcXJLenRMVzJ0N2k1dXNMRHhNWEd4OGpKeXRMVDFOWFcxOWpaMnVMajVPWG01K2pwNnZMejlQWDI5L2o1K3YvYUFBd0RBUUFDRVFNUkFEOEEvU0dXOGloT0hjS2ZjMTZSeHhweWxzaG8xRzNZNEVpay9XZ3IyVTEwSmhJR0dSeUtaazFZY0RtZ1JqNnA0ZVhVbjNHUmwrbEt4MzBNVTZLc2tVNGZCeVJPRzg1emozb3NkTXN3bEpXc2JzVnY1U0JRU2NVenlwUzVuY25VWUZCQXRBQlFBVUFGQUgvLzJRPT0iPgoJPC9pbWFnZT4KPC9zdmc+"}},"order_column":2,"created_at":"2023-10-08T09:44:36.000000Z","updated_at":"2023-10-08T09:44:37.000000Z","conversions_disk":"public","uuid":"8c59673f-ae2b-4766-be56-98b829d03eb1","generated_conversions":{"thumb":true,"ogimage":true},"original_url":"https:\/\/tailwindcomponents.com\/storage\/10408\/temp70519.png","preview_url":""}],"author":{"id":14416,"name":"Material Tailwind","slug":"material-tailwind","bio":"Material Tailwind is an open-source library that uses the power of Tailwind CSS and React to help you build unique web projects faster and easier. The stunning design inspired by Material Design is a bonus!\r\n\r\nhttps:\/\/material-tailwind.com","avatar":"\/storage\/avatars\/21ZisJofZDGSjmtcFGoLN7QhbCE6Np1rzwjqUZIN.jpg","header":null,"created_at":"2023-09-29T09:20:50.000000Z","updated_at":"2023-09-29T09:33:38.000000Z"},"tags":[{"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":5523,"tag_id":25}},{"id":26,"name":{"en":"Images"},"description":"These components are used for displaying different types of images. See below our collection of Image examples that you can add directly to your Tailwind UI project.","meta_description":"Visit our collection of Image examples that you can add directly to your Tailwind UI web project.","slug":{"en":"images"},"type":null,"order_column":25,"created_at":"2022-08-31T14:19:30.000000Z","updated_at":"2022-12-21T11:02:51.000000Z","pivot":{"taggable_type":"App\\Component","taggable_id":5523,"tag_id":26}},{"id":54,"name":{"en":"Avatars"},"description":"The Avatar Component is usually a visual representation of users and is displayed alongside usernames, comments, or profiles. See below our collection of versatile Avatars that you can add directly to your Tailwind UI project.","meta_description":"Visit our Avatar collection that you can add to your Tailwind UI project to create awesome web apps.","slug":{"en":"avatars"},"type":null,"order_column":43,"created_at":"2023-07-20T07:31:45.000000Z","updated_at":"2023-07-20T07:50:20.000000Z","pivot":{"taggable_type":"App\\Component","taggable_id":5523,"tag_id":54}}],"fork":null,"favorites":[]}" :edit="false"> Full screen Preview

Material Tailwind

81 components

Tailwind CSS Alert with Icon

Community Rate

Related components