[email protected]

Photo gallery card

By Judison1

A simple photo card with floating stock button with view, edit and remove options.

Share

/r/n <\/div>\r\n <div class=\"h-64 overflow-hidden\">\r\n <img class=\"object-cover h-32 w-full\" src=https://www.creative-tim.com/"https:////images.freeimages.com//images//small-previews//e71//frog-1371919.jpg/">/r/n <img class=\"object-cover h-32 w-full\" src=https://www.creative-tim.com/"https:////img.freepik.com//free-photo//beautiful-endangered-american-jaguar-nature-habitat-panthera-onca-wild-brasil-brasilian-wildlife-pantanal-green-jungle-big-cats_475641-2191.jpg?w=1380&t=st=1659969671~exp=1659970271~hmac=09544e5c9ac070a09c464342394c6657fafdd87b4c9772f2d5679a70e20a68e0\%22>\r\n <\/div>\r\n <\/div>\r\n <div class=\"p-3\">\r\n <div class=\"block md:flex justify-between\">\r\n <div>\r\n <h3 class=\"font-medium\">Card Title<\/h3>\r\n <span class=\"text-sm text-gray-500\">Author Name • author@email.com<\/span>\r\n <\/div>\r\n\r\n <div class=\"\">\r\n <div>\r\n <span class=\"text-sm text-gray-500\">01-20-2020 12:30<\/span>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <\/div>\r\n <\/div>\r\n<\/div>","author_type":"App\\User","author_id":5504,"collection_id":null,"fork_id":null,"votes":1,"score":"5.0","visits":7468,"popularity":135,"slug":"photo-gallery-card","approved":1,"created_at":"2021-10-20T00:00:00.000000Z","updated_at":"2025-06-18T11:24:23.000000Z","downloads":40,"code_views":674,"center":true,"notified":0,"premium":0,"tailwind_config":null,"type":"component","css":"https:\/\/cdn.tailwindcss.com","should_tweet":1,"media":[{"id":7315,"model_type":"App\\Component","model_id":2501,"collection_name":"preview","name":"temp40075","file_name":"temp40075.png","mime_type":"image\/png","disk":"public","size":472530,"manipulations":[],"custom_properties":[],"responsive_images":{"media_library_original":{"urls":["temp40075___media_library_original_1280_957.png","temp40075___media_library_original_1070_799.png","temp40075___media_library_original_895_669.png","temp40075___media_library_original_749_559.png","temp40075___media_library_original_627_468.png","temp40075___media_library_original_524_391.png","temp40075___media_library_original_439_328.png","temp40075___media_library_original_367_274.png","temp40075___media_library_original_307_229.png","temp40075___media_library_original_257_192.png","temp40075___media_library_original_215_160.png"],"base64svg":"data:image\/svg+xml;base64,PCFET0NUWVBFIHN2ZyBQVUJMSUMgIi0vL1czQy8vRFREIFNWRyAxLjEvL0VOIiAiaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkIj4KPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHhtbDpzcGFjZT0icHJlc2VydmUiIHg9IjAiCiB5PSIwIiB2aWV3Qm94PSIwIDAgMTI4MCA5NTciPgoJPGltYWdlIHdpZHRoPSIxMjgwIiBoZWlnaHQ9Ijk1NyIgeGxpbms6aHJlZj0iZGF0YTppbWFnZS9qcGVnO2Jhc2U2NCwvOWovNEFBUVNrWkpSZ0FCQVFFQVlBQmdBQUQvL2dBN1ExSkZRVlJQVWpvZ1oyUXRhbkJsWnlCMk1TNHdJQ2gxYzJsdVp5QkpTa2NnU2xCRlJ5QjJPREFwTENCeGRXRnNhWFI1SUQwZ09UQUsvOXNBUXdBREFnSURBZ0lEQXdNREJBTURCQVVJQlFVRUJBVUtCd2NHQ0F3S0RBd0xDZ3NMRFE0U0VBME9FUTRMQ3hBV0VCRVRGQlVWRlF3UEZ4Z1dGQmdTRkJVVS85c0FRd0VEQkFRRkJBVUpCUVVKRkEwTERSUVVGQlFVRkJRVUZCUVVGQlFVRkJRVUZCUVVGQlFVRkJRVUZCUVVGQlFVRkJRVUZCUVVGQlFVRkJRVUZCUVVGQlFVLzhBQUVRZ0FGd0FmQXdFUkFBSVJBUU1SQWYvRUFCOEFBQUVGQVFFQkFRRUJBQUFBQUFBQUFBQUJBZ01FQlFZSENBa0tDLy9FQUxVUUFBSUJBd01DQkFNRkJRUUVBQUFCZlFFQ0F3QUVFUVVTSVRGQkJoTlJZUWNpY1JReWdaR2hDQ05Dc2NFVlV0SHdKRE5pY29JSkNoWVhHQmthSlNZbktDa3FORFUyTnpnNU9rTkVSVVpIU0VsS1UxUlZWbGRZV1ZwalpHVm1aMmhwYW5OMGRYWjNlSGw2ZzRTRmhvZUlpWXFTazVTVmxwZVltWnFpbzZTbHBxZW9xYXF5czdTMXRyZTR1YnJDdzhURnhzZkl5Y3JTMDlUVjF0ZlkyZHJoNHVQazVlYm42T25xOGZMejlQWDI5L2o1K3YvRUFCOEJBQU1CQVFFQkFRRUJBUUVBQUFBQUFBQUJBZ01FQlFZSENBa0tDLy9FQUxVUkFBSUJBZ1FFQXdRSEJRUUVBQUVDZHdBQkFnTVJCQVVoTVFZU1FWRUhZWEVUSWpLQkNCUkNrYUd4d1Frak0xTHdGV0p5MFFvV0pEVGhKZkVYR0JrYUppY29LU28xTmpjNE9UcERSRVZHUjBoSlNsTlVWVlpYV0ZsYVkyUmxabWRvYVdwemRIVjJkM2g1ZW9LRGhJV0doNGlKaXBLVGxKV1dsNWlabXFLanBLV21wNmlwcXJLenRMVzJ0N2k1dXNMRHhNWEd4OGpKeXRMVDFOWFcxOWpaMnVMajVPWG01K2pwNnZMejlQWDI5L2o1K3YvYUFBd0RBUUFDRVFNUkFEOEEvUWUvOGRhVHBzZm1UM2NhTDZraXZSNWtjRm1NdC9IK2ozS0Iwdkl5cDZIZFJ6SmhaanJueDNwRnBneTNrYUErckNzbldoRjJiQ3hidFBGR24zcUJvYm1Od2ZScXBWSXZabGNrajVZOFUvQy94ZnJ0djVYN3dBSFBCTmNzbEpuVkZveU5WK0UzanEzMGlOTER6RmtqSEF5ZWF6dE5JcHVKeG1wZkN6NHI2dVVTYnpGVWR3VFhpMWNOV3FTYlRLaXFmTmRuUytFUGg3OFV0RWtLUEpJMFdPTWsxcGhxTmVIeEhUS2ROTFErM3hBZy9oSDVWOVJZOGE0dmxKL2RGRmhDZVJIL0FIUitWRmtBdmtwL2RINVVySWR6LzlrPSI+Cgk8L2ltYWdlPgo8L3N2Zz4="}},"order_column":7164,"created_at":"2022-08-08T14:42:08.000000Z","updated_at":"2022-08-08T14:42:11.000000Z","conversions_disk":"public","uuid":"b4b8b8a4-5d90-432b-8328-317571d92692","generated_conversions":{"thumb":true,"ogimage":true},"original_url":"https:\/\/tailwindcomponents.com\/storage\/7315\/temp40075.png","preview_url":""}],"author":{"id":5504,"name":"Judison1","slug":"judison1","bio":null,"avatar":"https:\/\/avatars.githubusercontent.com\/u\/9591073?v=4","header":null,"created_at":"2021-10-20T15:25:14.000000Z","updated_at":"2021-10-20T15:25:14.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":2501,"tag_id":4}},{"id":7,"name":{"en":"Pages"},"description":"Looking to get the work done faster? Choose from our collection of 500+ fully coded page examples that are built using the popular CSS framework - Tailwind CSS. Get started or get inspired!","meta_description":"Choose from our collection of 500+ fully coded page examples that are built using the popular CSS framework - Tailwind CSS","slug":{"en":"pages"},"type":null,"order_column":10,"created_at":"2019-07-04T08:20:17.000000Z","updated_at":"2022-08-01T16:13:03.000000Z","pivot":{"taggable_type":"App\\Component","taggable_id":2501,"tag_id":7}},{"id":86,"name":{"en":"Gallery"},"description":"The gallery component, utilizing Tailwind CSS's utility-first classes, showcases multiple images in a masonry grid layout. It offers diverse layouts, styles, sizes, and colors, providing users with an engaging collection of pictures.","meta_description":"The gallery component, utilizing Tailwind CSS's utility-first classes, showcases multiple images in a masonry grid layout. It offers diverse layouts, styles, sizes, and colors, providing users with an engaging collection of pictures.","slug":{"en":"gallery"},"type":null,"order_column":75,"created_at":"2023-11-14T16:44:00.000000Z","updated_at":"2023-11-14T16:44:00.000000Z","pivot":{"taggable_type":"App\\Component","taggable_id":2501,"tag_id":86}},{"id":87,"name":{"en":"Masonry"},"description":"Utilize the image gallery component employing a masonry grid layout, utilizing Tailwind CSS flex and grid classes. Display multiple pictures in various styles to enhance visual appeal and presentation.","meta_description":"Utilize the image gallery component employing a masonry grid layout, utilizing Tailwind CSS flex and grid classes. Display multiple pictures in various styles to enhance visual appeal and presentation.","slug":{"en":"masonry"},"type":null,"order_column":76,"created_at":"2023-11-14T16:47:15.000000Z","updated_at":"2023-11-14T16:47:15.000000Z","pivot":{"taggable_type":"App\\Component","taggable_id":2501,"tag_id":87}}],"fork":null,"favorites":[{"id":4491,"name":"NicholasAnthony","slug":"nicholasanthony","bio":null,"avatar":"https:\/\/avatars.githubusercontent.com\/u\/10848?v=4","header":null,"created_at":"2021-08-04T07:21:40.000000Z","updated_at":"2021-08-04T07:21:40.000000Z","pivot":{"component_id":2501,"user_id":4491}},{"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":2501,"user_id":9030}},{"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":2501,"user_id":9406}},{"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":2501,"user_id":12175}},{"id":14756,"name":"iyuhi","slug":"iyuhi","bio":null,"avatar":"https:\/\/avatars.githubusercontent.com\/u\/125770443?v=4","header":null,"created_at":"2023-10-18T16:30:27.000000Z","updated_at":"2023-10-18T16:30:27.000000Z","pivot":{"component_id":2501,"user_id":14756}},{"id":9931,"name":"Sergio","slug":"sergio-1","bio":null,"avatar":"https:\/\/www.gravatar.com\/avatar\/29ecc344c51cbed193a4d765dea4f09c","header":null,"created_at":"2022-11-29T15:29:22.000000Z","updated_at":"2022-11-29T15:29:22.000000Z","pivot":{"component_id":2501,"user_id":9931}}]}" :edit="false"> Full screen Preview

Judison1

1 component Profile On

Photo gallery card

Community Rate

Related components