Sticky Floating Social Bar
Overview: A fixed, right-aligned sidebar component designed to display social media links (Facebook, Instagram, WhatsApp). It remains visible while scrolling and features an interactive "drawer-like" expansion effect on hover.
Key Features:
Sticky Positioning: Fixed vertically centered on the right edge of the viewport (fixed top-1/2 right-0).
Isolated Hover Effect: When a user hovers over an icon, only that specific item expands to reveal the text and changes to its brand color.
Stable Layout: Uses items-end flex alignment to ensure non-active icons remain perfectly stationary while one expands, preventing layout shifting.
Smooth Transitions: Includes CSS transitions for width, background color, and text opacity.
Tech Stack:
Framework: Tailwind CSS (Utility classes).
Icons: Inline SVGs.
Interactivity: Pure CSS (hover states), no JavaScript required.
Usage: Place this code block directly before the closing </body> tag to ensure it sits on top of all other content (z-50).
This tailwind example is contributed by Juan D. Cortorreal, on 23-Nov-2025. Component is made with Tailwind v3.4. It is responsive. similar terms for this example are Social media links,
Related Examples
-
Social Media Icon Buttons with TooltipsA responsive and interactive social media icon component built with Tailwind CSS. This component features Facebook, Twitter, and Instagram icons with smooth hover effects and tooltips that display the platform name. The icons are styled with rounded edges, shadows, and scale-up effects on hover, making them visually appealing for social media integrations. Ideal for adding social links to any website or application.
2.4k -
Continue with Discord buttonLogin with the Discord button for social login
13.6k -
Uses emoji for attention, mentions key features (modern, responsive, accessible)Drop-in Tailwind CSS profile card component with responsive layout, gradient header, and hover effects - zero custom CSS needed. Features skill tags, social icons, and clean stats display. Just copy-paste the HTML, swap in your details, and you're live. Perfect for portfolios, developer profiles, or link-in-bio pages.
-
Login popup modalcentered modal for gaining more attention from users, it also has social login buttons.
18.3k -
-
-
Tailwind CSS Blog sharing buttons with blog detailsIntroducing our Blog Sharing Buttons with Blog Details component, designed to enhance the social sharing experience on your blog posts.
2.3k -
Social Media IconsSocial Media Icons
3.4k -
Continue with Google buttonLogin with google button for social login.
25.6k -
2.1k -
Modern Dark Footer with Overlapping Gradient CTAA comprehensive, dark-themed website footer component built with HTML and Tailwind CSS. It features a visually distinct overlapping section with a colorful gradient background containing a prominent call-to-action (CTA) block. The main footer area utilizes a multi-column grid layout for organized navigation links, a newsletter signup form, and social media icons. A final bottom bar includes legal links and copyright information. The design is responsive and adapts its layout for different screen sizes.
1.3k -
Continue with social login buttons (google, linkedin, twitter, facebook, github, apple)Login/signup buttons for Google, LinkedIn, Twitter, Facebook, GitHub, and Apple
18.4k
Browse by topic
Explore components by Tags
Jump straight to the UI pattern you need.
Can't find it?
Didn't find the component you were looking for?
Search across 3,000+ community-built components and grab the code in seconds.