Bootdey

File manager page

Ready-to-use File manager page 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 Manager - 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="flex flex-col md:flex-row gap-6">
            <!-- Left Sidebar -->
            <div class="md:w-1/4">
                <div class="bg-white shadow-sm border border-gray-200 rounded">
                    <div class="p-5">
                        <div class="mb-4">
                            <h5 class="text-xs font-semibold uppercase text-gray-700 mb-3">Show:</h5>
                            <a href="#" class="inline-block text-xs text-gray-600 mr-3 mb-1 underline">All</a>
                            <a href="#" class="inline-block text-xs text-gray-600 mr-3 mb-1 hover:underline">Documents</a>
                            <a href="#" class="inline-block text-xs text-gray-600 mr-3 mb-1 hover:underline">Audio</a>
                            <a href="#" class="inline-block text-xs text-gray-600 mr-3 mb-1 hover:underline">Images</a>
                            <div class="border-t border-dashed border-gray-300 my-4"></div>
                            <button class="w-full bg-blue-600 hover:bg-blue-700 text-white font-medium py-2 px-4 rounded">Upload Files</button>
                            <div class="border-t border-dashed border-gray-300 my-4"></div>
                            <h5 class="text-xs font-semibold uppercase text-gray-700 mb-3">Folders</h5>
                            <ul class="list-none p-0 m-0">
                                <li class="border-b border-gray-200">
                                    <a href="#" class="flex items-center text-gray-600 py-2 hover:text-gray-800">
                                        <svg class="w-4 h-4 mr-2 text-gray-700" fill="currentColor" viewBox="0 0 20 20">
                                            <path d="M2 6a2 2 0 012-2h5l2 2h5a2 2 0 012 2v6a2 2 0 01-2 2H4a2 2 0 01-2-2V6z"/>
                                        </svg>
                                        Files
                                    </a>
                                </li>
                                <li class="border-b border-gray-200">
                                    <a href="#" class="flex items-center text-gray-600 py-2 hover:text-gray-800">
                                        <svg class="w-4 h-4 mr-2 text-gray-700" fill="currentColor" viewBox="0 0 20 20">
                                            <path d="M2 6a2 2 0 012-2h5l2 2h5a2 2 0 012 2v6a2 2 0 01-2 2H4a2 2 0 01-2-2V6z"/>
                                        </svg>
                                        Pictures
                                    </a>
                                </li>
                                <li class="border-b border-gray-200">
                                    <a href="#" class="flex items-center text-gray-600 py-2 hover:text-gray-800">
                                        <svg class="w-4 h-4 mr-2 text-gray-700" fill="currentColor" viewBox="0 0 20 20">
                                            <path d="M2 6a2 2 0 012-2h5l2 2h5a2 2 0 012 2v6a2 2 0 01-2 2H4a2 2 0 01-2-2V6z"/>
                                        </svg>
                                        Web pages
                                    </a>
                                </li>
                                <li class="border-b border-gray-200">
                                    <a href="#" class="flex items-center text-gray-600 py-2 hover:text-gray-800">
                                        <svg class="w-4 h-4 mr-2 text-gray-700" fill="currentColor" viewBox="0 0 20 20">
                                            <path d="M2 6a2 2 0 012-2h5l2 2h5a2 2 0 012 2v6a2 2 0 01-2 2H4a2 2 0 01-2-2V6z"/>
                                        </svg>
                                        Illustrations
                                    </a>
                                </li>
                                <li class="border-b border-gray-200">
                                    <a href="#" class="flex items-center text-gray-600 py-2 hover:text-gray-800">
                                        <svg class="w-4 h-4 mr-2 text-gray-700" fill="currentColor" viewBox="0 0 20 20">
                                            <path d="M2 6a2 2 0 012-2h5l2 2h5a2 2 0 012 2v6a2 2 0 01-2 2H4a2 2 0 01-2-2V6z"/>
                                        </svg>
                                        Films
                                    </a>
                                </li>
                                <li class="border-b border-gray-200">
                                    <a href="#" class="flex items-center text-gray-600 py-2 hover:text-gray-800">
                                        <svg class="w-4 h-4 mr-2 text-gray-700" fill="currentColor" viewBox="0 0 20 20">
                                            <path d="M2 6a2 2 0 012-2h5l2 2h5a2 2 0 012 2v6a2 2 0 01-2 2H4a2 2 0 01-2-2V6z"/>
                                        </svg>
                                        Books
                                    </a>
                                </li>
                            </ul>
                            <h5 class="text-xs font-semibold uppercase text-gray-700 mb-3 mt-5">Tags</h5>
                            <ul class="list-none p-0 m-0 flex flex-wrap gap-2">
                                <li>
                                    <a href="#" class="inline-block text-xs bg-gray-100 px-3 py-1.5 text-gray-700 rounded border border-gray-200 hover:bg-gray-200">Family</a>
                                </li>
                                <li>
                                    <a href="#" class="inline-block text-xs bg-gray-100 px-3 py-1.5 text-gray-700 rounded border border-gray-200 hover:bg-gray-200">Work</a>
                                </li>
                                <li>
                                    <a href="#" class="inline-block text-xs bg-gray-100 px-3 py-1.5 text-gray-700 rounded border border-gray-200 hover:bg-gray-200">Home</a>
                                </li>
                                <li>
                                    <a href="#" class="inline-block text-xs bg-gray-100 px-3 py-1.5 text-gray-700 rounded border border-gray-200 hover:bg-gray-200">Children</a>
                                </li>
                                <li>
                                    <a href="#" class="inline-block text-xs bg-gray-100 px-3 py-1.5 text-gray-700 rounded border border-gray-200 hover:bg-gray-200">Holidays</a>
                                </li>
                                <li>
                                    <a href="#" class="inline-block text-xs bg-gray-100 px-3 py-1.5 text-gray-700 rounded border border-gray-200 hover:bg-gray-200">Music</a>
                                </li>
                                <li>
                                    <a href="#" class="inline-block text-xs bg-gray-100 px-3 py-1.5 text-gray-700 rounded border border-gray-200 hover:bg-gray-200">Photography</a>
                                </li>
                                <li>
                                    <a href="#" class="inline-block text-xs bg-gray-100 px-3 py-1.5 text-gray-700 rounded border border-gray-200 hover:bg-gray-200">Film</a>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Right Content Area - File Grid -->
            <div class="md:w-3/4">
                <div class="flex flex-wrap -mx-2.5">
                    <!-- File Box 1 - Document -->
                    <div class="w-full sm:w-1/2 lg:w-1/3 px-2.5 mb-5">
                        <a href="#" class="block">
                            <div class="bg-white border border-gray-200 hover:shadow-md transition-shadow relative group">
                                <div class="absolute bottom-0 right-0 w-0 h-0 border-l-[12px] border-l-transparent border-b-[12px] border-b-gray-100 border-t-[12px] border-t-transparent border-r-[12px] border-r-gray-100"></div>
                                <div class="h-24 flex items-center justify-center p-4">
                                    <svg class="w-16 h-16 text-gray-300" fill="currentColor" viewBox="0 0 20 20">
                                        <path fill-rule="evenodd" d="M4 4a2 2 0 012-2h4.586A2 2 0 0112 2.586L15.414 6A2 2 0 0116 7.414V16a2 2 0 01-2 2H6a2 2 0 01-2-2V4z" clip-rule="evenodd"/>
                                    </svg>
                                </div>
                                <div class="bg-gray-50 border-t border-gray-200 p-2.5">
                                    <div class="text-sm font-medium text-gray-800">Document_2014.doc</div>
                                    <small class="text-xs text-gray-500">Added: Jan 11, 2014</small>
                                </div>
                            </div>
                        </a>
                    </div>

                    <!-- File Box 2 - Image -->
                    <div class="w-full sm:w-1/2 lg:w-1/3 px-2.5 mb-5">
                        <a href="#" class="block">
                            <div class="bg-white border border-gray-200 hover:shadow-md transition-shadow relative group">
                                <div class="absolute bottom-0 right-0 w-0 h-0 border-l-[12px] border-l-transparent border-b-[12px] border-b-gray-100 border-t-[12px] border-t-transparent border-r-[12px] border-r-gray-100"></div>
                                <div class="h-24 overflow-hidden">
                                    <img src="https://www.bootdey.com/image/400x300/87CEFA/000000" alt="Italy street" class="w-full h-full object-cover">
                                </div>
                                <div class="bg-gray-50 border-t border-gray-200 p-2.5">
                                    <div class="text-sm font-medium text-gray-800">Italy street.jpg</div>
                                    <small class="text-xs text-gray-500">Added: Jan 6, 2014</small>
                                </div>
                            </div>
                        </a>
                    </div>

                    <!-- File Box 3 - Image -->
                    <div class="w-full sm:w-1/2 lg:w-1/3 px-2.5 mb-5">
                        <a href="#" class="block">
                            <div class="bg-white border border-gray-200 hover:shadow-md transition-shadow relative group">
                                <div class="absolute bottom-0 right-0 w-0 h-0 border-l-[12px] border-l-transparent border-b-[12px] border-b-gray-100 border-t-[12px] border-t-transparent border-r-[12px] border-r-gray-100"></div>
                                <div class="h-24 overflow-hidden">
                                    <img src="https://www.bootdey.com/image/400x300/FF7F50/000000" alt="My feel" class="w-full h-full object-cover">
                                </div>
                                <div class="bg-gray-50 border-t border-gray-200 p-2.5">
                                    <div class="text-sm font-medium text-gray-800">My feel.png</div>
                                    <small class="text-xs text-gray-500">Added: Jan 7, 2014</small>
                                </div>
                            </div>
                        </a>
                    </div>

                    <!-- File Box 4 - Music -->
                    <div class="w-full sm:w-1/2 lg:w-1/3 px-2.5 mb-5">
                        <a href="#" class="block">
                            <div class="bg-white border border-gray-200 hover:shadow-md transition-shadow relative group">
                                <div class="absolute bottom-0 right-0 w-0 h-0 border-l-[12px] border-l-transparent border-b-[12px] border-b-gray-100 border-t-[12px] border-t-transparent border-r-[12px] border-r-gray-100"></div>
                                <div class="h-24 flex items-center justify-center p-4">
                                    <svg class="w-16 h-16 text-gray-300" fill="currentColor" viewBox="0 0 20 20">
                                        <path d="M18 3a1 1 0 00-1.196-.98l-10 2A1 1 0 006 5v9.114A4.369 4.369 0 005 14c-1.657 0-3 .895-3 2s1.343 2 3 2 3-.895 3-2V7.82l8-1.6v5.894A4.37 4.37 0 0015 12c-1.657 0-3 .895-3 2s1.343 2 3 2 3-.895 3-2V3z"/>
                                    </svg>
                                </div>
                                <div class="bg-gray-50 border-t border-gray-200 p-2.5">
                                    <div class="text-sm font-medium text-gray-800">Michal Jackson.mp3</div>
                                    <small class="text-xs text-gray-500">Added: Jan 22, 2014</small>
                                </div>
                            </div>
                        </a>
                    </div>

                    <!-- File Box 5 - Image -->
                    <div class="w-full sm:w-1/2 lg:w-1/3 px-2.5 mb-5">
                        <a href="#" class="block">
                            <div class="bg-white border border-gray-200 hover:shadow-md transition-shadow relative group">
                                <div class="absolute bottom-0 right-0 w-0 h-0 border-l-[12px] border-l-transparent border-b-[12px] border-b-gray-100 border-t-[12px] border-t-transparent border-r-[12px] border-r-gray-100"></div>
                                <div class="h-24 overflow-hidden">
                                    <img src="https://www.bootdey.com/image/400x300/FFB6C1/000000" alt="Document 2014" class="w-full h-full object-cover">
                                </div>
                                <div class="bg-gray-50 border-t border-gray-200 p-2.5">
                                    <div class="text-sm font-medium text-gray-800">Document_2014.doc</div>
                                    <small class="text-xs text-gray-500">Added: Fab 11, 2014</small>
                                </div>
                            </div>
                        </a>
                    </div>

                    <!-- File Box 6 - Video -->
                    <div class="w-full sm:w-1/2 lg:w-1/3 px-2.5 mb-5">
                        <a href="#" class="block">
                            <div class="bg-white border border-gray-200 hover:shadow-md transition-shadow relative group">
                                <div class="absolute bottom-0 right-0 w-0 h-0 border-l-[12px] border-l-transparent border-b-[12px] border-b-gray-100 border-t-[12px] border-t-transparent border-r-[12px] border-r-gray-100"></div>
                                <div class="h-24 flex items-center justify-center p-4">
                                    <svg class="w-16 h-16 text-gray-300" fill="currentColor" viewBox="0 0 20 20">
                                        <path d="M2 6a2 2 0 012-2h6a2 2 0 012 2v8a2 2 0 01-2 2H4a2 2 0 01-2-2V6zM14.553 7.106A1 1 0 0014 8v4a1 1 0 00.553.894l2 1A1 1 0 0018 13V7a1 1 0 00-1.447-.894l-2 1z"/>
                                    </svg>
                                </div>
                                <div class="bg-gray-50 border-t border-gray-200 p-2.5">
                                    <div class="text-sm font-medium text-gray-800">Monica's birthday.mpg4</div>
                                    <small class="text-xs text-gray-500">Added: Fab 18, 2014</small>
                                </div>
                            </div>
                        </a>
                    </div>

                    <!-- File Box 7 - Spreadsheet -->
                    <div class="w-full sm:w-1/2 lg:w-1/3 px-2.5 mb-5">
                        <a href="#" class="block">
                            <div class="bg-white border border-gray-200 hover:shadow-md transition-shadow relative group">
                                <div class="absolute bottom-0 right-0 w-0 h-0 border-l-[12px] border-l-transparent border-b-[12px] border-b-gray-100 border-t-[12px] border-t-transparent border-r-[12px] border-r-gray-100"></div>
                                <div class="h-24 flex items-center justify-center p-4">
                                    <svg class="w-16 h-16 text-gray-300" fill="currentColor" viewBox="0 0 20 20">
                                        <path d="M2 11a1 1 0 011-1h2a1 1 0 011 1v5a1 1 0 01-1 1H3a1 1 0 01-1-1v-5zM8 7a1 1 0 011-1h2a1 1 0 011 1v9a1 1 0 01-1 1H9a1 1 0 01-1-1V7zM14 4a1 1 0 011-1h2a1 1 0 011 1v12a1 1 0 01-1 1h-2a1 1 0 01-1-1V4z"/>
                                    </svg>
                                </div>
                                <div class="bg-gray-50 border-t border-gray-200 p-2.5">
                                    <div class="text-sm font-medium text-gray-800">Annual report 2014.xls</div>
                                    <small class="text-xs text-gray-500">Added: Fab 22, 2014</small>
                                </div>
                            </div>
                        </a>
                    </div>

                    <!-- File Box 8 - Document -->
                    <div class="w-full sm:w-1/2 lg:w-1/3 px-2.5 mb-5">
                        <a href="#" class="block">
                            <div class="bg-white border border-gray-200 hover:shadow-md transition-shadow relative group">
                                <div class="absolute bottom-0 right-0 w-0 h-0 border-l-[12px] border-l-transparent border-b-[12px] border-b-gray-100 border-t-[12px] border-t-transparent border-r-[12px] border-r-gray-100"></div>
                                <div class="h-24 flex items-center justify-center p-4">
                                    <svg class="w-16 h-16 text-gray-300" fill="currentColor" viewBox="0 0 20 20">
                                        <path fill-rule="evenodd" d="M4 4a2 2 0 012-2h4.586A2 2 0 0112 2.586L15.414 6A2 2 0 0116 7.414V16a2 2 0 01-2 2H6a2 2 0 01-2-2V4z" clip-rule="evenodd"/>
                                    </svg>
                                </div>
                                <div class="bg-gray-50 border-t border-gray-200 p-2.5">
                                    <div class="text-sm font-medium text-gray-800">Document_2014.doc</div>
                                    <small class="text-xs text-gray-500">Added: Jan 11, 2014</small>
                                </div>
                            </div>
                        </a>
                    </div>

                    <!-- File Box 9 - Image -->
                    <div class="w-full sm:w-1/2 lg:w-1/3 px-2.5 mb-5">
                        <a href="#" class="block">
                            <div class="bg-white border border-gray-200 hover:shadow-md transition-shadow relative group">
                                <div class="absolute bottom-0 right-0 w-0 h-0 border-l-[12px] border-l-transparent border-b-[12px] border-b-gray-100 border-t-[12px] border-t-transparent border-r-[12px] border-r-gray-100"></div>
                                <div class="h-24 overflow-hidden">
                                    <img src="https://www.bootdey.com/image/400x300/4169E1/000000" alt="Italy street" class="w-full h-full object-cover">
                                </div>
                                <div class="bg-gray-50 border-t border-gray-200 p-2.5">
                                    <div class="text-sm font-medium text-gray-800">Italy street.jpg</div>
                                    <small class="text-xs text-gray-500">Added: Jan 6, 2014</small>
                                </div>
                            </div>
                        </a>
                    </div>

                    <!-- File Box 10 - Image -->
                    <div class="w-full sm:w-1/2 lg:w-1/3 px-2.5 mb-5">
                        <a href="#" class="block">
                            <div class="bg-white border border-gray-200 hover:shadow-md transition-shadow relative group">
                                <div class="absolute bottom-0 right-0 w-0 h-0 border-l-[12px] border-l-transparent border-b-[12px] border-b-gray-100 border-t-[12px] border-t-transparent border-r-[12px] border-r-gray-100"></div>
                                <div class="h-24 overflow-hidden">
                                    <img src="https://www.bootdey.com/image/400x300/EE82EE/000000" alt="My feel" class="w-full h-full object-cover">
                                </div>
                                <div class="bg-gray-50 border-t border-gray-200 p-2.5">
                                    <div class="text-sm font-medium text-gray-800">My feel.png</div>
                                    <small class="text-xs text-gray-500">Added: Jan 7, 2014</small>
                                </div>
                            </div>
                        </a>
                    </div>

                    <!-- File Box 11 - Music -->
                    <div class="w-full sm:w-1/2 lg:w-1/3 px-2.5 mb-5">
                        <a href="#" class="block">
                            <div class="bg-white border border-gray-200 hover:shadow-md transition-shadow relative group">
                                <div class="absolute bottom-0 right-0 w-0 h-0 border-l-[12px] border-l-transparent border-b-[12px] border-b-gray-100 border-t-[12px] border-t-transparent border-r-[12px] border-r-gray-100"></div>
                                <div class="h-24 flex items-center justify-center p-4">
                                    <svg class="w-16 h-16 text-gray-300" fill="currentColor" viewBox="0 0 20 20">
                                        <path d="M18 3a1 1 0 00-1.196-.98l-10 2A1 1 0 006 5v9.114A4.369 4.369 0 005 14c-1.657 0-3 .895-3 2s1.343 2 3 2 3-.895 3-2V7.82l8-1.6v5.894A4.37 4.37 0 0015 12c-1.657 0-3 .895-3 2s1.343 2 3 2 3-.895 3-2V3z"/>
                                    </svg>
                                </div>
                                <div class="bg-gray-50 border-t border-gray-200 p-2.5">
                                    <div class="text-sm font-medium text-gray-800">Michal Jackson.mp3</div>
                                    <small class="text-xs text-gray-500">Added: Jan 22, 2014</small>
                                </div>
                            </div>
                        </a>
                    </div>

                    <!-- File Box 12 - Image -->
                    <div class="w-full sm:w-1/2 lg:w-1/3 px-2.5 mb-5">
                        <a href="#" class="block">
                            <div class="bg-white border border-gray-200 hover:shadow-md transition-shadow relative group">
                                <div class="absolute bottom-0 right-0 w-0 h-0 border-l-[12px] border-l-transparent border-b-[12px] border-b-gray-100 border-t-[12px] border-t-transparent border-r-[12px] border-r-gray-100"></div>
                                <div class="h-24 overflow-hidden">
                                    <img src="https://www.bootdey.com/image/400x300/008080/000000" alt="Document 2014" class="w-full h-full object-cover">
                                </div>
                                <div class="bg-gray-50 border-t border-gray-200 p-2.5">
                                    <div class="text-sm font-medium text-gray-800">Document_2014.doc</div>
                                    <small class="text-xs text-gray-500">Added: Fab 11, 2014</small>
                                </div>
                            </div>
                        </a>
                    </div>

                    <!-- File Box 13 - Video -->
                    <div class="w-full sm:w-1/2 lg:w-1/3 px-2.5 mb-5">
                        <a href="#" class="block">
                            <div class="bg-white border border-gray-200 hover:shadow-md transition-shadow relative group">
                                <div class="absolute bottom-0 right-0 w-0 h-0 border-l-[12px] border-l-transparent border-b-[12px] border-b-gray-100 border-t-[12px] border-t-transparent border-r-[12px] border-r-gray-100"></div>
                                <div class="h-24 flex items-center justify-center p-4">
                                    <svg class="w-16 h-16 text-gray-300" fill="currentColor" viewBox="0 0 20 20">
                                        <path d="M2 6a2 2 0 012-2h6a2 2 0 012 2v8a2 2 0 01-2 2H4a2 2 0 01-2-2V6zM14.553 7.106A1 1 0 0014 8v4a1 1 0 00.553.894l2 1A1 1 0 0018 13V7a1 1 0 00-1.447-.894l-2 1z"/>
                                    </svg>
                                </div>
                                <div class="bg-gray-50 border-t border-gray-200 p-2.5">
                                    <div class="text-sm font-medium text-gray-800">Monica's birthday.mpg4</div>
                                    <small class="text-xs text-gray-500">Added: Fab 18, 2014</small>
                                </div>
                            </div>
                        </a>
                    </div>

                    <!-- File Box 14 - Spreadsheet -->
                    <div class="w-full sm:w-1/2 lg:w-1/3 px-2.5 mb-5">
                        <a href="#" class="block">
                            <div class="bg-white border border-gray-200 hover:shadow-md transition-shadow relative group">
                                <div class="absolute bottom-0 right-0 w-0 h-0 border-l-[12px] border-l-transparent border-b-[12px] border-b-gray-100 border-t-[12px] border-t-transparent border-r-[12px] border-r-gray-100"></div>
                                <div class="h-24 flex items-center justify-center p-4">
                                    <svg class="w-16 h-16 text-gray-300" fill="currentColor" viewBox="0 0 20 20">
                                        <path d="M2 11a1 1 0 011-1h2a1 1 0 011 1v5a1 1 0 01-1 1H3a1 1 0 01-1-1v-5zM8 7a1 1 0 011-1h2a1 1 0 011 1v9a1 1 0 01-1 1H9a1 1 0 01-1-1V7zM14 4a1 1 0 011-1h2a1 1 0 011 1v12a1 1 0 01-1 1h-2a1 1 0 01-1-1V4z"/>
                                    </svg>
                                </div>
                                <div class="bg-gray-50 border-t border-gray-200 p-2.5">
                                    <div class="text-sm font-medium text-gray-800">Annual report 2014.xls</div>
                                    <small class="text-xs text-gray-500">Added: Fab 22, 2014</small>
                                </div>
                            </div>
                        </a>
                    </div>

                    <!-- File Box 15 - Document -->
                    <div class="w-full sm:w-1/2 lg:w-1/3 px-2.5 mb-5">
                        <a href="#" class="block">
                            <div class="bg-white border border-gray-200 hover:shadow-md transition-shadow relative group">
                                <div class="absolute bottom-0 right-0 w-0 h-0 border-l-[12px] border-l-transparent border-b-[12px] border-b-gray-100 border-t-[12px] border-t-transparent border-r-[12px] border-r-gray-100"></div>
                                <div class="h-24 flex items-center justify-center p-4">
                                    <svg class="w-16 h-16 text-gray-300" fill="currentColor" viewBox="0 0 20 20">
                                        <path fill-rule="evenodd" d="M4 4a2 2 0 012-2h4.586A2 2 0 0112 2.586L15.414 6A2 2 0 0116 7.414V16a2 2 0 01-2 2H6a2 2 0 01-2-2V4z" clip-rule="evenodd"/>
                                    </svg>
                                </div>
                                <div class="bg-gray-50 border-t border-gray-200 p-2.5">
                                    <div class="text-sm font-medium text-gray-800">Document_2014.doc</div>
                                    <small class="text-xs text-gray-500">Added: Jan 11, 2014</small>
                                </div>
                            </div>
                        </a>
                    </div>

                    <!-- File Box 16 - Image -->
                    <div class="w-full sm:w-1/2 lg:w-1/3 px-2.5 mb-5">
                        <a href="#" class="block">
                            <div class="bg-white border border-gray-200 hover:shadow-md transition-shadow relative group">
                                <div class="absolute bottom-0 right-0 w-0 h-0 border-l-[12px] border-l-transparent border-b-[12px] border-b-gray-100 border-t-[12px] border-t-transparent border-r-[12px] border-r-gray-100"></div>
                                <div class="h-24 overflow-hidden">
                                    <img src="https://www.bootdey.com/image/400x300/40E0D0/000000" alt="Italy street" class="w-full h-full object-cover">
                                </div>
                                <div class="bg-gray-50 border-t border-gray-200 p-2.5">
                                    <div class="text-sm font-medium text-gray-800">Italy street.jpg</div>
                                    <small class="text-xs text-gray-500">Added: Jan 6, 2014</small>
                                </div>
                            </div>
                        </a>
                    </div>

                    <!-- File Box 17 - Image -->
                    <div class="w-full sm:w-1/2 lg:w-1/3 px-2.5 mb-5">
                        <a href="#" class="block">
                            <div class="bg-white border border-gray-200 hover:shadow-md transition-shadow relative group">
                                <div class="absolute bottom-0 right-0 w-0 h-0 border-l-[12px] border-l-transparent border-b-[12px] border-b-gray-100 border-t-[12px] border-t-transparent border-r-[12px] border-r-gray-100"></div>
                                <div class="h-24 overflow-hidden">
                                    <img src="https://www.bootdey.com/image/400x300/FF6347/000000" alt="My feel" class="w-full h-full object-cover">
                                </div>
                                <div class="bg-gray-50 border-t border-gray-200 p-2.5">
                                    <div class="text-sm font-medium text-gray-800">My feel.png</div>
                                    <small class="text-xs text-gray-500">Added: Jan 7, 2014</small>
                                </div>
                            </div>
                        </a>
                    </div>

                    <!-- File Box 18 - Music -->
                    <div class="w-full sm:w-1/2 lg:w-1/3 px-2.5 mb-5">
                        <a href="#" class="block">
                            <div class="bg-white border border-gray-200 hover:shadow-md transition-shadow relative group">
                                <div class="absolute bottom-0 right-0 w-0 h-0 border-l-[12px] border-l-transparent border-b-[12px] border-b-gray-100 border-t-[12px] border-t-transparent border-r-[12px] border-r-gray-100"></div>
                                <div class="h-24 flex items-center justify-center p-4">
                                    <svg class="w-16 h-16 text-gray-300" fill="currentColor" viewBox="0 0 20 20">
                                        <path d="M18 3a1 1 0 00-1.196-.98l-10 2A1 1 0 006 5v9.114A4.369 4.369 0 005 14c-1.657 0-3 .895-3 2s1.343 2 3 2 3-.895 3-2V7.82l8-1.6v5.894A4.37 4.37 0 0015 12c-1.657 0-3 .895-3 2s1.343 2 3 2 3-.895 3-2V3z"/>
                                    </svg>
                                </div>
                                <div class="bg-gray-50 border-t border-gray-200 p-2.5">
                                    <div class="text-sm font-medium text-gray-800">Michal Jackson.mp3</div>
                                    <small class="text-xs text-gray-500">Added: Jan 22, 2014</small>
                                </div>
                            </div>
                        </a>
                    </div>

                    <!-- File Box 19 - Image -->
                    <div class="w-full sm:w-1/2 lg:w-1/3 px-2.5 mb-5">
                        <a href="#" class="block">
                            <div class="bg-white border border-gray-200 hover:shadow-md transition-shadow relative group">
                                <div class="absolute bottom-0 right-0 w-0 h-0 border-l-[12px] border-l-transparent border-b-[12px] border-b-gray-100 border-t-[12px] border-t-transparent border-r-[12px] border-r-gray-100"></div>
                                <div class="h-24 overflow-hidden">
                                    <img src="https://www.bootdey.com/image/400x300/6A5ACD/000000" alt="Document 2014" class="w-full h-full object-cover">
                                </div>
                                <div class="bg-gray-50 border-t border-gray-200 p-2.5">
                                    <div class="text-sm font-medium text-gray-800">Document_2014.doc</div>
                                    <small class="text-xs text-gray-500">Added: Fab 11, 2014</small>
                                </div>
                            </div>
                        </a>
                    </div>

                    <!-- File Box 20 - Video -->
                    <div class="w-full sm:w-1/2 lg:w-1/3 px-2.5 mb-5">
                        <a href="#" class="block">
                            <div class="bg-white border border-gray-200 hover:shadow-md transition-shadow relative group">
                                <div class="absolute bottom-0 right-0 w-0 h-0 border-l-[12px] border-l-transparent border-b-[12px] border-b-gray-100 border-t-[12px] border-t-transparent border-r-[12px] border-r-gray-100"></div>
                                <div class="h-24 flex items-center justify-center p-4">
                                    <svg class="w-16 h-16 text-gray-300" fill="currentColor" viewBox="0 0 20 20">
                                        <path d="M2 6a2 2 0 012-2h6a2 2 0 012 2v8a2 2 0 01-2 2H4a2 2 0 01-2-2V6zM14.553 7.106A1 1 0 0014 8v4a1 1 0 00.553.894l2 1A1 1 0 0018 13V7a1 1 0 00-1.447-.894l-2 1z"/>
                                    </svg>
                                </div>
                                <div class="bg-gray-50 border-t border-gray-200 p-2.5">
                                    <div class="text-sm font-medium text-gray-800">Monica's birthday.mpg4</div>
                                    <small class="text-xs text-gray-500">Added: Fab 18, 2014</small>
                                </div>
                            </div>
                        </a>
                    </div>

                    <!-- File Box 21 - Spreadsheet -->
                    <div class="w-full sm:w-1/2 lg:w-1/3 px-2.5 mb-5">
                        <a href="#" class="block">
                            <div class="bg-white border border-gray-200 hover:shadow-md transition-shadow relative group">
                                <div class="absolute bottom-0 right-0 w-0 h-0 border-l-[12px] border-l-transparent border-b-[12px] border-b-gray-100 border-t-[12px] border-t-transparent border-r-[12px] border-r-gray-100"></div>
                                <div class="h-24 flex items-center justify-center p-4">
                                    <svg class="w-16 h-16 text-gray-300" fill="currentColor" viewBox="0 0 20 20">
                                        <path d="M2 11a1 1 0 011-1h2a1 1 0 011 1v5a1 1 0 01-1 1H3a1 1 0 01-1-1v-5zM8 7a1 1 0 011-1h2a1 1 0 011 1v9a1 1 0 01-1 1H9a1 1 0 01-1-1V7zM14 4a1 1 0 011-1h2a1 1 0 011 1v12a1 1 0 01-1 1h-2a1 1 0 01-1-1V4z"/>
                                    </svg>
                                </div>
                                <div class="bg-gray-50 border-t border-gray-200 p-2.5">
                                    <div class="text-sm font-medium text-gray-800">Annual report 2014.xls</div>
                                    <small class="text-xs text-gray-500">Added: Fab 22, 2014</small>
                                </div>
                            </div>
                        </a>
                    </div>

                </div>
            </div>
        </div>
    </div>
</body>
</html>