Material Design Card

Material Design 3 Blog Post Card implementation with Tailwind CSS and Material Tailwind Framework

/r/n <script src=https://www.creative-tim.com/"https:////unpkg.com//@material-tailwind//html@latest//scripts//colored-shadow.js/">/r/n <\/body>\r\n<\/html>","author_type":"App\\User","author_id":5062,"collection_id":null,"fork_id":null,"votes":1,"score":"5.0","visits":7690,"popularity":375,"slug":"material-design-card-1","approved":1,"created_at":"2022-06-27T18:29:24.000000Z","updated_at":"2024-08-29T03:38:03.000000Z","downloads":120,"code_views":2096,"center":false,"notified":0,"premium":0,"tailwind_config":null,"type":"component","css":"https:\/\/cdn.tailwindcss.com","should_tweet":1,"media":[{"id":8708,"model_type":"App\\Component","model_id":3638,"collection_name":"preview","name":"temp34469","file_name":"temp34469.png","mime_type":"image\/png","disk":"public","size":663246,"manipulations":[],"custom_properties":[],"responsive_images":{"media_library_original":{"urls":["temp34469___media_library_original_1280_957.png","temp34469___media_library_original_1070_800.png","temp34469___media_library_original_895_669.png","temp34469___media_library_original_749_560.png","temp34469___media_library_original_627_469.png","temp34469___media_library_original_524_392.png","temp34469___media_library_original_439_328.png","temp34469___media_library_original_367_274.png","temp34469___media_library_original_307_230.png","temp34469___media_library_original_257_192.png","temp34469___media_library_original_215_161.png","temp34469___media_library_original_179_134.png"],"base64svg":"data:image\/svg+xml;base64,PCFET0NUWVBFIHN2ZyBQVUJMSUMgIi0vL1czQy8vRFREIFNWRyAxLjEvL0VOIiAiaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkIj4KPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHhtbDpzcGFjZT0icHJlc2VydmUiIHg9IjAiCiB5PSIwIiB2aWV3Qm94PSIwIDAgMTI4MCA5NTciPgoJPGltYWdlIHdpZHRoPSIxMjgwIiBoZWlnaHQ9Ijk1NyIgeGxpbms6aHJlZj0iZGF0YTppbWFnZS9qcGVnO2Jhc2U2NCwvOWovNEFBUVNrWkpSZ0FCQVFFQVlBQmdBQUQvL2dBN1ExSkZRVlJQVWpvZ1oyUXRhbkJsWnlCMk1TNHdJQ2gxYzJsdVp5QkpTa2NnU2xCRlJ5QjJPREFwTENCeGRXRnNhWFI1SUQwZ09UQUsvOXNBUXdBREFnSURBZ0lEQXdNREJBTURCQVVJQlFVRUJBVUtCd2NHQ0F3S0RBd0xDZ3NMRFE0U0VBME9FUTRMQ3hBV0VCRVRGQlVWRlF3UEZ4Z1dGQmdTRkJVVS85c0FRd0VEQkFRRkJBVUpCUVVKRkEwTERSUVVGQlFVRkJRVUZCUVVGQlFVRkJRVUZCUVVGQlFVRkJRVUZCUVVGQlFVRkJRVUZCUVVGQlFVRkJRVUZCUVVGQlFVLzhBQUVRZ0FHQUFnQXdFUkFBSVJBUU1SQWYvRUFCOEFBQUVGQVFFQkFRRUJBQUFBQUFBQUFBQUJBZ01FQlFZSENBa0tDLy9FQUxVUUFBSUJBd01DQkFNRkJRUUVBQUFCZlFFQ0F3QUVFUVVTSVRGQkJoTlJZUWNpY1JReWdaR2hDQ05Dc2NFVlV0SHdKRE5pY29JSkNoWVhHQmthSlNZbktDa3FORFUyTnpnNU9rTkVSVVpIU0VsS1UxUlZWbGRZV1ZwalpHVm1aMmhwYW5OMGRYWjNlSGw2ZzRTRmhvZUlpWXFTazVTVmxwZVltWnFpbzZTbHBxZW9xYXF5czdTMXRyZTR1YnJDdzhURnhzZkl5Y3JTMDlUVjF0ZlkyZHJoNHVQazVlYm42T25xOGZMejlQWDI5L2o1K3YvRUFCOEJBQU1CQVFFQkFRRUJBUUVBQUFBQUFBQUJBZ01FQlFZSENBa0tDLy9FQUxVUkFBSUJBZ1FFQXdRSEJRUUVBQUVDZHdBQkFnTVJCQVVoTVFZU1FWRUhZWEVUSWpLQkNCUkNrYUd4d1Frak0xTHdGV0p5MFFvV0pEVGhKZkVYR0JrYUppY29LU28xTmpjNE9UcERSRVZHUjBoSlNsTlVWVlpYV0ZsYVkyUmxabWRvYVdwemRIVjJkM2g1ZW9LRGhJV0doNGlKaXBLVGxKV1dsNWlabXFLanBLV21wNmlwcXJLenRMVzJ0N2k1dXNMRHhNWEd4OGpKeXRMVDFOWFcxOWpaMnVMajVPWG01K2pwNnZMejlQWDI5L2o1K3YvYUFBd0RBUUFDRVFNUkFEOEE5UHZkVEhyUWYwMVRvbk02aHJ2MmUvaWprZmJHNTYxNTlXcktNckkrT3pQTjU0S3J5SXpkZnZ0bHlWUTVUYm5kV2xPcTVPeDNaRm5kVEcxMVRramtMeTkzT2VhN2JIN0JDR2gzRjdxdUQxcEh6OEtCMC9oKzc4SzZoWklOV3dKVjcxbTRLVzUrYTU1dzlpc1ppT2VtdEN0NC93QlM4SnBvNUdtc0RQakFvalRVWGRIVHc3dy9pc0ZpVlVxclE4TnVyekxubnZXNlIrMVJpZE5kNmd4enpVMk9HRk5JeDdtOVlaK1kwenBVVVpkemVzYzVZMVNSc29veXJpNlByVE5rai8vWiI+Cgk8L2ltYWdlPgo8L3N2Zz4="}},"order_column":8521,"created_at":"2023-02-03T13:42:47.000000Z","updated_at":"2023-02-03T13:42:50.000000Z","conversions_disk":"public","uuid":"423640a6-da3a-46c9-9380-0ee1aad04792","generated_conversions":{"thumb":true,"ogimage":true},"original_url":"https:\/\/tailwindcomponents.com\/storage\/8708\/temp34469.png","preview_url":""}],"author":{"id":5062,"name":"Creative Tim","slug":"creative-tim","bio":"Fully Coded UI Tools to create web and mobile apps.\r\n\r\nwww.creative-tim.com","avatar":"\/storage\/avatars\/TpXC86kLAsEjEFhN5zBp9Q8a8mzO4aigKXwfc5zm.jpg","header":null,"created_at":"2021-09-15T11:57:57.000000Z","updated_at":"2024-07-23T12:36:04.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":3638,"tag_id":4}}],"fork":null,"favorites":[{"id":5062,"name":"Creative Tim","slug":"creative-tim","bio":"Fully Coded UI Tools to create web and mobile apps.\r\n\r\nwww.creative-tim.com","avatar":"\/storage\/avatars\/TpXC86kLAsEjEFhN5zBp9Q8a8mzO4aigKXwfc5zm.jpg","header":null,"created_at":"2021-09-15T11:57:57.000000Z","updated_at":"2024-07-23T12:36:04.000000Z","pivot":{"component_id":3638,"user_id":5062}},{"id":4536,"name":"paramjeet-dhiman","slug":"paramjeet-dhiman","bio":null,"avatar":"https:\/\/avatars.githubusercontent.com\/u\/86948618?v=4","header":null,"created_at":"2021-08-08T03:47:42.000000Z","updated_at":"2021-08-08T03:47:42.000000Z","pivot":{"component_id":3638,"user_id":4536}},{"id":8096,"name":"Shubhajit01","slug":"shubhajit01","bio":null,"avatar":"https:\/\/avatars.githubusercontent.com\/u\/43203087?v=4","header":null,"created_at":"2022-06-09T21:42:49.000000Z","updated_at":"2022-06-09T21:42:49.000000Z","pivot":{"component_id":3638,"user_id":8096}},{"id":9030,"name":"zariyatyasin","slug":"zariyatyasin","bio":null,"avatar":"https:\/\/avatars.githubusercontent.com\/u\/64485419?v=4","header":null,"created_at":"2022-09-12T18:44:11.000000Z","updated_at":"2022-09-12T18:44:11.000000Z","pivot":{"component_id":3638,"user_id":9030}},{"id":8280,"name":"NdekoCode","slug":"ndekocode","bio":null,"avatar":"https:\/\/avatars.githubusercontent.com\/u\/85836702?v=4","header":"\/storage\/headers\/3FqzEebO3eZi51EIVGBz9z4Z9OfkfxfX63Dtgga5.png","created_at":"2022-06-28T15:31:22.000000Z","updated_at":"2023-09-08T17:49:11.000000Z","pivot":{"component_id":3638,"user_id":8280}}]}" :edit="false"> Full screen Preview

Creative Tim

196 components

Community Rate

Related components

See more components