Skeuomorphic_Social_Media_Form_Complex
Un composant de formulaire de réseau social complexe et skeuomorphe avec des couleurs complémentaires, un design réactif et une prise en charge du mode sombre. Imite les sensations et les textures des boutons du monde réel.
HTML Code
<div class="p-4 sm:p-6 lg:p-8 min-h-screen bg-gradient-to-br from-gray-200 to-gray-300 dark:from-gray-900 dark:to-gray-800 flex items-center justify-center font-sans">
<div class="w-full max-w-2xl bg-gradient-to-br from-gray-100 to-gray-200 dark:from-gray-800 dark:to-gray-900 rounded-3xl shadow-xl border-t border-gray-50 border-solid dark:border-gray-700/50 p-6 sm:p-8 lg:p-10 flex flex-col gap-8 transition-all duration-300 ease-in-out">
<h2 class="text-3xl sm:text-4xl lg:text-5xl font-extrabold text-blue-800 dark:text-blue-200 text-center drop-shadow-md tracking-tight">
Connect and Share
</h2>
<!-- Post Creation Section -->
<section class="bg-gray-100 dark:bg-gray-850 p-6 rounded-2xl shadow-inner-lg shadow-gray-300/50 dark:shadow-gray-950/50 border-b border-gray-300 dark:border-gray-700 relative">
<div class="absolute inset-0 rounded-2xl pointer-events-none"
style="background: radial-gradient(circle at top left, rgba(255,255,255,0.05), rgba(255,255,255,0) 50%),
radial-gradient(circle at bottom right, rgba(0,0,0,0.05), rgba(0,0,0,0) 50%);"></div>
<div class="flex items-start gap-4 mb-4">
<img src="https://randomuser.me/api/portraits/women/6.jpg" alt="User Avatar" class="w-14 h-14 rounded-full border-2 border-gray-300 dark:border-gray-600 shadow-md transform translate-z-0">
<textarea placeholder="What's on your mind, Sarah?" class="flex-1 text-lg p-3 rounded-xl border border-gray-300 dark:border-gray-600 bg-gray-50 dark:bg-gray-700 text-gray-800 dark:text-gray-200 shadow-inner focus:outline-none focus:ring-2 focus:ring-blue-400 dark:focus:ring-blue-500 transition duration-200 appearance-none" rows="4" style="resize: none;"></textarea>
</div>
<div class="flex flex-col sm:flex-row items-center justify-between gap-4 mt-6">
<div class="flex flex-wrap gap-3">
<button class="flex items-center gap-2 p-3 rounded-full bg-blue-300 hover:bg-blue-400 active:bg-blue-500 text-blue-900 dark:bg-blue-600 dark:hover:bg-blue-700 dark:active:bg-blue-800 dark:text-gray-100 font-semibold shadow-md shadow-blue-500/30 dark:shadow-none hover:shadow-lg hover:-translate-y-0.5 active:translate-y-0.5 transition-all duration-200 ease-in-out border border-blue-400 dark:border-blue-700 relative overflow-hidden group">
<div class="inset-0 absolute rounded-full bg-gradient-to-t from-blue-400 to-blue-200 opacity-0 group-hover:opacity-100 transition duration-300 group-active:opacity-0 dark:from-blue-700 dark:to-blue-500"></div>
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M4 3a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V5a2 2 0 00-2-2H4zm12 12H4l4-4 4 4 4-4V5c0-.55-.45-1-1-1H5a1 1 0 00-1 1v7.586l3.293-3.293a1 1 0 011.414 0L9 11l3.293-3.293a1 1 0 011.414 0L15 10.586V5h-.586l-2-2-.414-.414-.586-.586-.414-.414-.586-.586-.414-.414-.586-.586-.414-.414-.586-.586-.414-.414-.586-.586-.414-.414-.586-.586-.414-.414-.586-.586-.414-.414-.586-.586-.414-.414-.586-.586-.414-.414-.586-.586-.414-.414-.586-.586-.414-.414-.586-.586-.414-.414-.586-.586-.414-.414-.586-.586-.414-.414-.586-.586-.414-.414-.586-.586-.414-.414-.586-.586-.414-.414-.586-.586-.414-.414-.586-.586-.414-.414-.586-.586-.414-.414-.586-.586-.414-.414-.586-.586-.414-.414-.586-.586-.414-.414-.586-.586-.414-.414-.586-.586-.414-.414-.586-.586-.414-.414-.586-.586L14 13.586V5H6v8.586l-2-2-.414-.414-.586-.586-.414-.414-.586-.586-.414-.414-.586-.586L4 12.586V5h-.586L2 7V5c0-.55.45-1 1-1h13zm-1 9.586L13.586 12 12 13.586l-2-2-1.414 1.414L8 15.586V5h-.586L4 7V5c0-.55.45-1 1-1h10a1 1 0 011 1v7.586zM15 13.414L13.586 12 12 13.414l-2-2-1.414 1.414L8 15.414V5h-.586L4 7V5c0-.55.45-1 1-1h10a1 1 0 011 1v7.414zM15 13.414L13.586 12 12 13.414l-2-2-1.414 1.414L8 15.414V5h-.586L4 7V5c0-.55.45-1 1-1h9.586L13 13.586z" clip-rule="evenodd" /></svg>
<span class="relative z-10">Photo/Video</span>
</button>
<button class="flex items-center gap-2 p-3 rounded-full bg-pink-300 hover:bg-pink-400 active:bg-pink-500 text-pink-900 dark:bg-pink-600 dark:hover:bg-pink-700 dark:active:bg-pink-800 dark:text-gray-100 font-semibold shadow-md shadow-pink-500/30 dark:shadow-none hover:shadow-lg hover:-translate-y-0.5 active:translate-y-0.5 transition-all duration-200 ease-in-out border border-pink-400 dark:border-pink-700 relative overflow-hidden group">
<div class="inset-0 absolute rounded-full bg-gradient-to-t from-pink-400 to-pink-200 opacity-0 group-hover:opacity-100 transition duration-300 group-active:opacity-0 dark:from-pink-700 dark:to-pink-500"></div>
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M7 4a3 3 0 016 0v4a3 3 0 11-6 0V4zm4 10.93A7.001 7.001 0 0017 8a1 1 0 10-2 0A5 5 0 015 8a1 1 0 00-2 0 7.001 7.001 0 006 6.93V17H6a1 1 0 100 2h8a1 1 0 100-2h-3v-2.07z" clip-rule="evenodd" /></svg>
<span class="relative z-10">Feeling/Activity</span>
</button>
</div>
<button type="submit" class="px-8 py-3 rounded-full text-xl font-bold bg-green-500 hover:bg-green-600 active:bg-green-700 text-white dark:bg-green-700 dark:hover:bg-green-800 dark:active:bg-green-900 shadow-xl shadow-green-600/40 dark:shadow-none active:shadow-inner active:shadow-green-900/50 hover:-translate-y-1 active:translate-y-0.5 transition-all duration-300 ease-in-out border-b-4 border-green-700 dark:border-green-900 relative overflow-hidden group">
<div class="inset-0 absolute rounded-full bg-gradient-to-t from-green-600 to-green-400 opacity-0 group-hover:opacity-100 transition duration-300 group-active:opacity-0 dark:from-green-800 dark:to-green-600"></div>
<span class="relative z-10">Post</span>
</button>
</div>
</section>
<!-- Advanced Settings / Privacy Section -->
<section class="grid grid-cols-1 md:grid-cols-2 gap-6">
<div class="bg-gray-100 dark:bg-gray-850 p-6 rounded-2xl shadow-inner-lg shadow-gray-300/50 dark:shadow-gray-950/50 border-b border-gray-300 dark:border-gray-700 relative text-gray-800 dark:text-gray-200">
<div class="absolute inset-0 rounded-2xl pointer-events-none"
style="background: radial-gradient(circle at top right, rgba(255,255,255,0.05), rgba(255,255,255,0) 50%),
radial-gradient(circle at bottom left, rgba(0,0,0,0.05), rgba(0,0,0,0) 50%);"></div>
<h3 class="text-xl font-semibold mb-4 text-blue-700 dark:text-blue-300 drop-shadow-sm">Audience Settings</h3>
<div class="mb-4">
<label for="audience" class="block text-gray-700 dark:text-gray-300 text-sm font-medium mb-2">Who can see your post?</label>
<div class="relative">
<select id="audience" class="block appearance-none w-full bg-gray-50 dark:bg-gray-700 border border-gray-300 dark:border-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-400 dark:focus:ring-blue-500 text-gray-800 dark:text-gray-200 py-3 pl-4 pr-10 rounded-xl shadow-inner transition duration-200 cursor-pointer">
<option value="public">Public</option>
<option value="friends">Friends</option>
<option value="private">Only Me</option>
<option value="custom">Custom</option>
</select>
<div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-gray-700 dark:text-gray-300">
<svg class="fill-current h-4 w-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M9.293 12.95l.707.707 3.536-3.536.707-.707L10 6.586 6.464 10.12l.707.707z"/></svg>
</div>
</div>
</div>
<div>
<label for="comments" class="block text-gray-700 dark:text-gray-300 text-sm font-medium mb-2">Who can comment?</label>
<div class="relative">
<select id="comments" class="block appearance-none w-full bg-gray-50 dark:bg-gray-700 border border-gray-300 dark:border-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-400 dark:focus:ring-blue-500 text-gray-800 dark:text-gray-200 py-3 pl-4 pr-10 rounded-xl shadow-inner transition duration-200 cursor-pointer">
<option value="anyone">Anyone</option>
<option value="friends">Friends</option>
<option value="mentions">Only Mentions</option>
</select>
<div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-gray-700 dark:text-gray-300">
<svg class="fill-current h-4 w-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M9.293 12.95l.707.707 3.536-3.536.707-.707L10 6.586 6.464 10.12l.707.707z"/></svg>
</div>
</div>
</div>
</div>
<div class="bg-gray-100 dark:bg-gray-850 p-6 rounded-2xl shadow-inner-lg shadow-gray-300/50 dark:shadow-gray-950/50 border-b border-gray-300 dark:border-gray-700 relative text-gray-800 dark:text-gray-200">
<div class="absolute inset-0 rounded-2xl pointer-events-none"
style="background: radial-gradient(circle at top left, rgba(255,255,255,0.05), rgba(255,255,255,0) 50%),
radial-gradient(circle at bottom right, rgba(0,0,0,0.05), rgba(0,0,0,0) 50%);"></div>
<h3 class="text-xl font-semibold mb-4 text-blue-700 dark:text-blue-300 drop-shadow-sm">Advanced Options</h3>
<div class="flex items-center justify-between mb-4">
<span class="text-gray-700 dark:text-gray-300">Enable notifications</span>
<label class="relative inline-flex items-center cursor-pointer transition-all duration-200 ease-in-out">
<input type="checkbox" value="" class="sr-only peer">
<div class="w-14 h-8 bg-gray-300 dark:bg-gray-700 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[4px] after:left-[4px] after:bg-white after:border after:border-gray-300 after:rounded-full after:h-6 after:w-6 after:transition-all dark:border-gray-600 peer-checked:bg-green-500 shadow-inner peer-checked:shadow-green-600/50 dark:shadow-none"></div>
</label>
</div>
<div class="flex items-center justify-between mb-4">
<span class="text-gray-700 dark:text-gray-300">Save as draft</span>
<label class="relative inline-flex items-center cursor-pointer transition-all duration-200 ease-in-out">
<input type="checkbox" value="" class="sr-only peer">
<div class="w-14 h-8 bg-gray-300 dark:bg-gray-700 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[4px] after:left-[4px] after:bg-white after:border after:border-gray-300 after:rounded-full after:h-6 after:w-6 after:transition-all dark:border-gray-600 peer-checked:bg-green-500 shadow-inner peer-checked:shadow-green-600/50 dark:shadow-none"></div>
</label>
</div>
<div class="flex items-center justify-between">
<span class="text-gray-700 dark:text-gray-300">Enable location tagging</span>
<label class="relative inline-flex items-center cursor-pointer transition-all duration-200 ease-in-out">
<input type="checkbox" value="" class="sr-only peer">
<div class="w-14 h-8 bg-gray-300 dark:bg-gray-700 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[4px] after:left-[4px] after:bg-white after:border after:border-gray-300 after:rounded-full after:h-6 after:w-6 after:transition-all dark:border-gray-600 peer-checked:bg-green-500 shadow-inner peer-checked:shadow-green-600/50 dark:shadow-none"></div>
</label>
</div>
</div>
</section>
<!-- Call to action/secondary actions -->
<div class="flex flex-col sm:flex-row gap-4 justify-end mt-4">
<button type="button" class="px-6 py-3 rounded-full text-lg font-semibold bg-gray-300 hover:bg-gray-400 active:bg-gray-500 text-gray-800 dark:bg-gray-700 dark:hover:bg-gray-600 dark:active:bg-gray-500 dark:text-gray-200 shadow-md shadow-gray-400/30 dark:shadow-none hover:shadow-lg hover:-translate-y-0.5 active:translate-y-0.5 transition-all duration-200 ease-in-out border border-gray-400 dark:border-gray-600 relative overflow-hidden group">
<div class="inset-0 absolute rounded-full bg-gradient-to-t from-gray-400 to-gray-200 opacity-0 group-hover:opacity-100 transition duration-300 group-active:opacity-0 dark:from-gray-700 dark:to-gray-500"></div>
<span class="relative z-10">Cancel</span>
</button>
<button type="button" class="px-6 py-3 rounded-full text-lg font-semibold bg-indigo-500 hover:bg-indigo-600 active:bg-indigo-700 text-white dark:bg-indigo-700 dark:hover:bg-indigo-800 dark:active:bg-indigo-900 shadow-xl shadow-indigo-600/40 dark:shadow-none active:shadow-inner active:shadow-indigo-900/50 hover:-translate-y-1 active:translate-y-0.5 transition-all duration-300 ease-in-out border-b-4 border-indigo-700 dark:border-indigo-900 relative overflow-hidden group">
<div class="inset-0 absolute rounded-full bg-gradient-to-t from-indigo-600 to-indigo-400 opacity-0 group-hover:opacity-100 transition duration-300 group-active:opacity-0 dark:from-indigo-800 dark:to-indigo-600"></div>
<span class="relative z-10">Save Draft</span>
</button>
</div>
</div>
</div>Composants associés
Formulaire de soins de santé biologique/inspiré de la nature
Un composant de formulaire simple et réactif avec un design naturel et fluide, une palette de couleurs bleues d’entreprise et une prise en charge du mode sombre, adapté aux applications médicales et de santé.
Composant de formulaire de médias sociaux avec conception 3D et couleurs vives
Un composant de formulaire de réseau social complexe, réactif et dynamique inspiré de la 3D avec prise en charge du thème sombre.
Glassmorphism Forms Component
Glassmorphism Forms Component avec des tons de terre, un design réactif et une prise en charge du thème sombre pour un site Web de blog/contenu.