Formulaire de demande d’emploi ludique
Un composant de formulaire de candidature réactif et ludique avec des couleurs neutres chaudes, des éléments arrondis et une prise en charge du mode sombre, adapté aux sites d’emploi et aux plateformes de développement de carrière.
HTML Code
<div class="p-4 sm:p-6 md:p-8 bg-gradient-to-br from-orange-50 to-amber-50 dark:from-gray-800 dark:to-gray-900 min-h-screen font-sans">
<div class="max-w-4xl mx-auto bg-white dark:bg-gray-700 rounded-3xl shadow-xl overflow-hidden animate-fade-in-up transition-colors duration-300">
<div class="p-6 sm:p-8 md:p-10 bg-amber-100 dark:bg-gray-800 text-center rounded-t-3xl">
<h2 class="text-3xl sm:text-4xl font-bold text-amber-800 dark:text-amber-200 mb-2 leading-tight">Ready for Your Next Big Adventure?</h2>
<p class="text-lg text-amber-700 dark:text-amber-300">Fill out this form to apply for exciting opportunities!</p>
</div>
<form class="p-6 sm:p-8 md:p-10 space-y-6">
<!-- Personal Information Section -->
<div class="bg-gray-50 dark:bg-gray-600 p-6 rounded-2xl shadow-inner border border-gray-100 dark:border-gray-500">
<h3 class="text-2xl font-semibold text-gray-800 dark:text-gray-100 mb-5 pb-3 border-b border-gray-200 dark:border-gray-500 flex items-center">
<svg class="w-7 h-7 mr-3 text-amber-500" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z" clip-rule="evenodd"></path></svg>
Tell Us About You
</h3>
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<div>
<label for="first-name" class="block text-sm font-medium text-gray-700 dark:text-gray-200 mb-2">First Name <span class="text-red-500">*</span></label>
<input type="text" id="first-name" name="first_name" required class="block w-full p-3 border border-gray-300 dark:border-gray-500 rounded-lg shadow-sm focus:ring-amber-500 focus:border-amber-500 bg-white dark:bg-gray-700 text-gray-800 dark:text-gray-200 placeholder-gray-400 dark:placeholder-gray-400 transition-all duration-200 ease-in-out hover:border-amber-300 dark:hover:border-amber-600">
</div>
<div>
<label for="last-name" class="block text-sm font-medium text-gray-700 dark:text-gray-200 mb-2">Last Name <span class="text-red-500">*</span></label>
<input type="text" id="last-name" name="last_name" required class="block w-full p-3 border border-gray-300 dark:border-gray-500 rounded-lg shadow-sm focus:ring-amber-500 focus:border-amber-500 bg-white dark:bg-gray-700 text-gray-800 dark:text-gray-200 placeholder-gray-400 dark:placeholder-gray-400 transition-all duration-200 ease-in-out hover:border-amber-300 dark:hover:border-amber-600">
</div>
<div class="md:col-span-2">
<label for="email" class="block text-sm font-medium text-gray-700 dark:text-gray-200 mb-2">Email Address <span class="text-red-500">*</span></label>
<input type="email" id="email" name="email" required class="block w-full p-3 border border-gray-300 dark:border-gray-500 rounded-lg shadow-sm focus:ring-amber-500 focus:border-amber-500 bg-white dark:bg-gray-700 text-gray-800 dark:text-gray-200 placeholder-gray-400 dark:placeholder-gray-400 transition-all duration-200 ease-in-out hover:border-amber-300 dark:hover:border-amber-600">
</div>
<div>
<label for="phone" class="block text-sm font-medium text-gray-700 dark:text-gray-200 mb-2">Phone Number</label>
<input type="tel" id="phone" name="phone" class="block w-full p-3 border border-gray-300 dark:border-gray-500 rounded-lg shadow-sm focus:ring-amber-500 focus:border-amber-500 bg-white dark:bg-gray-700 text-gray-800 dark:text-gray-200 placeholder-gray-400 dark:placeholder-gray-400 transition-all duration-200 ease-in-out hover:border-amber-300 dark:hover:border-amber-600">
</div>
</div>
</div>
<!-- Resume & Portfolio Section -->
<div class="bg-gray-50 dark:bg-gray-600 p-6 rounded-2xl shadow-inner border border-gray-100 dark:border-gray-500">
<h3 class="text-2xl font-semibold text-gray-800 dark:text-gray-100 mb-5 pb-3 border-b border-gray-200 dark:border-gray-500 flex items-center">
<svg class="w-7 h-7 mr-3 text-amber-500" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M9.5 4.043v1.854a.25.25 0 01-.4 0L7.043 4.043A.25.25 0 006.5 4.218v11.564a.25.25 0 00.41.171L9.5 13.957a.25.25 0 01.4 0l2.647 2.196a.25.25 0 00.41-.171V4.218a.25.25 0 00-.543-.175L9.5 4.043zM6.5 13.5v-7.39l.75-.621L9.5 7.043v6.457l-2.647 2.196L6.5 13.5zm7 0L10.5 15.696V7.043l2.25-1.854.75.621v7.39z"></path></svg>
Your Accomplishments
</h3>
<div>
<label for="resume-file" class="block text-sm font-medium text-gray-700 dark:text-gray-200 mb-2">Upload Resume/CV <span class="text-red-500">*</span></label>
<div class="mt-1 flex justify-center px-6 pt-5 pb-6 border-2 border-gray-300 dark:border-gray-500 border-dashed rounded-lg cursor-pointer hover:border-amber-400 dark:hover:border-amber-600 transition-colors duration-200">
<div class="space-y-1 text-center">
<svg class="mx-auto h-12 w-12 text-gray-400 dark:text-gray-300" stroke="currentColor" fill="none" viewBox="0 0 48 48" aria-hidden="true">
<path d="M28 8H12a4 4 0 00-4 4v20m32-12v8m0 0v8a4 4 0 01-4 4H12a4 4 0 01-4-4v-4m32-4l-3.172-3.172a4 4 0 00-5.656 0L28 28M8 32l9.172-9.172a4 4 0 015.656 0L28 32" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
</svg>
<div class="flex text-sm text-gray-600 dark:text-gray-300">
<label for="resume-file" class="relative cursor-pointer bg-white dark:bg-gray-700 rounded-md font-medium text-amber-600 hover:text-amber-500 focus-within:outline-none focus-within:ring-2 focus-within:ring-offset-2 focus-within:ring-amber-500 dark:focus-within:ring-offset-gray-700">
<span>Upload a file</span>
<input id="resume-file" name="resume_file" type="file" class="sr-only" accept=".pdf,.doc,.docx" required>
</label>
<p class="pl-1">or drag and drop</p>
</div>
<p class="text-xs text-gray-500 dark:text-gray-400">PDF, DOC, DOCX up to 10MB</p>
</div>
</div>
</div>
<div class="mt-6">
<label for="portfolio-link" class="block text-sm font-medium text-gray-700 dark:text-gray-200 mb-2">Portfolio/LinkedIn Profile (Optional)</label>
<input type="url" id="portfolio-link" name="portfolio_link" class="block w-full p-3 border border-gray-300 dark:border-gray-500 rounded-lg shadow-sm focus:ring-amber-500 focus:border-amber-500 bg-white dark:bg-gray-700 text-gray-800 dark:text-gray-200 placeholder-gray-400 dark:placeholder-gray-400 transition-all duration-200 ease-in-out hover:border-amber-300 dark:hover:border-amber-600" placeholder="e.g., https://your-portfolio.com or https://linkedin.com/in/yourname">
</div>
</div>
<!-- Experience & Skills Section -->
<div class="bg-gray-50 dark:bg-gray-600 p-6 rounded-2xl shadow-inner border border-gray-100 dark:border-gray-500">
<h3 class="text-2xl font-semibold text-gray-800 dark:text-gray-100 mb-5 pb-3 border-b border-gray-200 dark:border-gray-500 flex items-center">
<svg class="w-7 h-7 mr-3 text-amber-500" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z" clip-rule="evenodd"></path></svg>
Your Experience & Skills
</h3>
<div>
<label for="position-applying-for" class="block text-sm font-medium text-gray-700 dark:text-gray-200 mb-2">Position Applying For</label>
<select id="position-applying-for" name="position_applying_for" class="block w-full p-3 border border-gray-300 dark:border-gray-500 rounded-lg shadow-sm focus:ring-amber-500 focus:border-amber-500 bg-white dark:bg-gray-700 text-gray-800 dark:text-gray-200 transition-all duration-200 ease-in-out hover:border-amber-300 dark:hover:border-amber-600">
<option value="">Select a position...</option>
<option value="frontend-dev">Frontend Developer</option>
<option value="backend-dev">Backend Developer</option>
<option value="fullstack-dev">Fullstack Developer</option>
<option value="ux-designer">UX/UI Designer</option>
<option value="project-manager">Project Manager</option>
<option value="data-scientist">Data Scientist</option>
</select>
</div>
<div class="mt-6">
<label for="years-experience" class="block text-sm font-medium text-gray-700 dark:text-gray-200 mb-2">Years of Professional Experience</label>
<input type="number" id="years-experience" name="years_experience" min="0" max="50" class="block w-full p-3 border border-gray-300 dark:border-gray-500 rounded-lg shadow-sm focus:ring-amber-500 focus:border-amber-500 bg-white dark:bg-gray-700 text-gray-800 dark:text-gray-200 placeholder-gray-400 dark:placeholder-gray-400 transition-all duration-200 ease-in-out hover:border-amber-300 dark:hover:border-amber-600" placeholder="e.g., 5">
</div>
<div class="mt-6">
<label for="cover-letter" class="block text-sm font-medium text-gray-700 dark:text-gray-200 mb-2">Cover Letter (Optional)</label>
<textarea id="cover-letter" name="cover_letter" rows="5" class="block w-full p-3 border border-gray-300 dark:border-gray-500 rounded-lg shadow-sm focus:ring-amber-500 focus:border-amber-500 bg-white dark:bg-gray-700 text-gray-800 dark:text-gray-200 dark:placeholder-gray-400 placeholder-gray-400 transition-all duration-200 ease-in-out hover:border-amber-300 dark:hover:border-amber-600" placeholder="Tell us why you're a great fit for this role..."></textarea>
</div>
</div>
<!-- Availability & Preferences Section -->
<div class="bg-gray-50 dark:bg-gray-600 p-6 rounded-2xl shadow-inner border border-gray-100 dark:border-gray-500">
<h3 class="text-2xl font-semibold text-gray-800 dark:text-gray-100 mb-5 pb-3 border-b border-gray-200 dark:border-gray-500 flex items-center">
<svg class="w-7 h-7 mr-3 text-amber-500" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M5.5 12A.5.5 0 016 11.5a.5.5 0 00.5-.5H12a.5.5 0 00.5.5.5.5 0 01.5.5v1a.5.5 0 01-.5.5h-7a.5.5 0 01-.5-.5v-1a.5.5 0 01.5-.5zm0 0v-1a.5.5 0 01.5-.5h7a.5.5 0 01.5.5v1a.5.5 0 01-.5.5h-7a.5.5 0 01-.5-.5zM3 10V4.5A2.5 2.5 0 015.5 2H10a.5.5 0 01.5.5v15a.5.5 0 01-.5.5H5.5A2.5 2.5 0 013 15.5V10z" clip-rule="evenodd"></path></svg>
Your Availability
</h3>
<div class="flex items-center space-x-3">
<input id="remote-work" name="remote_work" type="checkbox" class="h-5 w-5 text-amber-600 focus:ring-amber-500 border-gray-300 dark:border-gray-500 rounded-md dark:bg-gray-700">
<label for="remote-work" class="text-sm font-medium text-gray-700 dark:text-gray-200">Interested in remote work</label>
</div>
<div class="mt-4">
<label for="start-date" class="block text-sm font-medium text-gray-700 dark:text-gray-200 mb-2">Earliest Start Date</label>
<input type="date" id="start-date" name="start_date" class="block w-full p-3 border border-gray-300 dark:border-gray-500 rounded-lg shadow-sm focus:ring-amber-500 focus:border-amber-500 bg-white dark:bg-gray-700 text-gray-800 dark:text-gray-200 transition-all duration-200 ease-in-out hover:border-amber-300 dark:hover:border-amber-600">
</div>
</div>
<div class="mt-8 flex justify-center">
<button type="submit" class="inline-flex items-center px-8 py-4 border border-transparent text-lg font-semibold rounded-full shadow-lg text-white bg-amber-500 hover:bg-amber-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-amber-500 dark:focus:ring-offset-gray-700 transform transition-all duration-300 ease-in-out hover:scale-105 active:scale-95 group">
<svg class="w-6 h-6 mr-3 -ml-1 text-white group-hover:animate-bounce-fwd" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M3 17a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zm3.293-7.707a1 1 0 011.414 0L9 10.586V3a1 1 0 112 0v7.586l1.293-1.293a1 1 0 111.414 1.414l-3 3a1 1 0 01-1.414 0l-3-3a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
Submit Application
</button>
</div>
</form>
</div>
</div>Composants associés
Composant Formulaires
Un composant de formulaires complexe, réactif et à thème sombre pour les interfaces de médias sociaux avec un design monochrome 3D. Utilise Tailwind CSS avec les préfixes dark : pour le mode sombre et inclut des exemples d’éléments de formulaire.
Composant Formulaires
Composant Forms avec le style Glassmorphism, la palette de couleurs vives et la complexité simple pour le portefeuille. Conception réactive avec prise en charge du thème sombre à l’aide de Tailwind CSS. Pas de JavaScript.
Photography_Contact_Form
Un formulaire de contact épuré et minimaliste pour les portfolios de photographie, inspiré de la typographie suisse/internationale, avec une palette de couleurs rétro/vintage discrète. Entièrement réactif avec prise en charge du mode sombre.