Bootdey

File Images

Ready-to-use File Images 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">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>File Images - Tailwind CSS</title>
    <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-gray-100 pt-5">
    <div class="container mx-auto px-4">
        <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
            <!-- Image Card 1 -->
            <div class="bg-white rounded-lg shadow-sm overflow-hidden group">
                <a href="#" class="block relative">
                    <div class="absolute top-2.5 right-2.5 opacity-0 group-hover:opacity-100 transition-opacity duration-200 z-10">
                        <button type="button" class="bg-red-500 hover:bg-red-600 text-white p-2 rounded shadow-lg">
                            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/>
                            </svg>
                        </button>
                    </div>
                    <div class="h-44 overflow-hidden bg-cover bg-top">
                        <img src="https://www.bootdey.com/image/280x280/87CEFA/000000" alt="img" class="w-full h-full object-cover">
                    </div>
                    <div class="border-t border-gray-100 p-2.5">
                        <p class="text-sm text-gray-600 mb-0">img21545ds.jpg</p>
                        <small class="text-xs text-gray-500">Size: 2MB <span class="float-right">Dec 11, 2017</span></small>
                    </div>
                </a>
            </div>

            <!-- Image Card 2 -->
            <div class="bg-white rounded-lg shadow-sm overflow-hidden group">
                <a href="#" class="block relative">
                    <div class="absolute top-2.5 right-2.5 opacity-0 group-hover:opacity-100 transition-opacity duration-200 z-10">
                        <button type="button" class="bg-red-500 hover:bg-red-600 text-white p-2 rounded shadow-lg">
                            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/>
                            </svg>
                        </button>
                    </div>
                    <div class="h-44 overflow-hidden bg-cover bg-top">
                        <img src="https://www.bootdey.com/image/280x280/FF69B4/000000" alt="img" class="w-full h-full object-cover">
                    </div>
                    <div class="border-t border-gray-100 p-2.5">
                        <p class="text-sm text-gray-600 mb-0">img21545ds.jpg</p>
                        <small class="text-xs text-gray-500">Size: 2MB <span class="float-right">Dec 11, 2017</span></small>
                    </div>
                </a>
            </div>

            <!-- Image Card 3 -->
            <div class="bg-white rounded-lg shadow-sm overflow-hidden group">
                <a href="#" class="block relative">
                    <div class="absolute top-2.5 right-2.5 opacity-0 group-hover:opacity-100 transition-opacity duration-200 z-10">
                        <button type="button" class="bg-red-500 hover:bg-red-600 text-white p-2 rounded shadow-lg">
                            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/>
                            </svg>
                        </button>
                    </div>
                    <div class="h-44 overflow-hidden bg-cover bg-top">
                        <img src="https://www.bootdey.com/image/280x280/FFA07A/000000" alt="img" class="w-full h-full object-cover">
                    </div>
                    <div class="border-t border-gray-100 p-2.5">
                        <p class="text-sm text-gray-600 mb-0">img21545ds.jpg</p>
                        <small class="text-xs text-gray-500">Size: 2MB <span class="float-right">Dec 11, 2017</span></small>
                    </div>
                </a>
            </div>

            <!-- Image Card 4 -->
            <div class="bg-white rounded-lg shadow-sm overflow-hidden group">
                <a href="#" class="block relative">
                    <div class="absolute top-2.5 right-2.5 opacity-0 group-hover:opacity-100 transition-opacity duration-200 z-10">
                        <button type="button" class="bg-red-500 hover:bg-red-600 text-white p-2 rounded shadow-lg">
                            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/>
                            </svg>
                        </button>
                    </div>
                    <div class="h-44 overflow-hidden bg-cover bg-top">
                        <img src="https://www.bootdey.com/image/280x280/B0C4DE/000000" alt="img" class="w-full h-full object-cover">
                    </div>
                    <div class="border-t border-gray-100 p-2.5">
                        <p class="text-sm text-gray-600 mb-0">img21545ds.jpg</p>
                        <small class="text-xs text-gray-500">Size: 2MB <span class="float-right">Dec 11, 2017</span></small>
                    </div>
                </a>
            </div>

            <!-- Image Card 5 -->
            <div class="bg-white rounded-lg shadow-sm overflow-hidden group">
                <a href="#" class="block relative">
                    <div class="absolute top-2.5 right-2.5 opacity-0 group-hover:opacity-100 transition-opacity duration-200 z-10">
                        <button type="button" class="bg-red-500 hover:bg-red-600 text-white p-2 rounded shadow-lg">
                            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/>
                            </svg>
                        </button>
                    </div>
                    <div class="h-44 overflow-hidden bg-cover bg-top">
                        <img src="https://www.bootdey.com/image/280x280/9370DB/000000" alt="img" class="w-full h-full object-cover">
                    </div>
                    <div class="border-t border-gray-100 p-2.5">
                        <p class="text-sm text-gray-600 mb-0">img21545ds.jpg</p>
                        <small class="text-xs text-gray-500">Size: 2MB <span class="float-right">Dec 11, 2017</span></small>
                    </div>
                </a>
            </div>

            <!-- Image Card 6 -->
            <div class="bg-white rounded-lg shadow-sm overflow-hidden group">
                <a href="#" class="block relative">
                    <div class="absolute top-2.5 right-2.5 opacity-0 group-hover:opacity-100 transition-opacity duration-200 z-10">
                        <button type="button" class="bg-red-500 hover:bg-red-600 text-white p-2 rounded shadow-lg">
                            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/>
                            </svg>
                        </button>
                    </div>
                    <div class="h-44 overflow-hidden bg-cover bg-top">
                        <img src="https://www.bootdey.com/image/280x280/48D1CC/000000" alt="img" class="w-full h-full object-cover">
                    </div>
                    <div class="border-t border-gray-100 p-2.5">
                        <p class="text-sm text-gray-600 mb-0">img21545ds.jpg</p>
                        <small class="text-xs text-gray-500">Size: 2MB <span class="float-right">Dec 11, 2017</span></small>
                    </div>
                </a>
            </div>

            <!-- Image Card 7 -->
            <div class="bg-white rounded-lg shadow-sm overflow-hidden group">
                <a href="#" class="block relative">
                    <div class="absolute top-2.5 right-2.5 opacity-0 group-hover:opacity-100 transition-opacity duration-200 z-10">
                        <button type="button" class="bg-red-500 hover:bg-red-600 text-white p-2 rounded shadow-lg">
                            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/>
                            </svg>
                        </button>
                    </div>
                    <div class="h-44 overflow-hidden bg-cover bg-top">
                        <img src="https://www.bootdey.com/image/280x280/DA70D6/000000" alt="img" class="w-full h-full object-cover">
                    </div>
                    <div class="border-t border-gray-100 p-2.5">
                        <p class="text-sm text-gray-600 mb-0">img21545ds.jpg</p>
                        <small class="text-xs text-gray-500">Size: 2MB <span class="float-right">Dec 11, 2017</span></small>
                    </div>
                </a>
            </div>

            <!-- Image Card 8 -->
            <div class="bg-white rounded-lg shadow-sm overflow-hidden group">
                <a href="#" class="block relative">
                    <div class="absolute top-2.5 right-2.5 opacity-0 group-hover:opacity-100 transition-opacity duration-200 z-10">
                        <button type="button" class="bg-red-500 hover:bg-red-600 text-white p-2 rounded shadow-lg">
                            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/>
                            </svg>
                        </button>
                    </div>
                    <div class="h-44 overflow-hidden bg-cover bg-top">
                        <img src="https://www.bootdey.com/image/280x280/DB7093/000000" alt="img" class="w-full h-full object-cover">
                    </div>
                    <div class="border-t border-gray-100 p-2.5">
                        <p class="text-sm text-gray-600 mb-0">img21545ds.jpg</p>
                        <small class="text-xs text-gray-500">Size: 2MB <span class="float-right">Dec 11, 2017</span></small>
                    </div>
                </a>
            </div>

            <!-- Image Card 9 -->
            <div class="bg-white rounded-lg shadow-sm overflow-hidden group">
                <a href="#" class="block relative">
                    <div class="absolute top-2.5 right-2.5 opacity-0 group-hover:opacity-100 transition-opacity duration-200 z-10">
                        <button type="button" class="bg-red-500 hover:bg-red-600 text-white p-2 rounded shadow-lg">
                            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/>
                            </svg>
                        </button>
                    </div>
                    <div class="h-44 overflow-hidden bg-cover bg-top">
                        <img src="https://www.bootdey.com/image/280x280/DDA0DD/000000" alt="img" class="w-full h-full object-cover">
                    </div>
                    <div class="border-t border-gray-100 p-2.5">
                        <p class="text-sm text-gray-600 mb-0">img21545ds.jpg</p>
                        <small class="text-xs text-gray-500">Size: 2MB <span class="float-right">Dec 11, 2017</span></small>
                    </div>
                </a>
            </div>

            <!-- Image Card 10 -->
            <div class="bg-white rounded-lg shadow-sm overflow-hidden group">
                <a href="#" class="block relative">
                    <div class="absolute top-2.5 right-2.5 opacity-0 group-hover:opacity-100 transition-opacity duration-200 z-10">
                        <button type="button" class="bg-red-500 hover:bg-red-600 text-white p-2 rounded shadow-lg">
                            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/>
                            </svg>
                        </button>
                    </div>
                    <div class="h-44 overflow-hidden bg-cover bg-top">
                        <img src="https://www.bootdey.com/image/280x280/FFC0CB/000000" alt="img" class="w-full h-full object-cover">
                    </div>
                    <div class="border-t border-gray-100 p-2.5">
                        <p class="text-sm text-gray-600 mb-0">img21545ds.jpg</p>
                        <small class="text-xs text-gray-500">Size: 2MB <span class="float-right">Dec 11, 2017</span></small>
                    </div>
                </a>
            </div>

            <!-- Image Card 11 -->
            <div class="bg-white rounded-lg shadow-sm overflow-hidden group">
                <a href="#" class="block relative">
                    <div class="absolute top-2.5 right-2.5 opacity-0 group-hover:opacity-100 transition-opacity duration-200 z-10">
                        <button type="button" class="bg-red-500 hover:bg-red-600 text-white p-2 rounded shadow-lg">
                            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/>
                            </svg>
                        </button>
                    </div>
                    <div class="h-44 overflow-hidden bg-cover bg-top">
                        <img src="https://www.bootdey.com/image/280x280/FA8072/000000" alt="img" class="w-full h-full object-cover">
                    </div>
                    <div class="border-t border-gray-100 p-2.5">
                        <p class="text-sm text-gray-600 mb-0">img21545ds.jpg</p>
                        <small class="text-xs text-gray-500">Size: 2MB <span class="float-right">Dec 11, 2017</span></small>
                    </div>
                </a>
            </div>

            <!-- Image Card 12 -->
            <div class="bg-white rounded-lg shadow-sm overflow-hidden group">
                <a href="#" class="block relative">
                    <div class="absolute top-2.5 right-2.5 opacity-0 group-hover:opacity-100 transition-opacity duration-200 z-10">
                        <button type="button" class="bg-red-500 hover:bg-red-600 text-white p-2 rounded shadow-lg">
                            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/>
                            </svg>
                        </button>
                    </div>
                    <div class="h-44 overflow-hidden bg-cover bg-top">
                        <img src="https://www.bootdey.com/image/280x280/4682B4/000000" alt="img" class="w-full h-full object-cover">
                    </div>
                    <div class="border-t border-gray-100 p-2.5">
                        <p class="text-sm text-gray-600 mb-0">img21545ds.jpg</p>
                        <small class="text-xs text-gray-500">Size: 2MB <span class="float-right">Dec 11, 2017</span></small>
                    </div>
                </a>
            </div>

            <!-- Image Card 13 -->
            <div class="bg-white rounded-lg shadow-sm overflow-hidden group">
                <a href="#" class="block relative">
                    <div class="absolute top-2.5 right-2.5 opacity-0 group-hover:opacity-100 transition-opacity duration-200 z-10">
                        <button type="button" class="bg-red-500 hover:bg-red-600 text-white p-2 rounded shadow-lg">
                            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/>
                            </svg>
                        </button>
                    </div>
                    <div class="h-44 overflow-hidden bg-cover bg-top">
                        <img src="https://www.bootdey.com/image/280x280/40E0D0/000000" alt="img" class="w-full h-full object-cover">
                    </div>
                    <div class="border-t border-gray-100 p-2.5">
                        <p class="text-sm text-gray-600 mb-0">img21545ds.jpg</p>
                        <small class="text-xs text-gray-500">Size: 2MB <span class="float-right">Dec 11, 2017</span></small>
                    </div>
                </a>
            </div>

            <!-- Image Card 14 -->
            <div class="bg-white rounded-lg shadow-sm overflow-hidden group">
                <a href="#" class="block relative">
                    <div class="absolute top-2.5 right-2.5 opacity-0 group-hover:opacity-100 transition-opacity duration-200 z-10">
                        <button type="button" class="bg-red-500 hover:bg-red-600 text-white p-2 rounded shadow-lg">
                            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/>
                            </svg>
                        </button>
                    </div>
                    <div class="h-44 overflow-hidden bg-cover bg-top">
                        <img src="https://www.bootdey.com/image/280x280/87CEFA/000000" alt="img" class="w-full h-full object-cover">
                    </div>
                    <div class="border-t border-gray-100 p-2.5">
                        <p class="text-sm text-gray-600 mb-0">img21545ds.jpg</p>
                        <small class="text-xs text-gray-500">Size: 2MB <span class="float-right">Dec 11, 2017</span></small>
                    </div>
                </a>
            </div>

            <!-- Image Card 15 -->
            <div class="bg-white rounded-lg shadow-sm overflow-hidden group">
                <a href="#" class="block relative">
                    <div class="absolute top-2.5 right-2.5 opacity-0 group-hover:opacity-100 transition-opacity duration-200 z-10">
                        <button type="button" class="bg-red-500 hover:bg-red-600 text-white p-2 rounded shadow-lg">
                            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/>
                            </svg>
                        </button>
                    </div>
                    <div class="h-44 overflow-hidden bg-cover bg-top">
                        <img src="https://www.bootdey.com/image/280x280/FA8072/000000" alt="img" class="w-full h-full object-cover">
                    </div>
                    <div class="border-t border-gray-100 p-2.5">
                        <p class="text-sm text-gray-600 mb-0">img21545ds.jpg</p>
                        <small class="text-xs text-gray-500">Size: 2MB <span class="float-right">Dec 11, 2017</span></small>
                    </div>
                </a>
            </div>

            <!-- Image Card 16 -->
            <div class="bg-white rounded-lg shadow-sm overflow-hidden group">
                <a href="#" class="block relative">
                    <div class="absolute top-2.5 right-2.5 opacity-0 group-hover:opacity-100 transition-opacity duration-200 z-10">
                        <button type="button" class="bg-red-500 hover:bg-red-600 text-white p-2 rounded shadow-lg">
                            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/>
                            </svg>
                        </button>
                    </div>
                    <div class="h-44 overflow-hidden bg-cover bg-top">
                        <img src="https://www.bootdey.com/image/280x280/87CEFA/000000" alt="img" class="w-full h-full object-cover">
                    </div>
                    <div class="border-t border-gray-100 p-2.5">
                        <p class="text-sm text-gray-600 mb-0">img21545ds.jpg</p>
                        <small class="text-xs text-gray-500">Size: 2MB <span class="float-right">Dec 11, 2017</span></small>
                    </div>
                </a>
            </div>
        </div>
    </div>
</body>
</html>