Alpine.js + TailwindCSS Lightbox Modal

Simple Alpine.js with TailwindCSS 'lightbox-like' modal, useful for images, image grids, galleries and similar content.

/r/n <\/a>\r\n <\/div>\r\n <\/div>\r\n \r\n <div class=\"w-1\/6 px-2\">\r\n <div class=\"bg-gray-400\">\r\n <a @click=\"$dispatch('img-modal', { imgModalSrc: 'https:\/\/picsum.photos\/640\/480', imgModalDesc: '' })\" class=\"cursor-pointer\">\r\n <img alt=\"Placeholder\" class=\"object-fit w-full\" src=https://www.creative-tim.com/"https:////picsum.photos//640//480/">/r/n <\/a>\r\n <\/div>\r\n <\/div>\r\n \r\n <div class=\"w-1\/6 px-2\">\r\n <div class=\"bg-gray-400\">\r\n <a @click=\"$dispatch('img-modal', { imgModalSrc: 'https:\/\/picsum.photos\/640\/480', imgModalDesc: '' })\" class=\"cursor-pointer\">\r\n <img alt=\"Placeholder\" class=\"object-fit w-full\" src=https://www.creative-tim.com/"https:////picsum.photos//640//480/">/r/n <\/a>\r\n <\/div>\r\n <\/div>\r\n <div class=\"w-1\/6 px-2\">\r\n <div class=\"bg-gray-400\">\r\n <a @click=\"$dispatch('img-modal', { imgModalSrc: 'https:\/\/picsum.photos\/640\/480', imgModalDesc: '' })\" class=\"cursor-pointer\">\r\n <img alt=\"Placeholder\" class=\"object-fit w-full\" src=https://www.creative-tim.com/"https:////picsum.photos//640//480/">/r/n <\/a>\r\n <\/div>\r\n <\/div>\r\n <div class=\"w-1\/6 px-2\">\r\n <div class=\"bg-gray-400\">\r\n <a @click=\"$dispatch('img-modal', { imgModalSrc: 'https:\/\/picsum.photos\/640\/480', imgModalDesc: 'This one has description' })\" class=\"cursor-pointer\">\r\n <img alt=\"Placeholder\" class=\"object-fit w-full\" src=https://www.creative-tim.com/"https:////picsum.photos//640//480/">/r/n <\/a>\r\n <\/div>\r\n <\/div>\r\n <div class=\"w-1\/6 px-2\">\r\n <div class=\"bg-gray-400\">\r\n <a @click=\"$dispatch('img-modal', { imgModalSrc: 'https:\/\/picsum.photos\/640\/480', imgModalDesc: '' })\" class=\"cursor-pointer\">\r\n <img alt=\"Placeholder\" class=\"object-fit w-full\" src=https://www.creative-tim.com/"https:////picsum.photos//640//480/">/r/n <\/a>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n<\/body>\r\n<\/html>","author_type":"App\\User","author_id":941,"collection_id":null,"fork_id":null,"votes":23,"score":"4.6","visits":37098,"popularity":3487,"slug":"alpinejs-tailwindcss-lightbox-modal","approved":1,"created_at":"2020-07-23T12:52:26.000000Z","updated_at":"2024-08-29T08:21:06.000000Z","downloads":643,"code_views":10859,"center":true,"notified":0,"premium":0,"tailwind_config":null,"type":"component","css":"https:\/\/unpkg.com\/tailwindcss@1.9.6\/dist\/tailwind.min.css","should_tweet":1,"media":[{"id":8618,"model_type":"App\\Component","model_id":582,"collection_name":"preview","name":"temp42626","file_name":"temp42626.png","mime_type":"image\/png","disk":"public","size":110390,"manipulations":[],"custom_properties":[],"responsive_images":{"media_library_original":{"urls":["temp42626___media_library_original_1280_957.png","temp42626___media_library_original_1070_800.png","temp42626___media_library_original_896_670.png","temp42626___media_library_original_749_560.png","temp42626___media_library_original_627_469.png","temp42626___media_library_original_524_392.png","temp42626___media_library_original_439_328.png"],"base64svg":"data:image\/svg+xml;base64,PCFET0NUWVBFIHN2ZyBQVUJMSUMgIi0vL1czQy8vRFREIFNWRyAxLjEvL0VOIiAiaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkIj4KPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHhtbDpzcGFjZT0icHJlc2VydmUiIHg9IjAiCiB5PSIwIiB2aWV3Qm94PSIwIDAgMTI4MCA5NTciPgoJPGltYWdlIHdpZHRoPSIxMjgwIiBoZWlnaHQ9Ijk1NyIgeGxpbms6aHJlZj0iZGF0YTppbWFnZS9qcGVnO2Jhc2U2NCwvOWovNEFBUVNrWkpSZ0FCQVFFQVlBQmdBQUQvL2dBN1ExSkZRVlJQVWpvZ1oyUXRhbkJsWnlCMk1TNHdJQ2gxYzJsdVp5QkpTa2NnU2xCRlJ5QjJPREFwTENCeGRXRnNhWFI1SUQwZ09UQUsvOXNBUXdBREFnSURBZ0lEQXdNREJBTURCQVVJQlFVRUJBVUtCd2NHQ0F3S0RBd0xDZ3NMRFE0U0VBME9FUTRMQ3hBV0VCRVRGQlVWRlF3UEZ4Z1dGQmdTRkJVVS85c0FRd0VEQkFRRkJBVUpCUVVKRkEwTERSUVVGQlFVRkJRVUZCUVVGQlFVRkJRVUZCUVVGQlFVRkJRVUZCUVVGQlFVRkJRVUZCUVVGQlFVRkJRVUZCUVVGQlFVLzhBQUVRZ0FHQUFnQXdFUkFBSVJBUU1SQWYvRUFCOEFBQUVGQVFFQkFRRUJBQUFBQUFBQUFBQUJBZ01FQlFZSENBa0tDLy9FQUxVUUFBSUJBd01DQkFNRkJRUUVBQUFCZlFFQ0F3QUVFUVVTSVRGQkJoTlJZUWNpY1JReWdaR2hDQ05Dc2NFVlV0SHdKRE5pY29JSkNoWVhHQmthSlNZbktDa3FORFUyTnpnNU9rTkVSVVpIU0VsS1UxUlZWbGRZV1ZwalpHVm1aMmhwYW5OMGRYWjNlSGw2ZzRTRmhvZUlpWXFTazVTVmxwZVltWnFpbzZTbHBxZW9xYXF5czdTMXRyZTR1YnJDdzhURnhzZkl5Y3JTMDlUVjF0ZlkyZHJoNHVQazVlYm42T25xOGZMejlQWDI5L2o1K3YvRUFCOEJBQU1CQVFFQkFRRUJBUUVBQUFBQUFBQUJBZ01FQlFZSENBa0tDLy9FQUxVUkFBSUJBZ1FFQXdRSEJRUUVBQUVDZHdBQkFnTVJCQVVoTVFZU1FWRUhZWEVUSWpLQkNCUkNrYUd4d1Frak0xTHdGV0p5MFFvV0pEVGhKZkVYR0JrYUppY29LU28xTmpjNE9UcERSRVZHUjBoSlNsTlVWVlpYV0ZsYVkyUmxabWRvYVdwemRIVjJkM2g1ZW9LRGhJV0doNGlKaXBLVGxKV1dsNWlabXFLanBLV21wNmlwcXJLenRMVzJ0N2k1dXNMRHhNWEd4OGpKeXRMVDFOWFcxOWpaMnVMajVPWG01K2pwNnZMejlQWDI5L2o1K3YvYUFBd0RBUUFDRVFNUkFEOEEvUnE3MXExc1RpZVpZei90R3ZSYlNPQkp2WXJmOEpWcHYvUDFILzMxUzVrUGxmWVArRXEwMy9uNmovNzZvNWtIS3l4YWEzYVhyN1laa2tQb0RUVWt4Tk5ITWVML0FBSC9BTUpOSXJlZThXUDdwckdkTG42bTFPcHlkRG1qOEZjNS93Qk5sLzc2ckw2dSs1cjlZOGcvNFVyMS93Qk5sNS8ycVBxNzdqK3NlUjBIaFQ0ZUh3NWQrZDlvZVRqb3hyV25TNUh1WTFLbk90anU4VjBHQVlvQU1VQUdLQVAvMlE9PSI+Cgk8L2ltYWdlPgo8L3N2Zz4="}},"order_column":8431,"created_at":"2023-02-02T14:38:10.000000Z","updated_at":"2023-02-02T14:38:13.000000Z","conversions_disk":"public","uuid":"7a6589e4-adac-4490-978b-ae5ea129f30c","generated_conversions":{"thumb":true,"ogimage":true},"original_url":"https:\/\/tailwindcomponents.com\/storage\/8618\/temp42626.png","preview_url":""}],"author":{"id":941,"name":"Apatrid","slug":"apatrid","bio":null,"avatar":"https:\/\/avatars0.githubusercontent.com\/u\/3986799?v=4","header":null,"created_at":"2020-07-23T12:48:41.000000Z","updated_at":"2020-07-23T12:48:41.000000Z"},"tags":[{"id":15,"name":{"en":"Alpinejs"},"description":"Explore our components examples built with Tailwind & Alpinejs. Use the snippets to preview and copy\/paste the code.","meta_description":"Explore our components examples built with Tailwind & Alpinejs. Use the snippets to preview and copy\/paste the code.","slug":{"en":"alpinejs"},"type":null,"order_column":1,"created_at":"2021-02-16T17:13:07.000000Z","updated_at":"2023-10-27T13:23:58.000000Z","pivot":{"taggable_type":"App\\Component","taggable_id":582,"tag_id":15}},{"id":10,"name":{"en":"Modals"},"description":"Choose from our extensive collection of responsive modals to create dialogs, popovers, light boxes, and so on. Show interactive information to your website users using these Tailwind snippets.","meta_description":"Choose from our extensive collection of responsive modals to create dialogs, popovers, light boxes, and so on.","slug":{"en":"modals"},"type":null,"order_column":8,"created_at":"2020-09-29T11:20:03.000000Z","updated_at":"2022-08-01T16:22:07.000000Z","pivot":{"taggable_type":"App\\Component","taggable_id":582,"tag_id":10}},{"id":5,"name":{"en":"Widget"},"description":"Check out our collection of 500+ widget examples. Use our snippets to preview the code and spend less time re-inventing the wheel.","meta_description":"Check out our collection of 500+ widget examples. Use our snippets to preview the code and spend less time re-inventing the wheel.","slug":{"en":"widget"},"type":null,"order_column":14,"created_at":"2019-07-04T08:20:17.000000Z","updated_at":"2022-08-01T16:16:36.000000Z","pivot":{"taggable_type":"App\\Component","taggable_id":582,"tag_id":5}}],"fork":null,"favorites":[{"id":3463,"name":"JosueOb","slug":"josueob","bio":null,"avatar":"https:\/\/avatars.githubusercontent.com\/u\/23491092?v=4","header":null,"created_at":"2021-05-18T04:26:58.000000Z","updated_at":"2021-05-18T04:26:58.000000Z","pivot":{"component_id":582,"user_id":3463}},{"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":582,"user_id":3317}},{"id":3604,"name":"chrisparks91","slug":"chrisparks91","bio":null,"avatar":"https:\/\/pbs.twimg.com\/profile_images\/1315772210536222721\/rKCSH-Rl_normal.jpg","header":null,"created_at":"2021-05-28T16:24:05.000000Z","updated_at":"2021-05-28T16:24:05.000000Z","pivot":{"component_id":582,"user_id":3604}},{"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","pivot":{"component_id":582,"user_id":3558}},{"id":3914,"name":"mikethetreeclimber","slug":"mikethetreeclimber","bio":null,"avatar":"https:\/\/avatars.githubusercontent.com\/u\/61130371?v=4","header":null,"created_at":"2021-06-17T23:46:19.000000Z","updated_at":"2021-06-17T23:46:19.000000Z","pivot":{"component_id":582,"user_id":3914}},{"id":4717,"name":"Salar Houshvand","slug":"salar-houshvand","bio":"Creator of https:\/\/www.penguinui.com | \r\nNC, USA","avatar":"https:\/\/avatars.githubusercontent.com\/u\/48919847?v=4","header":"\/storage\/headers\/Dsi3uwiuqKuaxvqV4LAf1NL4VZTV4bbN65X6tEbq.jpg","created_at":"2021-08-22T02:12:19.000000Z","updated_at":"2024-03-22T18:52:58.000000Z","pivot":{"component_id":582,"user_id":4717}},{"id":5192,"name":"CalvinMagezi","slug":"calvinmagezi","bio":null,"avatar":"https:\/\/avatars.githubusercontent.com\/u\/30309553?v=4","header":null,"created_at":"2021-09-27T06:33:09.000000Z","updated_at":"2021-09-27T06:33:09.000000Z","pivot":{"component_id":582,"user_id":5192}},{"id":4257,"name":"nkendrick101","slug":"nkendrick101","bio":null,"avatar":"https:\/\/avatars.githubusercontent.com\/u\/40567184?v=4","header":null,"created_at":"2021-07-15T17:31:18.000000Z","updated_at":"2021-07-15T17:31:18.000000Z","pivot":{"component_id":582,"user_id":4257}},{"id":5948,"name":"MattAppleton","slug":"mattappleton","bio":null,"avatar":"https:\/\/avatars.githubusercontent.com\/u\/6295710?v=4","header":null,"created_at":"2021-11-27T23:56:34.000000Z","updated_at":"2021-11-27T23:56:34.000000Z","pivot":{"component_id":582,"user_id":5948}},{"id":6419,"name":"cryptmx","slug":"cryptmx","bio":null,"avatar":"https:\/\/avatars.githubusercontent.com\/u\/85723980?v=4","header":null,"created_at":"2022-01-07T01:56:03.000000Z","updated_at":"2022-01-07T01:56:03.000000Z","pivot":{"component_id":582,"user_id":6419}},{"id":6666,"name":"xjkbro","slug":"xjkbro","bio":null,"avatar":"https:\/\/avatars.githubusercontent.com\/u\/27465691?v=4","header":null,"created_at":"2022-01-25T19:41:00.000000Z","updated_at":"2022-01-25T19:41:00.000000Z","pivot":{"component_id":582,"user_id":6666}},{"id":6695,"name":"Arijul Islam","slug":"arijul-islam","bio":null,"avatar":"https:\/\/www.gravatar.com\/avatar\/da91634e524611ff5f75e818755e9b92","header":null,"created_at":"2022-01-27T19:24:22.000000Z","updated_at":"2022-01-27T19:24:22.000000Z","pivot":{"component_id":582,"user_id":6695}},{"id":7504,"name":"TiemcoM","slug":"tiemcom","bio":null,"avatar":"https:\/\/avatars.githubusercontent.com\/u\/70142044?v=4","header":null,"created_at":"2022-04-13T08:04:41.000000Z","updated_at":"2022-04-13T08:04:41.000000Z","pivot":{"component_id":582,"user_id":7504}},{"id":1863,"name":"EgoistDeveloper","slug":"egoistdeveloper","bio":"Converting HTML tailwind templates to SASS use this tool \ud83d\udc49 https:\/\/egoistdeveloper.github.io\/twcss-to-sass-playground \ud83c\udf89 see my all components at here https:\/\/github.com\/EgoistDeveloper\/my-tailwind-components","avatar":"https:\/\/avatars0.githubusercontent.com\/u\/17010054?v=4","header":null,"created_at":"2020-12-30T23:41:30.000000Z","updated_at":"2022-09-05T21:16:39.000000Z","pivot":{"component_id":582,"user_id":1863}},{"id":6940,"name":"123ApplePie","slug":"123applepie","bio":null,"avatar":"https:\/\/avatars.githubusercontent.com\/u\/73269263?v=4","header":null,"created_at":"2022-02-21T13:49:46.000000Z","updated_at":"2022-02-21T13:49:46.000000Z","pivot":{"component_id":582,"user_id":6940}},{"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":582,"user_id":9406}},{"id":7039,"name":"l0gical","slug":"l0gical","bio":null,"avatar":"https:\/\/avatars.githubusercontent.com\/u\/10054799?v=4","header":null,"created_at":"2022-03-02T09:10:50.000000Z","updated_at":"2022-03-02T09:10:50.000000Z","pivot":{"component_id":582,"user_id":7039}},{"id":2786,"name":"chistel","slug":"chistel","bio":null,"avatar":"https:\/\/avatars.githubusercontent.com\/u\/46791424?v=4","header":null,"created_at":"2021-03-24T06:47:42.000000Z","updated_at":"2021-03-24T06:47:42.000000Z","pivot":{"component_id":582,"user_id":2786}},{"id":814,"name":"Pace","slug":"pace","bio":"Masih Newbie","avatar":"https:\/\/avatars0.githubusercontent.com\/u\/41967704?v=4","header":null,"created_at":"2020-06-15T23:50:29.000000Z","updated_at":"2023-02-17T21:15:38.000000Z","pivot":{"component_id":582,"user_id":814}},{"id":12282,"name":"FengZeming","slug":"fengzeming","bio":null,"avatar":"https:\/\/avatars.githubusercontent.com\/u\/12960884?v=4","header":null,"created_at":"2023-05-09T02:31:21.000000Z","updated_at":"2023-05-09T02:31:21.000000Z","pivot":{"component_id":582,"user_id":12282}}]}" :edit="false"> Full screen Preview