AI Attachment Components
5 ComponentsUsed to display a set of attachment information.
Dec. 14, 2024, 5:04 a.m.
A series of attachment components built with Tailwind CSS, inspired by Ant Design X's Attachments component. Used to display and manage file uploads and attachments.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Basic Style - Attachments</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/tailwind.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/fonts/remixicon.css" rel="stylesheet">
<style>
.upload-area {
transition: all 0.3s ease;
}
.upload-area.dragging {
background-color: rgba(59, 130, 246, 0.05);
border-color: #3b82f6;
}
.file-item {
transition: all 0.2s ease;
}
.file-item:hover {
background-color: rgba(0, 0, 0, 0.02);
}
</style>
</head>
<body class="bg-gray-50">
<div class="max-w-3xl mx-auto p-6">
<div class="mb-6">
<a href="../index.html" class="text-blue-500 hover:text-blue-600 flex items-center gap-1">
<i class="ri-arrow-left-line"></i>
<span>Back to Home</span>
</a>
</div>
<!-- Upload Container -->
<div class="bg-white rounded-xl shadow-sm">
<!-- Upload Area -->
<div class="upload-area p-8 border-2 border-dashed border-gray-200 rounded-lg text-center">
<div class="flex flex-col items-center gap-4">
<div class="w-12 h-12 rounded-lg bg-blue-50 flex items-center justify-center text-blue-500">
<i class="ri-upload-cloud-line text-2xl"></i>
</div>
<div>
<h3 class="font-medium text-gray-900">Click or Drop files here</h3>
<p class="text-sm text-gray-500 mt-1">Support for images, videos, documents</p>
</div>
<button class="px-4 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600 transition-colors">
Select Files
</button>
</div>
</div>
<!-- File List -->
<div class="border-t border-gray-100 mt-6">
<!-- Uploading File -->
<div class="file-item p-4 flex items-center gap-4">
<div class="w-10 h-10 rounded-lg bg-blue-50 flex items-center justify-center text-blue-500">
<i class="ri-file-text-line text-xl"></i>
</div>
<div class="flex-1 min-w-0">
<div class="flex items-center gap-2">
<span class="font-medium text-gray-900 truncate">project_report.pdf</span>
<span class="text-xs text-gray-500">2.5 MB</span>
</div>
<div class="mt-2 flex items-center gap-2">
<div class="flex-1 h-1 bg-gray-100 rounded-full overflow-hidden">
<div class="h-full bg-blue-500 rounded-full" style="width: 70%"></div>
</div>
<span class="text-xs text-gray-500">70%</span>
</div>
</div>
<button class="p-2 text-gray-400 hover:text-gray-600">
<i class="ri-close-line"></i>
</button>
</div>
<!-- Completed File -->
<div class="file-item p-4 flex items-center gap-4">
<div class="w-10 h-10 rounded-lg bg-green-50 flex items-center justify-center text-green-500">
<i class="ri-image-line text-xl"></i>
</div>
<div class="flex-1 min-w-0">
<div class="flex items-center gap-2">
<span class="font-medium text-gray-900 truncate">presentation.jpg</span>
<span class="text-xs text-gray-500">1.2 MB</span>
<span class="px-2 py-0.5 rounded-full bg-green-100 text-green-600 text-xs">Complete</span>
</div>
</div>
<div class="flex items-center gap-2">
<button class="p-2 text-gray-400 hover:text-gray-600">
<i class="ri-download-line"></i>
</button>
<button class="p-2 text-gray-400 hover:text-gray-600">
<i class="ri-delete-bin-line"></i>
</button>
</div>
</div>
<!-- Error File -->
<div class="file-item p-4 flex items-center gap-4">
<div class="w-10 h-10 rounded-lg bg-red-50 flex items-center justify-center text-red-500">
<i class="ri-file-damage-line text-xl"></i>
</div>
<div class="flex-1 min-w-0">
<div class="flex items-center gap-2">
<span class="font-medium text-gray-900 truncate">archive.zip</span>
<span class="text-xs text-gray-500">25 MB</span>
<span class="px-2 py-0.5 rounded-full bg-red-100 text-red-600 text-xs">Size limit exceeded</span>
</div>
</div>
<button class="p-2 text-gray-400 hover:text-gray-600">
<i class="ri-close-line"></i>
</button>
</div>
</div>
<!-- Actions -->
<div class="p-4 border-t border-gray-100 flex justify-between">
<div class="text-sm text-gray-500">
3 files • 28.7 MB total
</div>
<div class="flex items-center gap-3">
<button class="px-4 py-2 text-gray-600 hover:text-gray-800">
Cancel All
</button>
<button class="px-4 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600 transition-colors">
Upload All
</button>
</div>
</div>
</div>
</div>
</body>
</html>
Dec. 14, 2024, 5:03 a.m.
A series of attachment components built with Tailwind CSS, inspired by Ant Design X's Attachments component. Used to display and manage file uploads and attachments.
Dec. 14, 2024, 5:03 a.m.
A series of attachment components built with Tailwind CSS, inspired by Ant Design X's Attachments component. Used to display and manage file uploads and attachments.
Dec. 14, 2024, 5:03 a.m.
A series of attachment components built with Tailwind CSS, inspired by Ant Design X's Attachments component. Used to display and manage file uploads and attachments.
Dec. 14, 2024, 5:04 a.m.
A series of attachment components built with Tailwind CSS, inspired by Ant Design X's Attachments component. Used to display and manage file uploads and attachments.
Copied to clipboard