Tailwind CSS Social Network Notification

Notification block for a social network made using Tailwind CSS

\r\n <span class=\"absolute h-4 w-4 bg-green-400 rounded-full bottom-0 right-0 border-2 border-white\"><\/span>\r\n <\/div>\r\n <div class=\"ml-3\">\r\n <span class=\"font-semibold tracking-tight text-xs\">John Doe<\/span>\r\n <span class=\"text-xs leading-none opacity-50\">reacted to your comment:<\/span>\r\n <p class=\"text-xs leading-4 pt-2 italic opacity-70\">\"This is the comment...\"<\/p>\r\n <span class=\"text-[10px] text-blue-500 font-medium leading-4 opacity-75\">a few seconds ago<\/span>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n<\/div>\r\n\r\n\r\n\r\n<div class=\"w-full h-auto relative\">\r\n <div class=\"bg-slate-900 text-slate-100 mt-10 px-5 py-3.5 rounded-lg shadow hover:shadow-xl max-w-sm mx-auto transform hover:-translate-y-[0.125rem] transition duration-100 ease-linear\">\r\n <div class=\"w-full flex items-center justify-between\">\r\n <span class=\"font-medium text-sm\">New Notification<\/span>\r\n <button class=\"-mr-1 bg-slate-800 hover:bg-slate-700\/70 text-slate-400 hover:text-slate-200 h-5 w-5 rounded-full flex justify-center items-center\">\r\n <svg class=\"h-2 w-2 fill-current items-center\" viewBox=\"0 0 20 20\"><path d=\"M10 8.586L2.929 1.515 1.515 2.929 8.586 10l-7.071 7.071 1.414 1.414L10 11.414l7.071 7.071 1.414-1.414L11.414 10l7.071-7.071-1.414-1.414L10 8.586z\"\/><\/svg>\r\n <\/button>\r\n <\/div>\r\n <div class=\"flex items-center mt-2 rounded-lg py-1 cursor-pointer\">\r\n <div class=\"relative flex flex-shrink-0 items-end\">\r\n <img class=\"h-16 w-16 rounded-full\" src=https://www.creative-tim.com/"https:////i.pravatar.cc//300/">/r/n <span class=\"absolute h-4 w-4 bg-green-400 rounded-full bottom-0 right-0 border-2 border-slate-900\"><\/span>\r\n <\/div>\r\n <div class=\"ml-3.5\">\r\n <span class=\"font-semibold tracking-tight text-xs\">John Doe<\/span>\r\n <span class=\"text-xs leading-none opacity-50\">reacted to your comment:<\/span>\r\n <p class=\"text-xs leading-4 pt-2 italic opacity-70\">\"This is the comment...\"<\/p>\r\n <span class=\"text-[10px] text-blue-500 font-medium leading-4 opacity-75\">a few seconds ago<\/span>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n<\/div>\r\n","author_type":"App\\User","author_id":3558,"collection_id":null,"fork_id":null,"votes":1,"score":"5.0","visits":4691,"popularity":195,"slug":"social-network-notification","approved":1,"created_at":"2022-10-06T18:23:18.000000Z","updated_at":"2024-08-29T00:56:36.000000Z","downloads":60,"code_views":693,"center":false,"notified":0,"premium":0,"tailwind_config":null,"type":"component","css":"https:\/\/cdn.tailwindcss.com","should_tweet":1,"media":[{"id":7851,"model_type":"App\\Component","model_id":3916,"collection_name":"preview","name":"temp67417","file_name":"temp67417.png","mime_type":"image\/png","disk":"public","size":47158,"manipulations":[],"custom_properties":[],"responsive_images":{"media_library_original":{"urls":["temp67417___media_library_original_1280_957.png","temp67417___media_library_original_1070_799.png","temp67417___media_library_original_895_669.png","temp67417___media_library_original_749_559.png","temp67417___media_library_original_627_468.png"],"base64svg":"data:image\/svg+xml;base64,PCFET0NUWVBFIHN2ZyBQVUJMSUMgIi0vL1czQy8vRFREIFNWRyAxLjEvL0VOIiAiaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkIj4KPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHhtbDpzcGFjZT0icHJlc2VydmUiIHg9IjAiCiB5PSIwIiB2aWV3Qm94PSIwIDAgMTI4MCA5NTciPgoJPGltYWdlIHdpZHRoPSIxMjgwIiBoZWlnaHQ9Ijk1NyIgeGxpbms6aHJlZj0iZGF0YTppbWFnZS9qcGVnO2Jhc2U2NCwvOWovNEFBUVNrWkpSZ0FCQVFFQVlBQmdBQUQvL2dBN1ExSkZRVlJQVWpvZ1oyUXRhbkJsWnlCMk1TNHdJQ2gxYzJsdVp5QkpTa2NnU2xCRlJ5QjJPREFwTENCeGRXRnNhWFI1SUQwZ09UQUsvOXNBUXdBREFnSURBZ0lEQXdNREJBTURCQVVJQlFVRUJBVUtCd2NHQ0F3S0RBd0xDZ3NMRFE0U0VBME9FUTRMQ3hBV0VCRVRGQlVWRlF3UEZ4Z1dGQmdTRkJVVS85c0FRd0VEQkFRRkJBVUpCUVVKRkEwTERSUVVGQlFVRkJRVUZCUVVGQlFVRkJRVUZCUVVGQlFVRkJRVUZCUVVGQlFVRkJRVUZCUVVGQlFVRkJRVUZCUVVGQlFVLzhBQUVRZ0FGd0FmQXdFUkFBSVJBUU1SQWYvRUFCOEFBQUVGQVFFQkFRRUJBQUFBQUFBQUFBQUJBZ01FQlFZSENBa0tDLy9FQUxVUUFBSUJBd01DQkFNRkJRUUVBQUFCZlFFQ0F3QUVFUVVTSVRGQkJoTlJZUWNpY1JReWdaR2hDQ05Dc2NFVlV0SHdKRE5pY29JSkNoWVhHQmthSlNZbktDa3FORFUyTnpnNU9rTkVSVVpIU0VsS1UxUlZWbGRZV1ZwalpHVm1aMmhwYW5OMGRYWjNlSGw2ZzRTRmhvZUlpWXFTazVTVmxwZVltWnFpbzZTbHBxZW9xYXF5czdTMXRyZTR1YnJDdzhURnhzZkl5Y3JTMDlUVjF0ZlkyZHJoNHVQazVlYm42T25xOGZMejlQWDI5L2o1K3YvRUFCOEJBQU1CQVFFQkFRRUJBUUVBQUFBQUFBQUJBZ01FQlFZSENBa0tDLy9FQUxVUkFBSUJBZ1FFQXdRSEJRUUVBQUVDZHdBQkFnTVJCQVVoTVFZU1FWRUhZWEVUSWpLQkNCUkNrYUd4d1Frak0xTHdGV0p5MFFvV0pEVGhKZkVYR0JrYUppY29LU28xTmpjNE9UcERSRVZHUjBoSlNsTlVWVlpYV0ZsYVkyUmxabWRvYVdwemRIVjJkM2g1ZW9LRGhJV0doNGlKaXBLVGxKV1dsNWlabXFLanBLV21wNmlwcXJLenRMVzJ0N2k1dXNMRHhNWEd4OGpKeXRMVDFOWFcxOWpaMnVMajVPWG01K2pwNnZMejlQWDI5L2o1K3YvYUFBd0RBUUFDRVFNUkFEOEEvU2R1bGVtZWVZenp0RnFpa0tUNzFoS0hNemVNckkyWkxzemdaRlhHUEtaeWx6QU9sYUVBUmtVQVJtQlNjNEdmV2dCM2wwQVBIQW9BS0FDZ0FvQUtBUC9aIj4KCTwvaW1hZ2U+Cjwvc3ZnPg=="}},"order_column":7685,"created_at":"2022-10-06T18:23:26.000000Z","updated_at":"2022-10-06T18:23:28.000000Z","conversions_disk":"public","uuid":"2726a123-20de-4501-a6d3-8764c3587fba","generated_conversions":{"thumb":true,"ogimage":true},"original_url":"https:\/\/tailwindcomponents.com\/storage\/7851\/temp67417.png","preview_url":""}],"author":{"id":3558,"name":"whoisthisstud","slug":"whoisthisstud","bio":null,"avatar":"https:\/\/avatars.githubusercontent.com\/u\/44807533?v=4","header":null,"created_at":"2021-05-25T15:23:04.000000Z","updated_at":"2021-05-25T15:23:04.000000Z"},"tags":[{"id":16,"name":{"en":"Alerts"},"description":"The Alert component is used to attract the user's attention without interrupting the user's task. See below our collection of Alert examples that you can add directly to your Tailwind UI project.","meta_description":"Visit our collection of Alert examples that you can add directly to your Tailwind UI project to attract the user's attention.","slug":{"en":"alerts"},"type":null,"order_column":15,"created_at":"2022-08-31T14:13:44.000000Z","updated_at":"2022-08-31T14:13:44.000000Z","pivot":{"taggable_type":"App\\Component","taggable_id":3916,"tag_id":16}}],"fork":null,"favorites":[{"id":1434,"name":"Matt","slug":"matt","bio":null,"avatar":"https:\/\/www.gravatar.com\/avatar\/2098eb6a3d48b22ed0692849699c795a","header":null,"created_at":"2020-10-27T13:11:58.000000Z","updated_at":"2020-10-27T13:11:58.000000Z","pivot":{"component_id":3916,"user_id":1434}},{"id":9406,"name":"alexandermitsyk","slug":"alexandermitsyk","bio":null,"avatar":"https:\/\/avatars.githubusercontent.com\/u\/15364563?v=4","header":null,"created_at":"2022-10-17T11:33:48.000000Z","updated_at":"2022-10-17T11:33:48.000000Z","pivot":{"component_id":3916,"user_id":9406}},{"id":9429,"name":"cristian","slug":"cristian-1","bio":null,"avatar":"https:\/\/www.gravatar.com\/avatar\/86bb797700e435bb06075716b6316635","header":null,"created_at":"2022-10-18T17:13:37.000000Z","updated_at":"2022-10-18T17:13:37.000000Z","pivot":{"component_id":3916,"user_id":9429}},{"id":8358,"name":"sahilnetic","slug":"sahilnetic","bio":"Try Appmojo, A repository of Free opensource React Native Component. : www.appmojo.site\r\nPersonal Website : www.sahilnetic.xyz","avatar":"\/storage\/avatars\/cEnStg2aN03H2eeQmVa99t5J3SRlMj3xBwkM1GZU.jpg","header":"\/storage\/headers\/eOrJw3m9yvguNw4or0OxqbO5wEbKFa13nqxaWKYH.png","created_at":"2022-07-07T16:27:21.000000Z","updated_at":"2022-08-10T13:25:22.000000Z","pivot":{"component_id":3916,"user_id":8358}},{"id":4075,"name":"bajro17","slug":"bajro17","bio":null,"avatar":"https:\/\/www.gravatar.com\/avatar\/796e85a3ea9beb39317ff2b37e69fc9f","header":null,"created_at":"2021-06-30T12:35:21.000000Z","updated_at":"2023-01-28T23:48:32.000000Z","pivot":{"component_id":3916,"user_id":4075}},{"id":9634,"name":"chenxi2015","slug":"chenxi2015","bio":null,"avatar":"https:\/\/avatars.githubusercontent.com\/u\/13269485?v=4","header":null,"created_at":"2022-11-05T16:53:25.000000Z","updated_at":"2022-11-05T16:53:25.000000Z","pivot":{"component_id":3916,"user_id":9634}},{"id":9853,"name":"cipherlabz","slug":"cipherlabz","bio":null,"avatar":"https:\/\/avatars.githubusercontent.com\/u\/113071990?v=4","header":null,"created_at":"2022-11-24T11:34:40.000000Z","updated_at":"2022-11-24T11:34:40.000000Z","pivot":{"component_id":3916,"user_id":9853}},{"id":9773,"name":"cnvo","slug":"cnvo","bio":null,"avatar":"https:\/\/avatars.githubusercontent.com\/u\/113159?v=4","header":null,"created_at":"2022-11-17T21:13:29.000000Z","updated_at":"2022-11-17T21:13:29.000000Z","pivot":{"component_id":3916,"user_id":9773}},{"id":9742,"name":"RWizard","slug":"rwizard","bio":null,"avatar":"https:\/\/avatars.githubusercontent.com\/u\/190453?v=4","header":null,"created_at":"2022-11-15T16:46:24.000000Z","updated_at":"2022-11-15T16:46:24.000000Z","pivot":{"component_id":3916,"user_id":9742}},{"id":11089,"name":"adhd_scientist","slug":"adhd-scientist","bio":null,"avatar":"https:\/\/pbs.twimg.com\/profile_images\/1552704685705990146\/K1m_UM0H_normal.jpg","header":null,"created_at":"2023-02-20T22:30:21.000000Z","updated_at":"2023-02-20T22:30:21.000000Z","pivot":{"component_id":3916,"user_id":11089}},{"id":12175,"name":"lastofthedinosaurs","slug":"lastofthedinosaurs","bio":null,"avatar":"https:\/\/avatars.githubusercontent.com\/u\/91705770?v=4","header":null,"created_at":"2023-05-02T09:21:58.000000Z","updated_at":"2023-05-02T09:21:58.000000Z","pivot":{"component_id":3916,"user_id":12175}},{"id":3317,"name":"J\u00f4natas Fenske","slug":"jonatas-fenske","bio":null,"avatar":"https:\/\/www.gravatar.com\/avatar\/d02ae88e386278d46bdbd74d59ef66fa","header":null,"created_at":"2021-05-05T00:16:38.000000Z","updated_at":"2021-05-05T00:16:38.000000Z","pivot":{"component_id":3916,"user_id":3317}},{"id":14528,"name":"i\u00f1igo","slug":"inigo","bio":null,"avatar":"\/storage\/avatars\/vxG5YhizP2rKQTPiQLUKcyhD5qIU7BqDqzid3IcZ.png","header":"\/storage\/headers\/eHB2weFMRKudd7cqBMS3men24S8f2Jw8ak5yTiMv.jpg","created_at":"2023-10-05T06:12:55.000000Z","updated_at":"2023-10-05T06:18:38.000000Z","pivot":{"component_id":3916,"user_id":14528}}]}" :edit="false"> Full screen Preview

whoisthisstud

7 components Profile On

Community Rate

Related components

See more components