Skeuomorphic_Social_Media_Form_Complex
A complex, skeuomorphic social media form component with complementary colors, responsive design, and dark mode support. Mimics real-world button feels and textures.
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>Related Components
Photography_Contact_Form
A clean, minimalist contact form for photography portfolios, inspired by Swiss/International Typography, featuring a muted retro/vintage color palette. Fully responsive with dark mode support.
Gaming_Material_Form
A responsive gaming-themed form inspired by Material Design principles, featuring triadic colors, depth effects, and dark mode support. Suitable for login, registration, or game settings.
Forms Component
A complex, responsive, dark-theme enabled forms component for social media interfaces with a 3D monochromatic design. Uses Tailwind CSS with dark: prefixes for dark mode and includes example form elements.