html all
Inputs
<!-- 🟢 TERE `<body>` KE LIYE GOOGLE KA SAKHT BANA-BANAYA ELEMENT -->
<md-outlined-text-field
id="msgInput"
placeholder="Type a message..."
style="width: 100%;">
<!-- Google ka ready-made icon jo automatic input box ke andar set ho jayega -->
<span class="material-symbols-outlined" slot="leading-icon">image</span>
</md-outlined-text-field>
Inputs
<!-- 🟢 TERE `<body>` TAG KE ANDAR BAS ITNA DAALNA HAI -->
<!-- 1. HIDDEN FILE INPUT (Gallery kholne ke liye backend system) -->
<input type="file" id="galleryInput" accept="image/*" style="display: none;" onchange="console.log('Image Selected!')">
<!-- 2. MAIN CHAT SYSTEM BAR -->
<div style="display: flex; align-items: center; gap: 8px; padding: 10px; width: 100%;">
<!-- Gallery Icon Element -->
<md-icon-button type="button" onclick="document.getElementById('galleryInput').click()">
<span class="material-symbols-outlined">image</span>
</md-icon-button>
<!-- Typing Message Input Element -->
<md-outlined-text-field id="msgInput" placeholder="Type a message..." style="flex: 1;"></md-outlined-text-field>
<!-- Send Button Element -->
<md-filled-button id="sendBtn">
<span class="material-symbols-outlined" slot="icon">send</span>
Send
</md-filled-button>
</div>
Navbars
<!-- BASS YAHI COPY KARNA HAI DOST - BODY TAG KE ANDAR WALA HISA -->
<!-- Fixed Bottom Navbar -->
<div class="fixed left-1/2 -translate-x-1/2 bottom-[calc(12px+env(safe-area-inset-bottom))] w-[calc(100%-24px)] max-w-[520px] z-[999]">
<!-- Glassmorphism Container with Theme Colors -->
<nav class="flex items-center justify-between gap-1 p-2 rounded-full bg-[#eff7ff]/70 dark:bg-slate-900/70 backdrop-blur-xl backdrop-saturate-200 border border-white/60 dark:border-white/10 shadow-[inset_0px_2px_4px_rgba(255,255,255,0.7),0_10px_30px_rgba(79,156,232,0.3)] dark:shadow-[inset_0px_2px_4px_rgba(255,255,255,0.05),0_10px_30px_rgba(0,0,0,0.6)] transition-colors duration-300">
<!-- 1. Home Item (Active State - Isko Highlight kiya hai) -->
<a href="#" class="flex flex-col items-center flex-1 min-w-0 py-2 px-1 rounded-full bg-white/60 dark:bg-white/10 text-[#4f9ce8] dark:text-white shadow-[inset_2px_2px_5px_-2px_rgba(255,255,255,0.8),inset_-2px_-1px_5px_0px_rgba(255,255,255,0.8)] dark:shadow-[inset_2px_2px_5px_-2px_rgba(255,255,255,0.2)] transition-all duration-300 scale-100">
<!-- Home Icon -->
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="w-6 h-6">
<path stroke-linecap="round" stroke-linejoin="round" d="M2.25 12l8.954-8.955c.44-.439 1.152-.439 1.591 0L21.75 12M4.5 9.75v10.125c0 .621.504 1.125 1.125 1.125H9.75v-4.875c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V21h4.125c.621 0 1.125-.504 1.125-1.125V9.75M8.25 21h8.25" />
</svg>
<span class="text-[10px] font-bold mt-1 leading-none">Home</span>
</a>
<!-- 2. Search Item (Hover State Normal) -->
<a href="#" class="group flex flex-col items-center flex-1 min-w-0 py-2 px-1 rounded-full text-[#7faeed] dark:text-slate-400 hover:bg-white/40 dark:hover:bg-white/5 hover:text-[#4f9ce8] dark:hover:text-slate-200 transition-all duration-300 active:scale-95">
<!-- Search Icon -->
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="w-6 h-6 group-hover:rotate-6 transition-transform duration-300">
<path stroke-linecap="round" stroke-linejoin="round" d="M21 21l-5.197-5.197m0 0A7.5 7.5 0 105.196 5.196a7.5 7.5 0 0010.607 10.607z" />
</svg>
<span class="text-[10px] font-bold mt-1 leading-none">Search</span>
</a>
<!-- 3. Create/Add Item (Middle) -->
<a href="#" class="group flex flex-col items-center flex-1 min-w-0 py-2 px-1 rounded-full text-[#7faeed] dark:text-slate-400 hover:bg-white/40 dark:hover:bg-white/5 hover:text-[#4f9ce8] dark:hover:text-slate-200 transition-all duration-300 active:scale-95">
<!-- Plus Icon -->
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="w-6 h-6 group-hover:scale-110 transition-transform duration-300">
<path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15" />
</svg>
<span class="text-[10px] font-bold mt-1 leading-none">Add</span>
</a>
<!-- 4. Notifications/Likes Item -->
<a href="#" class="group flex flex-col items-center flex-1 min-w-0 py-2 px-1 rounded-full text-[#7faeed] dark:text-slate-400 hover:bg-white/40 dark:hover:bg-white/5 hover:text-[#4f9ce8] dark:hover:text-slate-200 transition-all duration-300 active:scale-95">
<!-- Heart Icon -->
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="w-6 h-6 group-hover:-rotate-6 transition-transform duration-300">
<path stroke-linecap="round" stroke-linejoin="round" d="M21 8.25c0-2.485-2.099-4.5-4.688-4.5-1.935 0-3.597 1.126-4.312 2.733-.715-1.607-2.377-2.733-4.313-2.733C5.1 3.75 3 5.765 3 8.25c0 7.22 9 12 9 12s9-4.78 9-12z" />
</svg>
<span class="text-[10px] font-bold mt-1 leading-none">Likes</span>
</a>
<!-- 5. PROFILE ITEM (TUMHARI PROFILE PICTURE KE SATH) -->
<a href="#" class="group flex flex-col items-center flex-1 min-w-0 py-[6px] px-1 rounded-full text-[#7faeed] dark:text-slate-400 hover:bg-white/40 dark:hover:bg-white/5 hover:text-[#4f9ce8] dark:hover:text-slate-200 transition-all duration-300 active:scale-95">
<!-- Circular Profile Image -->
<div class="w-[26px] h-[26px] rounded-full overflow-hidden border-[2px] border-[#7faeed] dark:border-slate-500 group-hover:border-[#4f9ce8] dark:group-hover:border-white transition-colors duration-300">
<!-- Apna 'profile.webp' image ka path yaha daal dena -->
<img src="profile.webp" alt="Profile" class="w-full h-full object-cover group-hover:scale-110 transition-transform duration-300" onerror="this.src='https://placehold.co/100x100/dae8f7/7faeed?text=P'">
</div>
<span class="text-[10px] font-bold mt-1 leading-none">Profile</span>
</a>
</nav>
</div>
Notifications
<!-- BASS YAHI COPY KARNA HAI DOST - BODY TAG KE ANDAR -->
<div class="max-w-sm w-full rounded-3xl p-5 md:p-6 bg-gradient-to-br from-[#dae8f7] to-[#d6e5f7] dark:from-slate-800 dark:to-slate-900 shadow-[-1px_-1px_0px_0px_#ffffff,3px_3px_5px_0px_rgba(79,156,232,0.7),5px_5px_20px_0px_rgba(79,156,232,0.7)] dark:shadow-[-1px_-1px_0px_0px_rgba(255,255,255,0.15),3px_3px_5px_0px_rgba(0,0,0,0.4),5px_5px_20px_0px_rgba(0,0,0,0.5)] transition-all duration-300 border border-transparent dark:border-white/5 relative overflow-hidden group">
<!-- Background Magic Glow (Thoda chamak dene ke liye) -->
<div class="absolute -right-10 -top-10 w-32 h-32 bg-[#7faeed]/20 dark:bg-slate-700/30 rounded-full blur-2xl pointer-events-none transition-all duration-500 group-hover:scale-150"></div>
<div class="relative z-10">
<!-- Heading -->
<h2 class="text-[18px] md:text-[20px] font-bold mb-2 text-[#4f9ce8] dark:text-white drop-shadow-sm flex items-center gap-2">
<!-- Ek chota sa cookie icon laga diya hai maza aayega (agar fontawesome hai toh dikhega varna skip ho jayega) -->
<i class="fa-solid fa-cookie-bite text-[#7faeed] dark:text-slate-400"></i>
Hello Traveler,
</h2>
<!-- Description -->
<p class="text-[14px] md:text-[15px] mb-6 text-[#6e9bc7] dark:text-slate-300 leading-relaxed font-medium">
This website uses cookies to enhance user experience and to analyze performance and traffic on our website.
</p>
<!-- Buttons Container -->
<div class="flex items-center justify-end gap-3 md:gap-4">
<!-- Decline Button (Ghost Button - Simple and Clean) -->
<button class="px-4 py-2 rounded-xl text-[15px] font-bold text-[#8eb8e6] dark:text-slate-400 hover:text-[#4f9ce8] dark:hover:text-white hover:bg-white/40 dark:hover:bg-white/5 transition-all duration-300 active:scale-95">
Decline
</button>
<!-- Accept Button (Neumorphic Pop 3D Button) -->
<button class="px-5 py-2 rounded-xl text-[15px] font-bold text-[#4f9ce8] dark:text-white bg-gradient-to-br from-[#dae8f7] to-[#d6e5f7] dark:from-slate-700 dark:to-slate-800 shadow-[3px_3px_6px_rgba(79,156,232,0.4),-3px_-3px_6px_#ffffff] dark:shadow-[3px_3px_6px_rgba(0,0,0,0.4),-3px_-3px_6px_rgba(255,255,255,0.1)] hover:scale-105 active:scale-95 transition-all duration-300 border border-transparent dark:border-white/5">
Accept
</button>
</div>
</div>
</div>
Headers
<header class="w-full sticky top-0 z-50 px-4 md:px-8 py-3 flex items-center justify-between bg-[#eff7ff]/80 dark:bg-slate-950/80 backdrop-blur-md border-b border-white/50 dark:border-white/5 shadow-sm transition-colors duration-300">
<!-- 1. LEFT SIDE: LOGO & LOGO NAME -->
<a href="#" class="flex items-center gap-3 cursor-pointer group">
<!-- Logo Icon (logo.webp) -->
<div class="w-[45px] h-[45px] md:w-[50px] md:h-[50px] rounded-xl overflow-hidden shadow-inner dark:shadow-black/50 border-2 border-white dark:border-slate-700 transition-transform duration-300 group-hover:scale-105 bg-white dark:bg-slate-800 flex items-center justify-center">
<img src="logo.webp" alt="Logo" class="w-full h-full object-cover" />
</div>
<!-- Logo Name (logoname.webp) -->
<div class="h-[25px] md:h-[30px] transition-transform duration-300 group-hover:translate-x-1">
<img src="logoname.webp" alt="My Website Name" class="h-full w-auto object-contain" />
</div>
</a>
<!-- 2. RIGHT SIDE: THEMED HAMBURGER BUTTON -->
<label class="group relative cursor-pointer z-50">
<!-- Hidden Checkbox for Toggle Magic without JS -->
<input type="checkbox" class="peer hidden" />
<!-- Neumorphic Button Box -->
<div class="w-[45px] h-[45px] md:w-[50px] md:h-[50px] flex flex-col items-center justify-center gap-[5px] rounded-xl flex-shrink-0 bg-gradient-to-br from-[#dae8f7] to-[#d6e5f7] dark:from-slate-800 dark:to-slate-900 shadow-[-1px_-1px_0px_0px_#ffffff,3px_3px_5px_0px_rgba(79,156,232,0.7)] dark:shadow-[-1px_-1px_0px_0px_rgba(255,255,255,0.15),3px_3px_5px_0px_rgba(0,0,0,0.4)] transition-all duration-300 border border-transparent dark:border-white/5 hover:scale-105 peer-active:scale-95 z-10 overflow-hidden">
<!-- Hover light glow effect inside -->
<div class="absolute inset-0 bg-white/20 dark:bg-white/5 opacity-0 group-hover:opacity-100 transition-opacity duration-300 rounded-xl pointer-events-none"></div>
<!-- Hamburger Line 1 -->
<span class="w-[24px] md:w-[28px] h-[3px] bg-[#7faeed] dark:bg-slate-400 rounded-full transition-all duration-500 origin-center peer-checked:rotate-[45deg] peer-checked:translate-y-[8px] group-hover:bg-[#4f9ce8] dark:group-hover:bg-slate-200"></span>
<!-- Hamburger Line 2 -->
<span class="w-[24px] md:w-[28px] h-[3px] bg-[#7faeed] dark:bg-slate-400 rounded-full transition-all duration-500 peer-checked:opacity-0 peer-checked:translate-x-6 group-hover:bg-[#4f9ce8] dark:group-hover:bg-slate-200"></span>
<!-- Hamburger Line 3 -->
<span class="w-[24px] md:w-[28px] h-[3px] bg-[#7faeed] dark:bg-slate-400 rounded-full transition-all duration-500 origin-center peer-checked:-rotate-[45deg] peer-checked:-translate-y-[8px] group-hover:bg-[#4f9ce8] dark:group-hover:bg-slate-200"></span>
</div>
</label>
</header>
Buttons
<div class="flex flex-col md:flex-row items-center justify-center gap-10 p-10 min-h-screen bg-[#eff7ff] dark:bg-slate-950">
<label class="group relative cursor-pointer block w-[70px] h-[70px]">
<input type="checkbox" class="peer hidden" />
<!-- Base Button Body -->
<div class="absolute inset-0 rounded-full flex items-center justify-center bg-white dark:bg-slate-800 shadow-[5px_5px_15px_rgba(0,0,0,0.1),-5px_-5px_15px_rgba(255,255,255,0.8)] dark:shadow-[-2px_-2px_6px_rgba(255,255,255,0.05),4px_4px_10px_rgba(0,0,0,0.5)] transition-all duration-300 group-hover:scale-105 peer-active:scale-95 overflow-hidden z-10">
<!-- Rainbow Jhaler (Glow/Spinning Border) - Activates on Click -->
<div class="absolute inset-[-100%] opacity-0 peer-checked:opacity-100 transition-opacity duration-500 bg-[conic-gradient(red,yellow,green,cyan,blue,magenta,red)] animate-[spin_3s_linear_infinite] z-0"></div>
<!-- Inner Circle to hide center of rainbow and show border -->
<div class="absolute inset-[4px] bg-white dark:bg-slate-800 rounded-full z-10 transition-colors duration-300"></div>
<!-- Outline Thumb Icon (Unliked State) -->
<svg xmlns="http://www.w3.org/2000/svg" class="w-8 h-8 text-slate-400 absolute z-20 peer-checked:opacity-0 peer-checked:-rotate-45 peer-checked:scale-50 transition-all duration-500" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M14 10h4.764a2 2 0 011.789 2.894l-3.5 7A2 2 0 0115.263 21h-4.017c-.163 0-.326-.02-.485-.06L7 20m7-10V5a2 2 0 00-2-2h-.095c-.5 0-.905.405-.905.905 0 .714-.211 1.412-.608 2.006L7 11v9m7-10h-2M7 20H5a2 2 0 01-2-2v-6a2 2 0 012-2h2.514" />
</svg>
<!-- Solid Blue Thumb Icon (Liked State - Shake/Vibrate Effect) -->
<svg xmlns="http://www.w3.org/2000/svg" class="w-8 h-8 text-blue-500 absolute z-20 opacity-0 scale-0 peer-checked:scale-110 peer-checked:opacity-100 peer-checked:-rotate-12 peer-checked:animate-[bounce_1s_infinite] transition-all duration-500 drop-shadow-[0_0_8px_rgba(59,130,246,0.8)]" fill="currentColor" viewBox="0 0 24 24">
<path d="M2 10.5a1.5 1.5 0 011.5-1.5h3a1.5 1.5 0 011.5 1.5v9a1.5 1.5 0 01-1.5 1.5h-3A1.5 1.5 0 012 19.5v-9zM15.263 21c.853 0 1.61-.54 1.85-1.345l3.5-11.667A2 2 0 0018.694 6H13V3a2 2 0 00-2-2h-.095c-.5 0-.905.405-.905.905 0 .714-.211 1.412-.608 2.006L7.543 8h.082l2.367-3.55a2 2 0 011.664-.895H13v3.5a1.5 1.5 0 001.5 1.5h4.194l-3.5 11.667h-4.017a1.886 1.886 0 01-.485-.06L9 19.5V11l4.004-6.006A3.992 3.992 0 0014 2.5V6a2 2 0 002 2h2.694a.5.5 0 01.478.641l-3.5 11.667a.5.5 0 01-.478.344h-4.017a.386.386 0 01-.097-.012L9 20h6.263z" />
</svg>
</div>
</label>
Inputs
<div class="flex-1 w-full rounded-3xl p-1.5 md:p-2 flex items-end bg-gradient-to-br from-[#dae8f7] to-[#d6e5f7] dark:from-slate-800 dark:to-slate-900 shadow-[-1px_-1px_0px_0px_#ffffff,3px_3px_5px_0px_rgba(79,156,232,0.7),5px_5px_20px_0px_rgba(79,156,232,0.7)] dark:shadow-[-1px_-1px_0px_0px_rgba(255,255,255,0.15),3px_3px_5px_0px_rgba(0,0,0,0.4),5px_5px_20px_0px_rgba(0,0,0,0.5)] transition-all duration-300">
<!-- Pure Magic: ContentEditable Div (Expands Vertically Only) -->
<!-- break-words aur whitespace-pre-wrap isko width me failne nahi denge -->
<!-- empty:before trick se bina JS ke placeholder lagaya hai -->
<div
contenteditable="true"
data-placeholder="Type a message..."
class="flex-1 min-h-[44px] max-h-[140px] px-3 py-2.5 bg-transparent text-[#6e9bc7] dark:text-slate-300 text-[16px] md:text-[18px] font-medium outline-none overflow-y-auto break-words whitespace-pre-wrap empty:before:content-[attr(data-placeholder)] empty:before:text-[#9EBCD9] dark:empty:before:text-slate-500 cursor-text leading-relaxed [&::-webkit-scrollbar]:hidden [-ms-overflow-style:none] [scrollbar-width:none] caret-[#7faeed] dark:caret-slate-400"
></div>
<!-- Pin / Attachment Icon Button (Always stays at bottom right of the box) -->
<button class="w-[42px] h-[42px] flex items-center justify-center rounded-full flex-shrink-0 group/pin transition-all duration-300 hover:bg-[#eff7ff] dark:hover:bg-slate-700 active:scale-90 mb-0.5 mr-0.5">
<i class="fa-solid fa-paperclip text-[#9EBCD9] dark:text-slate-500 text-xl group-hover/pin:text-[#6e9bc7] dark:group-hover/pin:text-slate-300 group-hover/pin:rotate-12 transition-all duration-300"></i>
</button>
</div>
<!-- 2. Send Message Circle Button (Always stays at bottom next to the box) -->
<button class="w-[55px] h-[55px] md:w-[60px] md:h-[60px] flex items-center justify-center rounded-full flex-shrink-0 bg-gradient-to-br from-[#dae8f7] to-[#d6e5f7] dark:from-slate-800 dark:to-slate-900 shadow-[-1px_-1px_0px_0px_#ffffff,3px_3px_5px_0px_rgba(79,156,232,0.7),5px_5px_20px_0px_rgba(79,156,232,0.7)] dark:shadow-[-1px_-1px_0px_0px_rgba(255,255,255,0.15),3px_3px_5px_0px_rgba(0,0,0,0.4),5px_5px_20px_0px_rgba(0,0,0,0.5)] hover:scale-105 active:scale-95 transition-all duration-300 group/send border border-transparent dark:border-white/5">
<i class="fa-solid fa-paper-plane text-[#7faeed] dark:text-slate-400 text-xl md:text-2xl group-hover/send:translate-x-1 group-hover/send:-translate-y-1 transition-transform duration-300"></i>
</button>
</div>
Inputs
<!-- FONT AWESOME LINK (Apne head tag me dal lena) -->
<!-- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> -->
<!-- =========================================================
🔥 COPY PASTE START: 3D NEOMORPHIC CHAT INPUT 🔥
========================================================== -->
<!-- Main Wrapper (Bottom me fix karne ke liye tu isko absolute ya fixed kar sakta hai) -->
<!-- items-end rakha hai taaki agar message bada ho toh icons hamesha bottom me straight rahein -->
<div class="w-full max-w-3xl mx-auto p-4 flex items-end gap-3 md:gap-4">
<!-- 1. Typing Bar (3D Glass Theme) -->
<div class="relative flex-1 rounded-3xl p-1.5 md:p-2 flex items-end bg-gradient-to-br from-[#dae8f7] to-[#d6e5f7] dark:from-slate-800 dark:to-slate-900 shadow-[-1px_-1px_0px_0px_#ffffff,3px_3px_5px_0px_rgba(79,156,232,0.7),5px_5px_20px_0px_rgba(79,156,232,0.7)] dark:shadow-[-1px_-1px_0px_0px_rgba(255,255,255,0.15),3px_3px_5px_0px_rgba(0,0,0,0.4),5px_5px_20px_0px_rgba(0,0,0,0.5)] transition-all duration-300 focus-within:scale-[1.01]">
<!-- Auto-Expanding Textarea -->
<!-- field-sizing: content (Modern pure CSS trick to auto expand without JS) -->
<textarea
rows="1"
placeholder="Type a message..."
style="field-sizing: content;"
class="flex-1 w-full min-h-[44px] max-h-[120px] px-3 py-2.5 bg-transparent text-[#6e9bc7] dark:text-slate-300 placeholder-[#9EBCD9] dark:placeholder-slate-500 text-[16px] md:text-[18px] font-medium outline-none resize-none overflow-y-auto transition-colors duration-300 leading-relaxed [&::-webkit-scrollbar]:hidden [-ms-overflow-style:none] [scrollbar-width:none] caret-[#7faeed] dark:caret-slate-400"
></textarea>
<!-- Pin / Attachment Icon Button -->
<button class="w-[42px] h-[42px] flex items-center justify-center rounded-full flex-shrink-0 group/pin transition-all duration-300 hover:bg-[#eff7ff] dark:hover:bg-slate-700 active:scale-90 mb-0.5 mr-0.5">
<i class="fa-solid fa-paperclip text-[#9EBCD9] dark:text-slate-500 text-xl group-hover/pin:text-[#6e9bc7] dark:group-hover/pin:text-slate-300 group-hover/pin:rotate-12 transition-all duration-300"></i>
</button>
</div>
<!-- 2. Send Message Circle Button -->
<button class="w-[55px] h-[55px] md:w-[60px] md:h-[60px] flex items-center justify-center rounded-full flex-shrink-0 bg-gradient-to-br from-[#dae8f7] to-[#d6e5f7] dark:from-slate-800 dark:to-slate-900 shadow-[-1px_-1px_0px_0px_#ffffff,3px_3px_5px_0px_rgba(79,156,232,0.7),5px_5px_20px_0px_rgba(79,156,232,0.7)] dark:shadow-[-1px_-1px_0px_0px_rgba(255,255,255,0.15),3px_3px_5px_0px_rgba(0,0,0,0.4),5px_5px_20px_0px_rgba(0,0,0,0.5)] hover:scale-105 active:scale-95 transition-all duration-300 group/send border border-transparent dark:border-white/5">
<i class="fa-solid fa-paper-plane text-[#7faeed] dark:text-slate-400 text-xl md:text-2xl group-hover/send:translate-x-1 group-hover/send:-translate-y-1 transition-transform duration-300"></i>
</button>
</div>
<!-- =========================================================
🔥 COPY PASTE END: 3D NEOMORPHIC CHAT INPUT 🔥
========================================================== -->
Headers
<div class="relative w-full max-w-[300px] mx-auto p-2.5 rounded-full bg-gradient-to-br from-[#b3d0fd] to-[#a4caf8] dark:from-slate-700 dark:to-slate-800 flex items-center justify-center transition-colors duration-500">
<!-- Inner Search Container (With 3D Shadows mimicking ::before & ::after) -->
<!-- Shadow Breakdown: Top-left white line (-1px), Bottom-right soft blue shadows -->
<div class="relative w-full rounded-full p-1.5 flex items-center bg-gradient-to-br from-[#dae8f7] to-[#d6e5f7] dark:from-slate-800 dark:to-slate-900 shadow-[-1px_-1px_0px_0px_#ffffff,3px_3px_5px_0px_rgba(79,156,232,0.7),5px_5px_20px_0px_rgba(79,156,232,0.7)] dark:shadow-[-1px_-1px_0px_0px_rgba(255,255,255,0.15),3px_3px_5px_0px_rgba(0,0,0,0.4),5px_5px_20px_0px_rgba(0,0,0,0.5)] group/search focus-within:scale-[1.02] transition-all duration-300">
<!-- Input Field -->
<!-- Focus hone par background thoda aur light hoga bilkul original CSS ki tarah -->
<input
type="text"
placeholder="Search..."
class="flex-1 px-3 py-2 w-full text-[20px] rounded-full text-[#9EBCD9] dark:text-slate-300 placeholder-[#9EBCD9]/80 dark:placeholder-slate-500 outline-none bg-gradient-to-br from-[#dae8f7] to-[#d6e5f7] dark:from-slate-800 dark:to-slate-900 focus:from-[#eff7ff] focus:to-[#d6e5f7] dark:focus:from-slate-700 dark:focus:to-slate-800 transition-colors duration-300"
/>
<!-- Search Icon Button -->
<!-- Same CSS borders: left solid, top/bottom transparent -->
<button class="w-[45px] h-[45px] ml-2 flex items-center justify-center rounded-full border-l-2 border-t-[3px] border-b-[3px] border-transparent border-l-white dark:border-l-slate-500 hover:border-l-[3px] transition-all duration-300 flex-shrink-0 group-hover/search:shadow-[inset_2px_0px_5px_rgba(255,255,255,0.5)] dark:group-hover/search:shadow-[inset_2px_0px_5px_rgba(255,255,255,0.1)] cursor-pointer">
<i class="fa-solid fa-magnifying-glass text-white dark:text-slate-400 text-lg transition-transform duration-300 hover:scale-110 active:scale-95"></i>
</button>
</div>
</div>
Inputs
<div class="flex flex-col gap-2">
<span class="text-xs font-bold text-slate-500 uppercase tracking-wider ml-1">5. Ethereal Morphing Shadow</span>
<!-- Morphing Blob Bubble -->
<div class="relative w-24 h-12 flex items-center justify-center">
<!-- Background Morphing Shape (Tailwind Trick: changing border radius) -->
<div class="absolute inset-0 bg-indigo-500/20 backdrop-blur-sm shadow-[0_0_20px_rgba(99,102,241,0.4)] border border-indigo-400/50 animate-[spin_5s_linear_infinite] rounded-[40%_60%_70%_30%]"></div>
<!-- Static container for dots so they don't spin -->
<div class="relative flex gap-2 z-10">
<div class="w-2 h-2 bg-indigo-300 rounded-full animate-ping opacity-75"></div>
<div class="w-2 h-2 bg-indigo-300 rounded-full animate-ping opacity-75 [animation-delay:200ms]"></div>
<div class="w-2 h-2 bg-indigo-300 rounded-full animate-ping opacity-75 [animation-delay:400ms]"></div>
</div>
</div>
</div>
Inputs
<div class="flex flex-col gap-2">
<span class="text-xs font-bold text-slate-500 uppercase tracking-wider ml-1">4. Cyberpunk Neon Wave</span>
<!-- Dark Bubble -->
<div class="bg-black/80 px-5 py-3 rounded-xl rounded-tl-sm border border-cyan-500/30 shadow-[0_0_15px_rgba(6,182,212,0.2)] w-max flex items-center justify-center gap-1.5">
<!-- Neon Bars -->
<div class="w-1.5 h-4 bg-cyan-400 rounded-full shadow-[0_0_10px_rgba(34,211,238,0.8)] animate-[bounce_1s_infinite]"></div>
<div class="w-1.5 h-4 bg-cyan-400 rounded-full shadow-[0_0_10px_rgba(34,211,238,0.8)] animate-[bounce_1s_infinite] [animation-delay:150ms]"></div>
<div class="w-1.5 h-4 bg-cyan-400 rounded-full shadow-[0_0_10px_rgba(34,211,238,0.8)] animate-[bounce_1s_infinite] [animation-delay:300ms]"></div>
</div>
</div>
Inputs
<div class="flex flex-col gap-2">
<span class="text-xs font-bold text-slate-500 uppercase tracking-wider ml-1">3. Pure Liquid Glass Bubble</span>
<!-- Glassmorphism Bubble -->
<div class="relative px-5 py-3.5 w-max bg-white/10 backdrop-blur-md rounded-2xl rounded-bl-none border border-white/40 shadow-[0_8px_32px_rgba(0,0,0,0.2)] flex items-center gap-1.5 overflow-hidden">
<!-- Internal liquid shine reflection -->
<div class="absolute top-0 left-0 w-full h-1/2 bg-gradient-to-b from-white/30 to-transparent rounded-t-2xl pointer-events-none"></div>
<!-- Water Drop Dots -->
<div class="w-2.5 h-2.5 bg-white/80 rounded-full shadow-[0_0_8px_rgba(255,255,255,0.8)] animate-[pulse_1s_ease-in-out_infinite]"></div>
<div class="w-2.5 h-2.5 bg-white/80 rounded-full shadow-[0_0_8px_rgba(255,255,255,0.8)] animate-[pulse_1s_ease-in-out_infinite] [animation-delay:200ms]"></div>
<div class="w-2.5 h-2.5 bg-white/80 rounded-full shadow-[0_0_8px_rgba(255,255,255,0.8)] animate-[pulse_1s_ease-in-out_infinite] [animation-delay:400ms]"></div>
</div>
</div>
Inputs
<div class="flex flex-col gap-2">
<span class="text-xs font-bold text-slate-500 uppercase tracking-wider ml-1">2. Divine AI Aura (Google Style)</span>
<!-- Aura Wrapper -->
<div class="relative group w-max">
<!-- Behind Rainbow Glow (Divine Light) -->
<div class="absolute -inset-1 bg-gradient-to-r from-blue-600 via-purple-500 via-pink-500 to-yellow-500 rounded-full blur-md opacity-80 animate-[pulse_2s_ease-in-out_infinite]"></div>
<div class="absolute -inset-1 bg-gradient-to-r from-blue-600 via-purple-500 via-pink-500 to-yellow-500 rounded-full blur-lg opacity-60 animate-[spin_4s_linear_infinite]"></div>
<!-- Actual Chat Bubble -->
<div class="relative bg-slate-900 px-5 py-3 rounded-full flex gap-1.5 items-center shadow-[inset_0_1px_1px_rgba(255,255,255,0.2)]">
<div class="w-2 h-2 rounded-full bg-gradient-to-t from-blue-400 to-white animate-bounce [animation-delay:-0.3s]"></div>
<div class="w-2 h-2 rounded-full bg-gradient-to-t from-purple-400 to-white animate-bounce [animation-delay:-0.15s]"></div>
<div class="w-2 h-2 rounded-full bg-gradient-to-t from-pink-400 to-white animate-bounce"></div>
</div>
</div>
</div>
Sidebars
<!-- FONT AWESOME LINK (Apne head tag me dal lena agar na ho toh) -->
<!-- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> -->
<!-- BACKGROUND OVERLAY (Untouchable Blur & Shadow) -->
<!-- Z-index high rakha hai taaki baki puri site ke upar aaye -->
<div class="fixed inset-0 bg-slate-900/40 dark:bg-black/60 backdrop-blur-sm z-40 transition-opacity duration-500"></div>
<!-- TOP-DOWN LIQUID GLASS MENU PANEL -->
<!-- Isko JS se translate-y-0 (open) aur -translate-y-full (close) karna -->
<div class="fixed top-0 left-0 w-full max-h-[90vh] overflow-y-auto bg-gradient-to-b from-white/60 to-white/20 dark:from-slate-900/80 dark:to-slate-800/40 backdrop-blur-2xl border-b border-white/40 dark:border-white/10 shadow-[0_20px_50px_rgba(0,0,0,0.15)] dark:shadow-[0_20px_50px_rgba(0,0,0,0.5)] z-50 rounded-b-[2.5rem] p-6 transition-transform duration-500 ease-[cubic-bezier(0.23,1,0.32,1)] ring-1 ring-white/30 dark:ring-white/5">
<!-- INNER CONTAINER -->
<div class="max-w-md mx-auto flex flex-col gap-5 relative">
<!-- PROFILE SECTION -->
<div class="flex items-center gap-4 p-4 rounded-3xl bg-white/30 dark:bg-black/30 hover:bg-white/40 dark:hover:bg-black/40 transition-all duration-300 border border-white/40 dark:border-white/10 shadow-sm group cursor-pointer">
<div class="w-16 h-16 rounded-full bg-gradient-to-tr from-blue-500 to-cyan-400 p-0.5 shadow-lg shadow-blue-500/30 group-hover:scale-105 transition-transform duration-300">
<div class="w-full h-full bg-white dark:bg-slate-900 rounded-full flex items-center justify-center overflow-hidden">
<i class="fa-solid fa-user text-2xl text-blue-500 dark:text-blue-400 group-hover:scale-110 transition-transform duration-300"></i>
</div>
</div>
<div class="flex-1">
<h2 class="text-xl font-bold text-slate-800 dark:text-white tracking-wide">Mannu</h2>
<p class="text-xs font-semibold text-blue-600 dark:text-cyan-400 uppercase tracking-widest">Admin</p>
</div>
<a href="profile.php" class="h-11 w-11 rounded-full flex items-center justify-center bg-blue-500/10 dark:bg-blue-500/20 text-blue-600 dark:text-blue-400 hover:bg-blue-500 hover:text-white hover:shadow-lg hover:shadow-blue-500/40 active:scale-90 transition-all duration-300">
<i class="fa-solid fa-pen"></i>
</a>
</div>
<!-- QUICK ACTION BUTTONS (GRID) -->
<div class="grid grid-cols-2 gap-4">
<!-- Edit Profile Button -->
<a href="profile.php" class="group relative overflow-hidden flex flex-col items-center justify-center gap-3 p-5 rounded-3xl bg-white/20 dark:bg-white/5 hover:bg-white/40 dark:hover:bg-blue-900/30 border border-white/30 dark:border-white/5 shadow-sm hover:shadow-xl hover:-translate-y-1 transition-all duration-300">
<div class="absolute inset-0 bg-gradient-to-tr from-blue-400/0 to-blue-400/0 group-hover:from-blue-400/10 group-hover:to-cyan-400/10 transition-colors duration-300"></div>
<div class="w-12 h-12 rounded-2xl bg-blue-100/50 dark:bg-slate-800/50 text-blue-600 dark:text-blue-400 flex items-center justify-center group-hover:scale-110 group-hover:rotate-3 transition-transform duration-300 shadow-inner">
<i class="fa-solid fa-user-gear text-xl"></i>
</div>
<span class="text-sm font-bold text-slate-700 dark:text-slate-200">Edit Profile</span>
</a>
<!-- Friends Button -->
<a href="frends.php" class="group relative overflow-hidden flex flex-col items-center justify-center gap-3 p-5 rounded-3xl bg-white/20 dark:bg-white/5 hover:bg-white/40 dark:hover:bg-indigo-900/30 border border-white/30 dark:border-white/5 shadow-sm hover:shadow-xl hover:-translate-y-1 transition-all duration-300">
<div class="absolute inset-0 bg-gradient-to-tr from-indigo-400/0 to-indigo-400/0 group-hover:from-indigo-400/10 group-hover:to-purple-400/10 transition-colors duration-300"></div>
<div class="w-12 h-12 rounded-2xl bg-indigo-100/50 dark:bg-slate-800/50 text-indigo-600 dark:text-indigo-400 flex items-center justify-center group-hover:scale-110 group-hover:-rotate-3 transition-transform duration-300 shadow-inner">
<i class="fa-solid fa-users text-xl"></i>
</div>
<span class="text-sm font-bold text-slate-700 dark:text-slate-200">Friends</span>
</a>
<!-- Traffic Button -->
<a href="traffic.php" class="group relative overflow-hidden flex flex-col items-center justify-center gap-3 p-5 rounded-3xl bg-white/20 dark:bg-white/5 hover:bg-white/40 dark:hover:bg-emerald-900/30 border border-white/30 dark:border-white/5 shadow-sm hover:shadow-xl hover:-translate-y-1 transition-all duration-300">
<div class="absolute inset-0 bg-gradient-to-tr from-emerald-400/0 to-emerald-400/0 group-hover:from-emerald-400/10 group-hover:to-teal-400/10 transition-colors duration-300"></div>
<div class="w-12 h-12 rounded-2xl bg-emerald-100/50 dark:bg-slate-800/50 text-emerald-600 dark:text-emerald-400 flex items-center justify-center group-hover:scale-110 group-hover:rotate-3 transition-transform duration-300 shadow-inner">
<i class="fa-solid fa-chart-line text-xl"></i>
</div>
<span class="text-sm font-bold text-slate-700 dark:text-slate-200">Traffic</span>
</a>
<!-- Logout Button -->
<a href="logout.php" class="group relative overflow-hidden flex flex-col items-center justify-center gap-3 p-5 rounded-3xl bg-white/20 dark:bg-white/5 hover:bg-red-50/50 dark:hover:bg-red-900/30 border border-white/30 dark:border-white/5 shadow-sm hover:shadow-xl hover:-translate-y-1 transition-all duration-300">
<div class="absolute inset-0 bg-gradient-to-tr from-red-400/0 to-red-400/0 group-hover:from-red-400/10 group-hover:to-orange-400/10 transition-colors duration-300"></div>
<div class="w-12 h-12 rounded-2xl bg-red-100/50 dark:bg-slate-800/50 text-red-600 dark:text-red-400 flex items-center justify-center group-hover:scale-110 group-hover:translate-x-1 transition-transform duration-300 shadow-inner">
<i class="fa-solid fa-right-from-bracket text-xl"></i>
</div>
<span class="text-sm font-bold text-red-600 dark:text-red-400">Logout</span>
</a>
</div>
<!-- CONTROLS CONTAINER (Theme & Glass Liquid Slider) -->
<div class="bg-white/30 dark:bg-black/30 p-5 rounded-3xl border border-white/40 dark:border-white/10 shadow-inner space-y-6">
<!-- Dark / Light Mode One-Click Toggles -->
<div class="flex items-center justify-between">
<div class="flex items-center gap-2">
<i class="fa-solid fa-palette text-blue-500 dark:text-blue-400"></i>
<span class="text-sm font-bold text-slate-700 dark:text-slate-200 uppercase tracking-wider">Appearance</span>
</div>
<div class="flex gap-2 p-1 bg-white/40 dark:bg-black/40 rounded-full shadow-inner border border-white/30 dark:border-white/5">
<!-- Light Mode Button -->
<button class="w-10 h-10 rounded-full bg-white dark:bg-transparent text-yellow-500 dark:text-gray-400 hover:text-yellow-600 hover:scale-105 active:scale-95 transition-all duration-300 shadow-sm dark:shadow-none">
<i class="fa-solid fa-sun text-lg"></i>
</button>
<!-- Dark Mode Button -->
<button class="w-10 h-10 rounded-full bg-transparent dark:bg-slate-800 text-gray-500 dark:text-blue-300 hover:text-blue-400 hover:scale-105 active:scale-95 transition-all duration-300 shadow-none dark:shadow-sm border border-transparent dark:border-white/10">
<i class="fa-solid fa-moon text-lg"></i>
</button>
</div>
</div>
<!-- Intensity / Theme Liquid Slider -->
<div class="space-y-3">
<div class="flex justify-between items-center text-xs font-bold text-slate-600 dark:text-slate-400">
<span class="flex items-center gap-1.5">
<i class="fa-solid fa-droplet text-blue-500"></i> Liquid Intensity
</span>
<span class="bg-white/50 dark:bg-black/50 px-2 py-1 rounded-md text-blue-600 dark:text-cyan-400 border border-white/40 dark:border-white/10">80%</span>
</div>
<!-- Custom Tailwind Slider -->
<div class="relative w-full h-3 bg-white/40 dark:bg-black/50 rounded-full border border-white/50 dark:border-white/10 overflow-hidden flex items-center shadow-inner group">
<div class="absolute left-0 h-full w-[80%] bg-gradient-to-r from-blue-400 to-cyan-400 rounded-full group-hover:opacity-90 transition-opacity"></div>
<input type="range" min="0" max="100" value="80" class="absolute w-full h-full opacity-0 cursor-pointer z-10">
<!-- Custom Thumb Indicator -->
<div class="absolute left-[80%] -ml-2 w-4 h-4 bg-white rounded-full shadow-[0_0_10px_rgba(0,0,0,0.3)] pointer-events-none group-hover:scale-125 transition-transform duration-300 z-0"></div>
</div>
</div>
</div>
<!-- BOTTOM SWIPE HANDLE (iOS Style) -->
<div class="w-full flex justify-center mt-2 group cursor-pointer pb-2">
<div class="w-16 h-1.5 bg-slate-400/40 dark:bg-slate-500/50 rounded-full group-hover:w-24 group-hover:bg-blue-500/60 transition-all duration-300"></div>
</div>
</div>
</div>
Inputs
<!-- =========================================================
🔥 COPY PASTE START: SENT MESSAGE BUBBLE 🔥
========================================================== -->
<!-- Flex justify-end taaki message right side (user ki side) aaye -->
<div class="flex justify-end w-full max-w-3xl mx-auto p-4">
<!-- Bubble Container with Hover 3D Pop Effect -->
<div class="group relative max-w-[85%] md:max-w-[70%] flex flex-col items-end transform transition-all duration-500 hover:-translate-y-1">
<!-- The Message Bubble (Premium Blue Gradient with custom border radius for Chat Tail) -->
<div class="relative px-5 py-3.5 bg-gradient-to-tr from-blue-600 via-blue-500 to-cyan-500 text-white rounded-3xl rounded-br-sm shadow-[0_8px_20px_-6px_rgba(59,130,246,0.4)] group-hover:shadow-[0_12px_25px_-6px_rgba(59,130,246,0.6)] transition-all duration-300">
<!-- Message Text -->
<p class="text-sm md:text-base font-medium leading-relaxed tracking-wide shadow-black/10 drop-shadow-sm">
Bhai, maine Tailwind CSS ki poori aag laga di hai is code me! Dekh iska premium feel! 🔥😎
</p>
</div>
<!-- Time & Read Status (Below the bubble) -->
<div class="flex items-center gap-1.5 mt-1.5 mr-1 text-[11px] md:text-xs font-bold text-gray-400 dark:text-gray-500 transition-colors group-hover:text-blue-500 dark:group-hover:text-blue-400">
<span>10:44 PM</span>
<!-- Double Blue Tick (Read Receipt) -->
<svg class="w-4 h-4 text-blue-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M5 13l4 4L19 7"></path>
<!-- Second tick line -->
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M11 13l4 4M15 7l-4 4"></path>
</svg>
</div>
</div>
</div>
<!-- =========================================================
🔥 COPY PASTE END: SENT MESSAGE BUBBLE 🔥
========================================================== -->
Inputs
<!-- =========================================================
🔥 COPY PASTE START: PREMIUM CHAT INPUT BAR 🔥
========================================================== -->
<!-- Maine isko ek container me rakha hai taaki center me dikhe. Apni website par isko bottom fix (fixed bottom-4) kar dena -->
<div class="w-full max-w-3xl mx-auto p-4">
<!-- Floating Glassmorphism Input Bar -->
<div class="group relative flex items-center gap-2 md:gap-3 p-2 bg-white/70 dark:bg-gray-900/70 backdrop-blur-xl border border-white/50 dark:border-gray-700/50 shadow-[0_10px_40px_-10px_rgba(0,0,0,0.1)] dark:shadow-[0_10px_40px_-10px_rgba(0,0,0,0.5)] hover:shadow-[0_15px_50px_-15px_rgba(59,130,246,0.2)] rounded-full transition-all duration-500 ease-in-out hover:-translate-y-1">
<!-- Plus / Pin Icon (For Gallery/Docs) -->
<button class="relative p-3 rounded-full text-gray-500 dark:text-gray-400 bg-transparent hover:bg-blue-50 dark:hover:bg-gray-800 hover:text-blue-600 dark:hover:text-blue-400 transition-all duration-300 ease-out active:scale-90 overflow-hidden">
<!-- Background hover glow -->
<span class="absolute inset-0 bg-blue-400/20 rounded-full scale-0 opacity-0 group-hover:scale-100 group-hover:opacity-100 transition-all duration-500 ease-out"></span>
<svg class="w-6 h-6 relative z-10 hover:rotate-90 transition-transform duration-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M15.172 7l-6.586 6.586a2 2 0 102.828 2.828l6.414-6.586a4 4 0 00-5.656-5.656l-6.415 6.585a6 6 0 108.486 8.486L20.5 13"></path>
</svg>
</button>
<!-- Input Field (Type a message) -->
<input type="text" placeholder="Type a message..." class="flex-1 bg-transparent px-4 py-3 text-gray-800 dark:text-gray-100 placeholder-gray-400 dark:placeholder-gray-500 font-medium text-base md:text-lg outline-none focus:ring-0 transition-all duration-300 ease-in-out w-full" />
<!-- Giant Round Send Button (Mobile Style) -->
<button class="relative flex items-center justify-center w-12 h-12 md:w-14 md:h-14 bg-gradient-to-br from-blue-500 to-blue-600 hover:from-blue-600 hover:to-blue-700 text-white rounded-full shadow-[0_5px_20px_rgba(59,130,246,0.4)] hover:shadow-[0_8px_25px_rgba(59,130,246,0.6)] transition-all duration-300 ease-out transform hover:scale-105 active:scale-95 group/btn">
<!-- Send Icon (Moves forward on hover like it's flying) -->
<svg class="w-6 h-6 md:w-7 md:h-7 ml-1 group-hover/btn:translate-x-1 group-hover/btn:-translate-y-1 transition-transform duration-300 ease-out" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 19l9 2-9-18-9 18 9-2zm0 0v-8"></path>
</svg>
</button>
</div>
</div>
<!-- =========================================================
🔥 COPY PASTE END: PREMIUM CHAT INPUT BAR 🔥
========================================================== -->
Footers
<!-- ==========================================
🔥 FOOTER 5: RAINBOW GLOW 🔥
=========================================== -->
<footer class="relative bg-gray-950 text-gray-300 pt-16 pb-8 overflow-hidden">
<!-- Animated Rainbow Top Border -->
<div class="absolute top-0 left-0 w-full h-1.5 bg-gradient-to-r from-pink-500 via-red-500 to-yellow-500 animate-pulse"></div>
<div class="absolute top-0 right-0 w-full h-1.5 bg-gradient-to-r from-blue-500 via-green-500 to-purple-500 mix-blend-screen opacity-50"></div>
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex flex-col items-center text-center">
<!-- Giant Rainbow Text Logo -->
<h1 class="text-4xl md:text-5xl font-black mb-6 text-transparent bg-clip-text bg-gradient-to-r from-pink-500 via-purple-500 to-cyan-500 drop-shadow-lg cursor-pointer hover:scale-105 transition-transform duration-300">
CodeMaster
</h1>
<p class="text-gray-400 max-w-lg mb-10 text-sm md:text-base">
Unleash your creativity with components that break the boundaries of design. Terms and Privacy clearly defined, art infinitely imagined.
</p>
<!-- Links in a Line (Very modern style) -->
<div class="flex flex-wrap justify-center gap-6 md:gap-10 mb-12 font-medium text-sm text-gray-400">
<a href="#" class="hover:text-transparent hover:bg-clip-text hover:bg-gradient-to-r hover:from-pink-500 hover:to-orange-400 transition-all">About Us</a>
<a href="#" class="hover:text-transparent hover:bg-clip-text hover:bg-gradient-to-r hover:from-orange-400 hover:to-yellow-400 transition-all">Contact Us</a>
<a href="#" class="hover:text-transparent hover:bg-clip-text hover:bg-gradient-to-r hover:from-green-400 hover:to-cyan-400 transition-all">Privacy Policy</a>
<a href="#" class="hover:text-transparent hover:bg-clip-text hover:bg-gradient-to-r hover:from-cyan-400 hover:to-purple-500 transition-all">Terms of Service</a>
</div>
<!-- Big Glowing Call to Action Button in Footer -->
<a href="#" class="px-8 py-3 rounded-full bg-white/5 hover:bg-white/10 border border-white/10 text-white font-bold backdrop-blur-sm transition-all hover:border-pink-500/50 hover:shadow-[0_0_20px_rgba(236,72,153,0.3)]">
Get in Touch 🚀
</a>
</div>
<div class="mt-16 text-center">
<p class="text-xs text-gray-600 font-semibold uppercase tracking-[0.2em]">
Crafted with <span class="text-red-500">❤️</span> by CodeMaster © 2026
</p>
</div>
</div>
</footer>
Footers
<!-- ==========================================
🔥 FOOTER 4: TRUST BLUE 🔥
=========================================== -->
<footer class="bg-slate-900 text-slate-300 py-12 relative overflow-hidden">
<!-- Blue Glow Effect in Background -->
<div class="absolute top-0 left-1/2 -translate-x-1/2 w-3/4 h-1 bg-gradient-to-r from-transparent via-blue-500 to-transparent shadow-[0_0_20px_rgba(59,130,246,0.8)]"></div>
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-12">
<div class="col-span-1 sm:col-span-2 lg:col-span-1">
<div class="flex items-center gap-2 mb-4">
<div class="w-8 h-8 rounded bg-blue-600 flex items-center justify-center text-white font-bold text-lg">C</div>
<span class="text-white font-bold text-xl">CodeMaster</span>
</div>
<p class="text-sm text-slate-400 mb-6">
Delivering highly optimized and beautifully crafted web components for developers worldwide.
</p>
<a href="#" class="text-blue-400 hover:text-blue-300 text-sm font-semibold flex items-center gap-1 transition-colors">
Contact Us <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg>
</a>
</div>
<div>
<h4 class="text-white font-semibold mb-5">Resources</h4>
<ul class="space-y-3 text-sm">
<li><a href="#" class="hover:text-blue-400 transition-colors">Documentation</a></li>
<li><a href="#" class="hover:text-blue-400 transition-colors">Tutorials</a></li>
<li><a href="#" class="hover:text-blue-400 transition-colors">Blog</a></li>
</ul>
</div>
<div>
<h4 class="text-white font-semibold mb-5">Company</h4>
<ul class="space-y-3 text-sm">
<li><a href="#" class="hover:text-blue-400 transition-colors">About</a></li>
<li><a href="#" class="hover:text-blue-400 transition-colors">Careers</a></li>
<li><a href="#" class="hover:text-blue-400 transition-colors">Partners</a></li>
</ul>
</div>
<div>
<h4 class="text-white font-semibold mb-5">Legal</h4>
<ul class="space-y-3 text-sm">
<li><a href="#" class="hover:text-blue-400 transition-colors">Privacy Policy</a></li>
<li><a href="#" class="hover:text-blue-400 transition-colors">Terms of Service</a></li>
<li><a href="#" class="hover:text-blue-400 transition-colors">Security</a></li>
</ul>
</div>
</div>
<div class="mt-12 pt-8 border-t border-slate-800 text-center sm:text-left flex flex-col sm:flex-row justify-between items-center gap-4">
<p class="text-sm text-slate-500">© 2026 CodeMaster Inc. Secure & Encrypted.</p>
<div class="flex gap-4">
<!-- Add your tiny social SVGs here if needed -->
</div>
</div>
</div>
</footer>
Footers
<!-- ==========================================
🔥 FOOTER 3: CYBER PURPLE 🔥
=========================================== -->
<footer class="bg-gradient-to-b from-purple-900 via-purple-950 to-black text-purple-200 py-16 border-t border-purple-800/50 shadow-[0_-10px_40px_rgba(147,51,234,0.15)]">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center md:text-left">
<div class="grid grid-cols-1 md:grid-cols-5 gap-10">
<div class="md:col-span-2">
<div class="inline-block p-2 bg-purple-800/30 rounded-xl border border-purple-500/30 mb-4">
<!-- Tech Logo Icon -->
<svg class="w-8 h-8 text-purple-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"></path></svg>
</div>
<h2 class="text-2xl font-black text-white mb-2">CodeMaster AI</h2>
<p class="text-purple-300/80 text-sm max-w-sm mx-auto md:mx-0">
Next-generation components for modern web. Build interfaces that feel alive.
</p>
</div>
<div class="md:col-span-1">
<h3 class="text-white font-bold mb-4 tracking-wide text-sm shadow-purple-500 drop-shadow-md">NAVIGATION</h3>
<ul class="space-y-2 text-sm text-purple-300/80">
<li><a href="#" class="hover:text-purple-400 hover:translate-x-1 inline-block transition-transform">Home</a></li>
<li><a href="#" class="hover:text-purple-400 hover:translate-x-1 inline-block transition-transform">Pricing</a></li>
<li><a href="#" class="hover:text-purple-400 hover:translate-x-1 inline-block transition-transform">Contact Us</a></li>
</ul>
</div>
<div class="md:col-span-1">
<h3 class="text-white font-bold mb-4 tracking-wide text-sm shadow-purple-500 drop-shadow-md">LEGAL</h3>
<ul class="space-y-2 text-sm text-purple-300/80">
<li><a href="#" class="hover:text-purple-400 hover:translate-x-1 inline-block transition-transform">Terms of Service</a></li>
<li><a href="#" class="hover:text-purple-400 hover:translate-x-1 inline-block transition-transform">Privacy Policy</a></li>
</ul>
</div>
<div class="md:col-span-1">
<h3 class="text-white font-bold mb-4 tracking-wide text-sm shadow-purple-500 drop-shadow-md">CONNECT</h3>
<div class="flex justify-center md:justify-start gap-4">
<a href="#" class="p-2 bg-purple-800/40 rounded-lg hover:bg-purple-600 transition-colors text-white"><svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24"><path d="M24 4.557... (add full path or use standard icon)"/></svg> Twitter</a>
</div>
</div>
</div>
<div class="mt-12 pt-8 border-t border-purple-800/40 flex flex-col items-center">
<p class="text-xs text-purple-400/60 tracking-widest uppercase">© 2026 CodeMaster Tech. All Rights Reserved.</p>
</div>
</div>
</footer>
Footers
<!-- ==========================================
🔥 FOOTER 2: CLEAN WHITE 🔥
=========================================== -->
<footer class="bg-white border-t border-gray-100 text-gray-600 py-14">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex flex-col md:flex-row justify-between items-start gap-10">
<!-- Brand & Newsletter -->
<div class="md:w-1/3">
<span class="text-blue-600 font-extrabold text-3xl tracking-tighter">CodeMaster</span>
<p class="mt-4 text-gray-500 text-sm leading-relaxed">
Build your next amazing website with our copy-paste components. Subscribe to our newsletter for updates.
</p>
<div class="mt-6 flex gap-2">
<input type="email" placeholder="Enter your email" class="px-4 py-2 w-full rounded-lg border border-gray-200 focus:outline-none focus:border-blue-500 focus:ring-1 focus:ring-blue-500 transition-all">
<button class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg font-medium transition-all shadow-md">Subscribe</button>
</div>
</div>
<!-- Links Grid -->
<div class="grid grid-cols-2 sm:grid-cols-3 gap-8 md:w-2/3 md:pl-10">
<div>
<h4 class="font-bold text-gray-900 mb-4">Company</h4>
<ul class="space-y-3 text-sm font-medium text-gray-500">
<li><a href="#" class="hover:text-blue-600 transition">About Us</a></li>
<li><a href="#" class="hover:text-blue-600 transition">Careers</a></li>
<li><a href="#" class="hover:text-blue-600 transition">Contact Us</a></li>
</ul>
</div>
<div>
<h4 class="font-bold text-gray-900 mb-4">Legal Info</h4>
<ul class="space-y-3 text-sm font-medium text-gray-500">
<li><a href="#" class="hover:text-blue-600 transition">Privacy Policy</a></li>
<li><a href="#" class="hover:text-blue-600 transition">Terms of Service</a></li>
<li><a href="#" class="hover:text-blue-600 transition">Refund Policy</a></li>
</ul>
</div>
<div>
<h4 class="font-bold text-gray-900 mb-4">Socials</h4>
<ul class="space-y-3 text-sm font-medium text-gray-500">
<li><a href="#" class="hover:text-blue-600 transition flex items-center gap-2">Twitter ↗</a></li>
<li><a href="#" class="hover:text-blue-600 transition flex items-center gap-2">LinkedIn ↗</a></li>
<li><a href="#" class="hover:text-blue-600 transition flex items-center gap-2">Instagram ↗</a></li>
</ul>
</div>
</div>
</div>
<div class="mt-12 pt-6 border-t border-gray-100 text-center">
<p class="text-sm text-gray-400 font-medium">© 2026 CodeMaster. Crafted with passion.</p>
</div>
</div>
</footer>
Footers
<!-- ==========================================
🔥 FOOTER 1: PREMIUM BLACK 🔥
=========================================== -->
<footer class="bg-black border-t border-gray-800 text-gray-400 py-12">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="grid grid-cols-1 md:grid-cols-4 gap-8">
<!-- Brand Section -->
<div class="col-span-1 md:col-span-1">
<span class="text-white font-extrabold text-2xl tracking-tight">CodeMaster.</span>
<p class="mt-4 text-sm text-gray-500">
Empowering developers with premium, copy-paste UI components. Build faster, build better.
</p>
</div>
<!-- Quick Links -->
<div>
<h3 class="text-white font-semibold mb-4 uppercase tracking-wider text-sm">Product</h3>
<ul class="space-y-3 text-sm">
<li><a href="#" class="hover:text-white transition-colors duration-200">Components</a></li>
<li><a href="#" class="hover:text-white transition-colors duration-200">Templates</a></li>
<li><a href="#" class="hover:text-white transition-colors duration-200">Pricing</a></li>
</ul>
</div>
<!-- Support -->
<div>
<h3 class="text-white font-semibold mb-4 uppercase tracking-wider text-sm">Support</h3>
<ul class="space-y-3 text-sm">
<li><a href="#" class="hover:text-white transition-colors duration-200">Contact Us</a></li>
<li><a href="#" class="hover:text-white transition-colors duration-200">Help Center</a></li>
<li><a href="#" class="hover:text-white transition-colors duration-200">Community</a></li>
</ul>
</div>
<!-- Legal -->
<div>
<h3 class="text-white font-semibold mb-4 uppercase tracking-wider text-sm">Legal</h3>
<ul class="space-y-3 text-sm">
<li><a href="#" class="hover:text-white transition-colors duration-200">Privacy Policy</a></li>
<li><a href="#" class="hover:text-white transition-colors duration-200">Terms of Service</a></li>
<li><a href="#" class="hover:text-white transition-colors duration-200">Cookie Policy</a></li>
</ul>
</div>
</div>
<!-- Bottom Section -->
<div class="mt-12 pt-8 border-t border-gray-800 flex flex-col md:flex-row justify-between items-center gap-4">
<p class="text-sm">© 2026 CodeMaster. All rights reserved.</p>
<!-- Social Icons -->
<div class="flex gap-4">
<a href="#" class="hover:text-white transition-colors"><svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24"><path d="M24 4.557c-.883.392-1.832.656-2.828.775 1.017-.609 1.798-1.574 2.165-2.724-.951.564-2.005.974-3.127 1.195-.897-.957-2.178-1.555-3.594-1.555-3.179 0-5.515 2.966-4.797 6.045-4.091-.205-7.719-2.165-10.148-5.144-1.29 2.213-.669 5.108 1.523 6.574-.806-.026-1.566-.247-2.229-.616-.054 2.281 1.581 4.415 3.949 4.89-.693.188-1.452.232-2.224.084.626 1.956 2.444 3.379 4.6 3.419-2.07 1.623-4.678 2.348-7.29 2.04 2.179 1.397 4.768 2.212 7.548 2.212 9.142 0 14.307-7.721 13.995-14.646.962-.695 1.797-1.562 2.457-2.549z"/></svg></a>
<a href="#" class="hover:text-white transition-colors"><svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24"><path d="M12 0C5.37 0 0 5.373 0 12c0 5.302 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 21.795 24 17.298 24 12c0-6.627-5.373-12-12-12"/></svg></a>
</div>
</div>
</div>
</footer>
Buttons
<button class="relative px-8 py-4 font-black text-white bg-indigo-600 rounded-xl group overflow-hidden active:translate-y-1.5 active:shadow-none shadow-[0_6px_0_#4338ca] dark:shadow-[0_6px_0_#312e81] hover:shadow-[0_4px_0_#4338ca] dark:hover:shadow-[0_4px_0_#312e81] hover:translate-y-[2px] transition-all duration-150 border border-indigo-500">
<!-- Shiny sliding line effect on hover -->
<span class="absolute top-0 left-0 w-full h-full bg-white/20 group-hover:translate-x-full -translate-x-full skew-x-12 transition-transform duration-700 ease-out"></span>
<span class="relative flex items-center gap-2">
<!-- Bouncing arrow icon -->
<svg class="w-6 h-6 animate-bounce" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"></path></svg>
Download Free
</span>
</button>
Buttons
<label class="relative inline-flex items-center cursor-pointer group">
<input type="checkbox" value="" class="sr-only peer">
<!-- Switch Track -->
<div class="w-14 h-7 bg-gray-300 dark:bg-gray-700 peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-6 after:w-6 after:transition-all dark:border-gray-600 peer-checked:bg-gradient-to-r peer-checked:from-green-400 peer-checked:to-blue-500 shadow-inner transition-all duration-300 group-hover:shadow-md"></div>
<!-- Label -->
<span class="ml-4 text-sm font-extrabold text-gray-700 dark:text-gray-300">Dark Mode</span>
</label>
Buttons
<button class="group relative px-6 py-3 font-bold text-gray-700 dark:text-gray-200 bg-white dark:bg-gray-900 rounded-2xl shadow-[0_4px_15px_rgba(0,0,0,0.05)] dark:shadow-[0_4px_15px_rgba(0,0,0,0.4)] border border-gray-100 dark:border-gray-800 hover:border-red-200 dark:hover:border-red-900/50 hover:bg-red-50 dark:hover:bg-red-900/20 transition-all duration-300 flex items-center gap-3">
<!-- Red aura on hover -->
<div class="absolute inset-0 rounded-2xl bg-red-400 blur-xl opacity-0 group-hover:opacity-20 transition-opacity duration-300"></div>
<!-- Heart Icon (Animates on hover) -->
<svg class="relative w-6 h-6 text-gray-400 dark:text-gray-500 group-hover:text-red-500 group-hover:fill-red-500 transition-all duration-300 group-hover:scale-125 group-active:scale-90" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"></path></svg>
<span class="relative group-hover:text-red-600 dark:group-hover:text-red-400">Like It!</span>
</button>
Buttons
<button class="relative inline-flex items-center justify-center px-8 py-3.5 overflow-hidden font-bold text-white bg-blue-600 rounded-full group shadow-lg shadow-blue-500/30 hover:shadow-blue-500/50 transition-all duration-300">
<!-- Hover par chalne wala smooth gradient -->
<span class="absolute inset-0 w-full h-full transition duration-300 ease-out opacity-0 bg-gradient-to-r from-cyan-500 to-blue-600 group-hover:opacity-100"></span>
<!-- Glass reflection effect -->
<span class="absolute top-0 left-0 w-full bg-gradient-to-b from-white/30 to-transparent h-1/3 rounded-t-full"></span>
<span class="relative flex items-center gap-2">
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M11 16l-4-4m0 0l4-4m-4 4h14m-5 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h7a3 3 0 013 3v1"></path></svg>
Login Account
</span>
</button>
Buttons
<div class="relative group cursor-pointer inline-block">
<!-- Yeh hai wo AURA (Roshni) jo peeche se niklegi -->
<div class="absolute -inset-1 bg-gradient-to-r from-blue-600 via-purple-600 to-pink-600 rounded-xl blur-lg opacity-70 group-hover:opacity-100 transition duration-500 group-hover:duration-200 animate-pulse"></div>
<!-- Main Black Button -->
<button class="relative px-8 py-4 bg-gray-900 dark:bg-black border border-gray-800 dark:border-gray-700 rounded-xl text-white font-extrabold tracking-widest uppercase overflow-hidden transition-all duration-300 hover:scale-[1.02] shadow-2xl">
<span class="relative z-10 flex items-center gap-2">
Get Started
<svg class="w-5 h-5 group-hover:translate-x-1 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7l5 5m0 0l-5 5m5-5H6"></path></svg>
</span>
</button>
</div>
Footers
<footer class="w-full bg-gray-900 border border-gray-800 rounded-3xl p-8 flex flex-col items-center justify-center gap-6 shadow-2xl min-w-[320px] max-w-2xl mx-auto relative overflow-hidden">
<!-- Decorative background glow -->
<div class="absolute -top-10 -left-10 w-32 h-32 bg-blue-600/20 rounded-full blur-3xl"></div>
<div class="absolute -bottom-10 -right-10 w-32 h-32 bg-purple-600/20 rounded-full blur-3xl"></div>
<h2 class="text-2xl font-bold text-white z-10">Tandav <span class="text-blue-500">Coders</span></h2>
<!-- Social Icons -->
<div class="flex gap-4 z-10">
<a href="#" class="w-12 h-12 rounded-full bg-gray-800 border border-gray-700 flex items-center justify-center text-gray-400 hover:text-[#1DA1F2] hover:border-[#1DA1F2] hover:-translate-y-2 transition-all duration-300 shadow-lg"><i class="fab fa-twitter text-lg"></i></a>
<a href="#" class="w-12 h-12 rounded-full bg-gray-800 border border-gray-700 flex items-center justify-center text-gray-400 hover:text-[#E1306C] hover:border-[#E1306C] hover:-translate-y-2 transition-all duration-300 shadow-lg"><i class="fab fa-instagram text-lg"></i></a>
<a href="#" class="w-12 h-12 rounded-full bg-gray-800 border border-gray-700 flex items-center justify-center text-gray-400 hover:text-white hover:border-gray-500 hover:-translate-y-2 transition-all duration-300 shadow-lg"><i class="fab fa-github text-lg"></i></a>
</div>
<!-- Copyright -->
<div class="w-full border-t border-gray-800 pt-6 mt-2 text-center z-10">
<p class="text-sm text-gray-500 font-medium">© 2026 Crafted with ❤️ by Mera Bhai.</p>
</div>
</footer>
Headers
<header class="w-full bg-gray-800/60 backdrop-blur-lg border border-gray-700 shadow-2xl rounded-2xl px-6 py-4 flex justify-between items-center min-w-[320px] max-w-4xl mx-auto">
<!-- Logo Section -->
<div class="flex items-center gap-3 cursor-pointer group">
<div class="w-10 h-10 rounded-xl bg-gradient-to-tr from-blue-600 to-purple-600 flex items-center justify-center font-bold text-white shadow-[0_0_15px_rgba(59,130,246,0.5)] group-hover:rotate-12 transition-transform duration-300">
<i class="fas fa-code"></i>
</div>
<h1 class="text-xl font-extrabold bg-gradient-to-r from-blue-400 to-purple-400 bg-clip-text text-transparent">CSS Market</h1>
</div>
<!-- Navigation -->
<nav class="hidden md:flex gap-8 text-sm font-medium text-gray-400">
<a href="#" class="hover:text-blue-400 transition-colors relative after:content-[''] after:absolute after:w-full after:scale-x-0 after:h-0.5 after:bottom-0 after:left-0 after:bg-blue-400 after:origin-bottom-right after:transition-transform after:duration-300 hover:after:scale-x-100 hover:after:origin-bottom-left">Home</a>
<a href="#" class="hover:text-blue-400 transition-colors">Elements</a>
<a href="#" class="text-blue-400">Pro Code</a>
</nav>
<!-- Action Button -->
<button class="bg-white/10 hover:bg-white/20 border border-gray-600 text-white px-5 py-2 rounded-lg text-sm font-semibold transition-all">
Login
</button>
</header>
buttons
<button class="relative inline-flex items-center justify-center p-0.5 mb-2 mr-2 overflow-hidden text-sm font-medium text-white rounded-xl group bg-gradient-to-br from-purple-600 to-blue-500 group-hover:from-purple-600 group-hover:to-blue-500 hover:text-white focus:ring-4 focus:outline-none focus:ring-blue-800 transition-all duration-300 transform hover:scale-105 active:scale-95 shadow-[0_0_20px_rgba(59,130,246,0.4)]">
<span class="relative px-6 py-3 transition-all ease-in duration-75 bg-gray-900 rounded-[10px] group-hover:bg-opacity-0 flex items-center gap-2">
<i class="fas fa-rocket text-blue-400 group-hover:text-white transition-colors"></i>
<span class="font-bold tracking-wide">Launch Tandav</span>
</span>
</button>