Bootdey

collage gallery

Ready-to-use collage gallery using Tailwind utility classes. No dependencies, no setup—just grab the code and ship.

Preview HTML

HTML code

This is the html code used to create this tailwind snippet

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Collage Gallery - Tailwind CSS</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-gray-100 min-h-screen pt-[20px] font-light">

<div class="container mx-auto px-4">
    <div class="flex flex-wrap -mx-4">
        
        <div class="w-full md:w-1/3 px-4 mb-[30px]">
            <div class="bg-white rounded-[2px] shadow-[0_1px_2px_rgba(0,0,0,0.07)] overflow-hidden">
                <div class="grid grid-cols-12 border-white">
                    
                    <div class="col-span-4 h-[100px] border border-white relative group cursor-pointer bg-[url('https://www.bootdey.com/image/400x200/8A2BE2/000000')] bg-no-repeat bg-center bg-cover">
                        <div class="absolute inset-0 flex items-center justify-center bg-black/0 text-transparent group-hover:bg-black/50 group-hover:text-white transition-all duration-300 text-[13px]">
                            view gallery
                        </div>
                    </div>

                    <div class="col-span-8 h-[100px] border border-white relative group cursor-pointer bg-[url('https://www.bootdey.com/image/400x200/6495ED/000000')] bg-no-repeat bg-center bg-cover">
                        <div class="absolute inset-0 flex items-center justify-center bg-black/0 text-transparent group-hover:bg-black/50 group-hover:text-white transition-all duration-300 text-[13px]">
                            view gallery
                        </div>
                    </div>

                    <div class="col-span-4 h-[100px] border border-white relative group cursor-pointer bg-[url('https://www.bootdey.com/image/400x200/5F9EA0/000000')] bg-no-repeat bg-center bg-cover">
                        <div class="absolute inset-0 flex items-center justify-center bg-black/0 text-transparent group-hover:bg-black/50 group-hover:text-white transition-all duration-300 text-[13px]">
                            view gallery
                        </div>
                    </div>

                    <div class="col-span-8 h-[100px] border border-white relative group cursor-pointer bg-[url('https://www.bootdey.com/image/400x200/FF7F50/000000')] bg-no-repeat bg-center bg-cover">
                        <div class="absolute inset-0 flex items-center justify-center bg-black/0 text-transparent group-hover:bg-black/50 group-hover:text-white transition-all duration-300 text-[13px]">
                            view gallery
                        </div>
                    </div>

                    <div class="col-span-4 h-[100px] border border-white relative group cursor-pointer bg-[url('https://www.bootdey.com/image/400x200/008B8B/000000')] bg-no-repeat bg-center bg-cover">
                        <div class="absolute inset-0 flex items-center justify-center bg-black/0 text-transparent group-hover:bg-black/50 group-hover:text-white transition-all duration-300 text-[13px]">
                            view gallery
                        </div>
                    </div>

                    <div class="col-span-4 h-[100px] border border-white relative group cursor-pointer bg-[url('https://www.bootdey.com/image/400x200/DC143C/000000')] bg-no-repeat bg-center bg-cover">
                        <div class="absolute inset-0 flex items-center justify-center bg-black/0 text-transparent group-hover:bg-black/50 group-hover:text-white transition-all duration-300 text-[13px]">
                            view gallery
                        </div>
                    </div>

                    <div class="col-span-4 h-[100px] border border-white relative group cursor-pointer bg-[url('https://www.bootdey.com/image/400x200/FF8C00/000000')] bg-no-repeat bg-center bg-cover">
                        <div class="absolute inset-0 flex items-center justify-center bg-black/0 text-transparent group-hover:bg-black/50 group-hover:text-white transition-all duration-300 text-[13px]">
                            view gallery
                        </div>
                    </div>

                    <div class="col-span-8 h-[100px] border border-white relative group cursor-pointer bg-[url('https://www.bootdey.com/image/400x200/00BFFF/000000')] bg-no-repeat bg-center bg-cover">
                        <div class="absolute inset-0 flex items-center justify-center bg-black/0 text-transparent group-hover:bg-black/50 group-hover:text-white transition-all duration-300 text-[13px]">
                            view gallery
                        </div>
                    </div>

                    <div class="col-span-4 h-[100px] border border-white relative group cursor-pointer bg-[url('https://www.bootdey.com/image/400x200/008000/000000')] bg-no-repeat bg-center bg-cover">
                        <div class="absolute inset-0 flex items-center justify-center bg-black/0 text-transparent group-hover:bg-black/50 group-hover:text-white transition-all duration-300 text-[13px]">
                            view gallery
                        </div>
                    </div>

                    <div class="col-span-8 h-[100px] border border-white relative group cursor-pointer bg-[url('https://www.bootdey.com/image/400x200/FF69B4/000000')] bg-no-repeat bg-center bg-cover">
                        <div class="absolute inset-0 flex items-center justify-center bg-black/0 text-transparent group-hover:bg-black/50 group-hover:text-white transition-all duration-300 text-[13px]">
                            view gallery
                        </div>
                    </div>

                    <div class="col-span-4 h-[100px] border border-white bg-[#29c7ca] text-white flex flex-col items-center justify-center">
                        <div class="text-[25px] font-light">42+</div>
                        <div class="text-[15px] font-light">Pictures</div>
                    </div>
                </div>
            </div>
        </div>

        <div class="w-full md:w-1/3 px-4 mb-[30px]">
            <div class="bg-white rounded-[2px] shadow-[0_1px_2px_rgba(0,0,0,0.07)] overflow-hidden">
                <div class="grid grid-cols-12">
                    <div class="col-span-4 h-[100px] border border-white relative group cursor-pointer bg-[url('https://www.bootdey.com/image/400x200/FFF0F5/000000')] bg-no-repeat bg-center bg-cover">
                        <div class="absolute inset-0 flex items-center justify-center bg-black/0 text-transparent group-hover:bg-black/50 group-hover:text-white transition-all duration-300 text-[13px]">
                            view gallery
                        </div>
                    </div>
                    <div class="col-span-8 h-[100px] border border-white relative group cursor-pointer bg-[url('https://www.bootdey.com/image/400x200/ADD8E6/000000')] bg-no-repeat bg-center bg-cover">
                        <div class="absolute inset-0 flex items-center justify-center bg-black/0 text-transparent group-hover:bg-black/50 group-hover:text-white transition-all duration-300 text-[13px]">
                            view gallery
                        </div>
                    </div>
                    <div class="col-span-4 h-[100px] border border-white relative group cursor-pointer bg-[url('https://www.bootdey.com/image/400x200/F08080/000000')] bg-no-repeat bg-center bg-cover">
                        <div class="absolute inset-0 flex items-center justify-center bg-black/0 text-transparent group-hover:bg-black/50 group-hover:text-white transition-all duration-300 text-[13px]">
                            view gallery
                        </div>
                    </div>
                    <div class="col-span-4 h-[100px] border border-white relative group cursor-pointer bg-[url('https://www.bootdey.com/image/400x200/FFB6C1/000000')] bg-no-repeat bg-center bg-cover">
                        <div class="absolute inset-0 flex items-center justify-center bg-black/0 text-transparent group-hover:bg-black/50 group-hover:text-white transition-all duration-300 text-[13px]">
                            view gallery
                        </div>
                    </div>
                    <div class="col-span-4 h-[100px] border border-white relative group cursor-pointer bg-[url('https://www.bootdey.com/image/400x200/20B2AA/000000')] bg-no-repeat bg-center bg-cover">
                        <div class="absolute inset-0 flex items-center justify-center bg-black/0 text-transparent group-hover:bg-black/50 group-hover:text-white transition-all duration-300 text-[13px]">
                            view gallery
                        </div>
                    </div>
                    <div class="col-span-8 h-[100px] border border-white relative group cursor-pointer bg-[url('https://www.bootdey.com/image/400x200/B0C4DE/000000')] bg-no-repeat bg-center bg-cover">
                        <div class="absolute inset-0 flex items-center justify-center bg-black/0 text-transparent group-hover:bg-black/50 group-hover:text-white transition-all duration-300 text-[13px]">
                            view gallery
                        </div>
                    </div>
                    <div class="col-span-4 h-[100px] border border-white bg-[#29c7ca] text-white flex flex-col items-center justify-center">
                        <div class="text-[25px] font-light">42+</div>
                        <div class="text-[15px] font-light">Pictures</div>
                    </div>
                </div>
            </div>
        </div>

    </div>
</div>

</body>
</html>