<div class="min-h-screen bg-gradient-to-br from-indigo-100 via-purple-100 to-pink-100 dark:from-gray-900 dark:via-purple-950 dark:to-teal-950 p-4 sm:p-6 lg:p-8 font-sans relative overflow-hidden">
<!-- Background Artistic Elements (Subtle on light, more pronounced on dark) -->
<div class="absolute inset-0 z-0 opacity-30 dark:opacity-20 pointer-events-none">
<div class="absolute top-0 left-1/4 w-96 h-96 bg-gradient-to-br from-purple-200 to-pink-200 dark:from-purple-800 dark:to-pink-800 rounded-full mix-blend-multiply opacity-50 blur-3xl animate-blob"></div>
<div class="absolute bottom-0 right-1/4 w-80 h-80 bg-gradient-to-br from-blue-200 to-green-200 dark:from-blue-800 dark:to-green-800 rounded-full mix-blend-multiply opacity-50 blur-3xl animate-blob animation-delay-2000"></div>
<div class="absolute top-1/3 right-0 w-72 h-72 bg-gradient-to-br from-red-200 to-orange-200 dark:from-red-800 dark:to-orange-800 rounded-full mix-blend-multiply opacity-50 blur-3xl animate-blob animation-delay-4000"></div>
</div>
<style>
@keyframes blob {
0% { transform: translate(0px, 0px) scale(1); }
33% { transform: translate(30px, -50px) scale(1.1); }
66% { transform: translate(-20px, 20px) scale(0.9); }
100% { transform: translate(0px, 0px) scale(1); }
}
.animate-blob {
animation: blob 7s infinite;
}
.animation-delay-2000 { animation-delay: 2s; }
.animation-delay-4000 { animation-delay: 4s; }
/* Custom scrollbar for dark mode */
.dark ::-webkit-scrollbar-track {
background: #2a0044; /* Darker purple */
}
.dark ::-webkit-scrollbar-thumb {
background-color: #6a00ff; /* Brighter purple for thumb */
border-radius: 20px;
border: 3px solid #2a0044;
}
::-webkit-scrollbar {
width: 10px;
height: 10px; /* For horizontal scrollbars */
}
::-webkit-scrollbar-track {
background: #f0f0f0;
border-radius: 10px;
}
::-webkit-scrollbar-thumb {
background-color: #d1d5db; /* Light gray */
border-radius: 10px;
border: 2px solid #f0f0f0;
}
</style>
<div class="relative z-10 max-w-5xl mx-auto bg-white/70 dark:bg-gray-800/80 backdrop-filter backdrop-blur-lg rounded-3xl shadow-xl border border-white/50 dark:border-gray-700/50 p-6 sm:p-8 lg:p-10 transform transition-all duration-300 hover:shadow-2xl">
<div class="text-center mb-8">
<h1 class="text-3xl sm:text-4xl lg:text-5xl font-extrabold text-transparent bg-clip-text bg-gradient-to-r from-purple-600 to-indigo-600 dark:from-purple-400 dark:to-indigo-400 mb-3 drop-shadow-lg leading-tight">
Join Our Visionary Team
</h1>
<p class="text-base sm:text-lg text-gray-700 dark:text-gray-300 max-w-2xl mx-auto leading-relaxed">
Embark on a creative journey with us. Fill out this form to apply for exciting opportunities.
</p>
</div>
<form class="grid grid-cols-1 md:grid-cols-2 gap-6 sm:gap-8 lg:gap-10">
<!-- Section: Personal Details -->
<section class="md:col-span-2 p-5 sm:p-6 bg-gradient-to-br from-blue-50 to-purple-50 dark:from-gray-700 dark:to-gray-800 rounded-2xl border border-blue-200/50 dark:border-gray-600/50 shadow-inner group">
<h2 class="text-2xl font-bold mb-5 text-gray-800 dark:text-gray-100 flex items-center">
Personal Details
<span class="ml-2 text-blue-500 dark:text-blue-400 group-hover:rotate-3 transition-transform duration-300">✨</span>
</h2>
<div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
<div>
<label for="first-name" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">First Name</label>
<input type="text" id="first-name" name="first-name" placeholder="e.g., Aurora" class="w-full p-3 border border-gray-300 dark:border-gray-600 rounded-lg shadow-sm focus:ring-purple-500 focus:border-purple-500 dark:bg-gray-700 dark:text-white dark:placeholder-gray-400 transition-all duration-200 outline-none focus:shadow-md focus:shadow-purple-200 dark:focus:shadow-purple-900/50">
</div>
<div>
<label for="last-name" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Last Name</label>
<input type="text" id="last-name" name="last-name" placeholder="e.g., Rivers" class="w-full p-3 border border-gray-300 dark:border-gray-600 rounded-lg shadow-sm focus:ring-purple-500 focus:border-purple-500 dark:bg-gray-700 dark:text-white dark:placeholder-gray-400 transition-all duration-200 outline-none focus:shadow-md focus:shadow-purple-200 dark:focus:shadow-purple-900/50">
</div>
<div class="sm:col-span-2">
<label for="email" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Email Address</label>
<input type="email" id="email" name="email" placeholder="e.g., [email protected]" class="w-full p-3 border border-gray-300 dark:border-gray-600 rounded-lg shadow-sm focus:ring-purple-500 focus:border-purple-500 dark:bg-gray-700 dark:text-white dark:placeholder-gray-400 transition-all duration-200 outline-none focus:shadow-md focus:shadow-purple-200 dark:focus:shadow-purple-900/50">
</div>
<div class="sm:col-span-2">
<label for="phone" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Phone Number (Optional)</label>
<input type="tel" id="phone" name="phone" placeholder="e.g., +1 (555) 123-4567" class="w-full p-3 border border-gray-300 dark:border-gray-600 rounded-lg shadow-sm focus:ring-purple-500 focus:border-purple-500 dark:bg-gray-700 dark:text-white dark:placeholder-gray-400 transition-all duration-200 outline-none focus:shadow-md focus:shadow-purple-200 dark:focus:shadow-purple-900/50">
</div>
</div>
</section>
<!-- Section: Experience -->
<section class="md:col-span-2 p-5 sm:p-6 bg-gradient-to-br from-pink-50 to-orange-50 dark:from-gray-700 dark:to-gray-800 rounded-2xl border border-pink-200/50 dark:border-gray-600/50 shadow-inner group">
<h2 class="text-2xl font-bold mb-5 text-gray-800 dark:text-gray-100 flex items-center">
Work Experience
<span class="ml-2 text-pink-500 dark:text-pink-400 group-hover:rotate-6 transition-transform duration-300">🖌️</span>
</h2>
<div id="experience-container" class="space-y-6">
<!-- Experience Entry 1 (Default) -->
<div class="bg-white/60 dark:bg-gray-900/50 p-4 rounded-xl border border-white/70 dark:border-gray-700/70 shadow-sm flex flex-col sm:flex-row gap-4 items-start sm:items-end">
<div class="flex-grow grid grid-cols-1 sm:grid-cols-2 gap-4">
<div>
<label for="job-title-1" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Job Title</label>
<input type="text" id="job-title-1" name="job-title-1" placeholder="e.g., Lead Designer" class="w-full p-2 border border-gray-300 dark:border-gray-600 rounded-lg shadow-sm focus:ring-orange-500 focus:border-orange-500 dark:bg-gray-800 dark:text-white dark:placeholder-gray-400 text-sm">
</div>
<div>
<label for="company-1" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Company</label>
<input type="text" id="company-1" name="company-1" placeholder="e.g., Creative Canvas Studio" class="w-full p-2 border border-gray-300 dark:border-gray-600 rounded-lg shadow-sm focus:ring-orange-500 focus:border-orange-500 dark:bg-gray-800 dark:text-white dark:placeholder-gray-400 text-sm">
</div>
<div class="col-span-1 sm:col-span-2">
<label for="job-description-1" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Key Responsibilities/Achievements</label>
<textarea id="job-description-1" name="job-description-1" rows="3" placeholder="Describe your role and impact..." class="w-full p-2 border border-gray-300 dark:border-gray-600 rounded-lg shadow-sm focus:ring-orange-500 focus:border-orange-500 dark:bg-gray-800 dark:text-white dark:placeholder-gray-400 text-sm resize-y"></textarea>
</div>
</div>
<button type="button" class="mt-2 sm:mt-0 px-4 py-2 bg-red-400 text-white rounded-lg shadow hover:bg-red-500 focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-offset-2 dark:focus:ring-offset-gray-800 transition-colors duration-200 text-sm align-bottom flex-shrink-0">
Remove
</button>
</div>
</div>
<button type="button" id="add-experience" class="mt-6 px-6 py-3 bg-gradient-to-r from-orange-400 to-red-400 text-white rounded-xl shadow-lg hover:shadow-xl hover:from-orange-500 hover:to-red-500 focus:outline-none focus:ring-4 focus:ring-orange-300 dark:focus:ring-orange-700 transition-all duration-300 transform hover:-translate-y-0.5 text-base font-semibold">
Add More Experience <span aria-hidden="true">+</span>
</button>
</section>
<!-- Section: Education -->
<section class="md:col-span-2 p-5 sm:p-6 bg-gradient-to-br from-green-50 to-blue-50 dark:from-gray-700 dark:to-gray-800 rounded-2xl border border-green-200/50 dark:border-gray-600/50 shadow-inner group">
<h2 class="text-2xl font-bold mb-5 text-gray-800 dark:text-gray-100 flex items-center">
Education Background
<span class="ml-2 text-green-500 dark:text-green-400 group-hover:scale-105 transition-transform duration-300">🎓</span>
</h2>
<div id="education-container" class="space-y-6">
<!-- Education Entry 1 (Default) -->
<div class="bg-white/60 dark:bg-gray-900/50 p-4 rounded-xl border border-white/70 dark:border-gray-700/70 shadow-sm flex flex-col sm:flex-row gap-4 items-start sm:items-end">
<div class="flex-grow grid grid-cols-1 sm:grid-cols-2 gap-4">
<div>
<label for="degree-1" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Degree/Program</label>
<input type="text" id="degree-1" name="degree-1" placeholder="e.g., MFA in Digital Arts" class="w-full p-2 border border-gray-300 dark:border-gray-600 rounded-lg shadow-sm focus:ring-green-500 focus:border-green-500 dark:bg-gray-800 dark:text-white dark:placeholder-gray-400 text-sm">
</div>
<div>
<label for="university-1" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">University/Institution</label>
<input type="text" id="university-1" name="university-1" placeholder="e.g., Evergreen Arts Institute" class="w-full p-2 border border-gray-300 dark:border-gray-600 rounded-lg shadow-sm focus:ring-green-500 focus:border-green-500 dark:bg-gray-800 dark:text-white dark:placeholder-gray-400 text-sm">
</div>
</div>
<button type="button" class="mt-2 sm:mt-0 px-4 py-2 bg-red-400 text-white rounded-lg shadow hover:bg-red-500 focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-offset-2 dark:focus:ring-offset-gray-800 transition-colors duration-200 text-sm align-bottom flex-shrink-0">
Remove
</button>
</div>
</div>
<button type="button" id="add-education" class="mt-6 px-6 py-3 bg-gradient-to-r from-green-400 to-teal-400 text-white rounded-xl shadow-lg hover:shadow-xl hover:from-green-500 hover:to-teal-500 focus:outline-none focus:ring-4 focus:ring-green-300 dark:focus:ring-green-700 transition-all duration-300 transform hover:-translate-y-0.5 text-base font-semibold">
Add More Education <span aria-hidden="true">+</span>
</button>
</section>
<!-- Section: Skills & Portfolio -->
<section class="p-5 sm:p-6 bg-gradient-to-br from-yellow-50 to-orange-50 dark:from-gray-700 dark:to-gray-800 rounded-2xl border border-yellow-200/50 dark:border-gray-600/50 shadow-inner group">
<h2 class="text-2xl font-bold mb-5 text-gray-800 dark:text-gray-100 flex items-center">
Skills & Portfolio
<span class="ml-2 text-yellow-500 dark:text-yellow-400 group-hover:animate-bounce transition-transform duration-300">⭐</span>
</h2>
<div class="space-y-4">
<div>
<label for="skills" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Key Skills (comma-separated)</label>
<input type="text" id="skills" name="skills" placeholder="e.g., UI/UX Design, Oil Painting, Animation" class="w-full p-3 border border-gray-300 dark:border-gray-600 rounded-lg shadow-sm focus:ring-yellow-500 focus:border-yellow-500 dark:bg-gray-700 dark:text-white dark:placeholder-gray-400 transition-all duration-200 outline-none focus:shadow-md focus:shadow-yellow-200 dark:focus:shadow-yellow-900/50">
</div>
<div>
<label for="portfolio-link" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Portfolio Link (Optional)</label>
<input type="url" id="portfolio-link" name="portfolio-link" placeholder="e.g., https://yourportfolio.com" class="w-full p-3 border border-gray-300 dark:border-gray-600 rounded-lg shadow-sm focus:ring-yellow-500 focus:border-yellow-500 dark:bg-gray-700 dark:text-white dark:placeholder-gray-400 transition-all duration-200 outline-none focus:shadow-md focus:shadow-yellow-200 dark:focus:shadow-yellow-900/50">
</div>
</div>
</section>
<!-- Section: Upload Files -->
<section class="p-5 sm:p-6 bg-gradient-to-br from-purple-50 to-indigo-50 dark:from-gray-700 dark:to-gray-800 rounded-2xl border border-purple-200/50 dark:border-gray-600/50 shadow-inner group">
<h2 class="text-2xl font-bold mb-5 text-gray-800 dark:text-gray-100 flex items-center">
Upload Your Artwork
<span class="ml-2 text-purple-500 dark:text-purple-400 group-hover:rotate-12 transition-transform duration-300">🖼️</span>
</h2>
<div class="space-y-4">
<div>
<label for="resume" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Resume/CV (PDF preferred)</label>
<input type="file" id="resume" name="resume" accept=".pdf,.doc,.docx" class="block w-full text-sm text-gray-700 dark:text-gray-300
file:mr-4 file:py-2 file:px-4
file:rounded-full file:border-0
file:text-sm file:font-semibold
file:bg-purple-100 file:text-purple-700
hover:file:bg-purple-200 dark:file:bg-gray-600 dark:file:text-purple-300 dark:hover:file:bg-gray-700
transition-colors duration-200 cursor-pointer">
</div>
<div>
<label for="cover-letter" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Cover Letter (Optional)</label>
<input type="file" id="cover-letter" name="cover-letter" accept=".pdf,.doc,.docx" class="block w-full text-sm text-gray-700 dark:text-gray-300
file:mr-4 file:py-2 file:px-4
file:rounded-full file:border-0
file:text-sm file:font-semibold
file:bg-indigo-100 file:text-indigo-700
hover:file:bg-indigo-200 dark:file:bg-gray-600 dark:file:text-indigo-300 dark:hover:file:bg-gray-700
transition-colors duration-200 cursor-pointer">
</div>
</div>
</section>
<!-- Section: Additional Information -->
<section class="md:col-span-2 p-5 sm:p-6 bg-gradient-to-br from-teal-50 to-cyan-50 dark:from-gray-700 dark:to-gray-800 rounded-2xl border border-teal-200/50 dark:border-gray-600/50 shadow-inner group">
<h2 class="text-2xl font-bold mb-5 text-gray-800 dark:text-gray-100 flex items-center">
Creative Insights
<span class="ml-2 text-teal-500 dark:text-teal-400 group-hover:rotate-6 transition-transform duration-300">💡</span>
</h2>
<div class="space-y-4">
<div>
<label for="desired-salary" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Desired Salary (USD/Year)</label>
<input type="number" id="desired-salary" name="desired-salary" placeholder="e.g., 75000" min="0" class="w-full p-3 border border-gray-300 dark:border-gray-600 rounded-lg shadow-sm focus:ring-teal-500 focus:border-teal-500 dark:bg-gray-700 dark:text-white dark:placeholder-gray-400 transition-all duration-200 outline-none focus:shadow-md focus:shadow-teal-200 dark:focus:shadow-teal-900/50">
</div>
<div>
<label for="availability" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">When can you start?</label>
<input type="date" id="availability" name="availability" class="w-full p-3 border border-gray-300 dark:border-gray-600 rounded-lg shadow-sm focus:ring-teal-500 focus:border-teal-500 dark:bg-gray-700 dark:text-white dark:placeholder-gray-400 transition-all duration-200 outline-none focus:shadow-md focus:shadow-teal-200 dark:focus:shadow-teal-900/50">
</div>
<div>
<label for="about-you" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Tell us about your creative philosophy or what inspires you.</label>
<textarea id="about-you" name="about-you" rows="4" placeholder="Your unique vision..." class="w-full p-3 border border-gray-300 dark:border-gray-600 rounded-lg shadow-sm focus:ring-teal-500 focus:border-teal-500 dark:bg-gray-700 dark:text-white dark:placeholder-gray-400 transition-all duration-200 outline-none focus:shadow-md focus:shadow-teal-200 dark:focus:shadow-teal-900/50 resize-y"></textarea>
</div>
<div class="flex items-center">
<input type="checkbox" id="terms" name="terms" class="h-5 w-5 text-teal-600 dark:text-teal-400 border-gray-300 dark:border-gray-600 rounded focus:ring-teal-500 dark:focus:ring-teal-400 cursor-pointer">
<label for="terms" class="ml-2 block text-sm text-gray-700 dark:text-gray-300">I agree to the <a href="#" class="text-teal-600 hover:text-teal-800 dark:text-teal-400 dark:hover:text-teal-200 font-medium hover:underline">terms and conditions</a>.</label>
</div>
</div>
</section>
<!-- Submit Button -->
<div class="md:col-span-2 text-center mt-6 sm:mt-8">
<button type="submit" class="px-10 py-4 bg-gradient-to-r from-purple-500 via-indigo-500 to-blue-500 text-white font-bold text-lg rounded-full shadow-2xl hover:shadow-purple-400/50 dark:hover:shadow-purple-900/50 hover:scale-105 transition-all duration-300 ease-out transform focus:outline-none focus:ring-4 focus:ring-indigo-300 dark:focus:ring-indigo-700 group relative overflow-hidden">
<span class="relative z-10">Submit Application</span>
<span class="absolute inset-0 bg-gradient-to-r from-pink-400 via-purple-300 to-blue-300 opacity-0 group-hover:opacity-100 transition-opacity duration-300 mix-blend-overlay"></span>
<span class="absolute inset-0 rounded-full border-2 border-white/50 dark:border-white/20 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></span>
</button>
</div>
</form>
</div>
<!-- Sample JavaScript for 'Add More' functionality (not part of the HTML requirement, but for completeness) -->
<script>
document.addEventListener('DOMContentLoaded', function() {
let experienceCount = 1;
let educationCount = 1;
document.getElementById('add-experience')?.addEventListener('click', function() {
experienceCount++;
const container = document.getElementById('experience-container');
const newEntry = document.createElement('div');
newEntry.className = 'bg-white/60 dark:bg-gray-900/50 p-4 rounded-xl border border-white/70 dark:border-gray-700/70 shadow-sm flex flex-col sm:flex-row gap-4 items-start sm:items-end';
newEntry.innerHTML = `
<div class="flex-grow grid grid-cols-1 sm:grid-cols-2 gap-4">
<div>
<label for="job-title-${experienceCount}" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Job Title</label>
<input type="text" id="job-title-${experienceCount}" name="job-title-${experienceCount}" placeholder="e.g., Lead Designer" class="w-full p-2 border border-gray-300 dark:border-gray-600 rounded-lg shadow-sm focus:ring-orange-500 focus:border-orange-500 dark:bg-gray-800 dark:text-white dark:placeholder-gray-400 text-sm">
</div>
<div>
<label for="company-${experienceCount}" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Company</label>
<input type="text" id="company-${experienceCount}" name="company-${experienceCount}" placeholder="e.g., Creative Canvas Studio" class="w-full p-2 border border-gray-300 dark:border-gray-600 rounded-lg shadow-sm focus:ring-orange-500 focus:border-orange-500 dark:bg-gray-800 dark:text-white dark:placeholder-gray-400 text-sm">
</div>
<div class="col-span-1 sm:col-span-2">
<label for="job-description-${experienceCount}" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Key Responsibilities/Achievements</label>
<textarea id="job-description-${experienceCount}" name="job-description-${experienceCount}" rows="3" placeholder="Describe your role and impact..." class="w-full p-2 border border-gray-300 dark:border-gray-600 rounded-lg shadow-sm focus:ring-orange-500 focus:border-orange-500 dark:bg-gray-800 dark:text-white dark:placeholder-gray-400 text-sm resize-y"></textarea>
</div>
</div>
<button type="button" class="mt-2 sm:mt-0 px-4 py-2 bg-red-400 text-white rounded-lg shadow hover:bg-red-500 focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-offset-2 dark:focus:ring-offset-gray-800 transition-colors duration-200 text-sm align-bottom flex-shrink-0 remove-item">
Remove
</button>
`;
container.appendChild(newEntry);
newEntry.querySelector('.remove-item')?.addEventListener('click', function() {
newEntry.remove();
});
});
document.getElementById('add-education')?.addEventListener('click', function() {
educationCount++;
const container = document.getElementById('education-container');
const newEntry = document.createElement('div');
newEntry.className = 'bg-white/60 dark:bg-gray-900/50 p-4 rounded-xl border border-white/70 dark:border-gray-700/70 shadow-sm flex flex-col sm:flex-row gap-4 items-start sm:items-end';
newEntry.innerHTML = `
<div class="flex-grow grid grid-cols-1 sm:grid-cols-2 gap-4">
<div>
<label for="degree-${educationCount}" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Degree/Program</label>
<input type="text" id="degree-${educationCount}" name="degree-${educationCount}" placeholder="e.g., MFA in Digital Arts" class="w-full p-2 border border-gray-300 dark:border-gray-600 rounded-lg shadow-sm focus:ring-green-500 focus:border-green-500 dark:bg-gray-800 dark:text-white dark:placeholder-gray-400 text-sm">
</div>
<div>
<label for="university-${educationCount}" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">University/Institution</label>
<input type="text" id="university-${educationCount}" name="university-${educationCount}" placeholder="e.g., Evergreen Arts Institute" class="w-full p-2 border border-gray-300 dark:border-gray-600 rounded-lg shadow-sm focus:ring-green-500 focus:border-green-500 dark:bg-gray-800 dark:text-white dark:placeholder-gray-400 text-sm">
</div>
</div>
<button type="button" class="mt-2 sm:mt-0 px-4 py-2 bg-red-400 text-white rounded-lg shadow hover:bg-red-500 focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-offset-2 dark:focus:ring-offset-gray-800 transition-colors duration-200 text-sm align-bottom flex-shrink-0 remove-item">
Remove
</button>
`;
container.appendChild(newEntry);
newEntry.querySelector('.remove-item')?.addEventListener('click', function() {
newEntry.remove();
});
});
// Initial setup for existing remove buttons (if they were generated by server)
document.querySelectorAll('.remove-item').forEach(button => {
button.addEventListener('click', function() {
button.closest('.flex.flex-col.sm\:flex-row')?.remove();
});
});
});
</script>
</div>
