JobApplicationForm_WatercolorArtistic
Ein komplexes, responsives Bewerbungsformular mit einem Aquarell-/künstlerischen Designstil und einem Regenbogen-Farbschema mit Farbverlauf. Enthält Abschnitte für persönliche Daten, Erfahrung, Ausbildung und Datei-Uploads mit Unterstützung für den Dunkelmodus, geeignet für Jobbörsen und Karriereplattformen.
HTML-Code
<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>Verwandte Komponenten
Brutalistische Social-Media-Form
Eine einfache, brutalistische Formkomponente für Social Media mit triadischer Farbgebung und dunkler Theme-Unterstützung.
Minimalistische Juwelenfarbe Regierungsform
Eine reaktionsschnelle, minimalistische Formularkomponente für Websites von Behörden oder öffentlichen Diensten mit Juwelentönen und Unterstützung für den Dunkelmodus. Es enthält Felder für persönliche Informationen, Kontaktdaten und eine Nachricht.
Brutalistische Graustufen-Industrieform
Ein komplexes, brutalistisch anmutendes Formbauteil mit Graustufen-Farbschema, das für Industrie- und Fertigungsanwendungen entwickelt wurde. Verfügt über kontrastreiche Elemente, ungewöhnliche Layouts und volle Reaktionsfähigkeit mit Unterstützung des Dunkelmodus.