Home
Prajwal Hallale
Social share buttons box

Social share buttons box

This tailwind example is contributed by Prajwal Hallale, on 28-Apr-2023. Component is made with Tailwind CSS v3. similar terms for this example are Social media links,

Social media buttons

Author Prajwal Hallale

11.8k

Fork Fullscreen

<fieldset class="text-lg border-2 border-gray-300 rounded-lg p-4 mb-4 max-w-sm mx-auto mt-24">
    <legend class="px-2 text-xl font-semibold">
        Share
    </legend>
    <div id="laravel-share-this" class="flex justify-center gap-4 flex-wrap" style="color: black;">
        <a href="https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fmcqmate.com%2Fquiz%2F14%2F8085-microprocessor&amp;quote=8085%2BMicroprocessor%2Bonline%2Bpractice%2Btest"
            target="_blank"
            class="border-2 border-blue-500 rounded-md py-1 px-2 text-blue-500 hover:bg-blue-500 hover:text-white">Facebook</a>
        <a href="https://wa.me/?text=8085+Microprocessor+online+practice+test%0A%0Ahttps%3A%2F%2Fmcqmate.com%2Fquiz%2F14%2F8085-microprocessor"
            target="_blank"
            class="border-2 border-green-500 rounded-md py-1 px-2 text-green-500 hover:bg-green-500 hover:text-white">Whatsapp</a>
        <a href="https://twitter.com/intent/tweet?text=8085+Microprocessor+online+practice+test%0A&amp;url=https%3A%2F%2Fmcqmate.com%2Fquiz%2F14%2F8085-microprocessor"
            target="_blank"
            class="border-2 border-blue-400 rounded-md py-1 px-2 text-blue-400 hover:bg-blue-400 hover:text-white">Twitter</a>
        <a href="https://telegram.me/share/url?text=8085+Microprocessor+online+practice+test%0A&amp;url=https%3A%2F%2Fmcqmate.com%2Fquiz%2F14%2F8085-microprocessor"
            target="_blank"
            class="border-2 border-blue-600 rounded-md py-1 px-2 text-blue-600 hover:bg-blue-600 hover:text-white">Telegram</a>
    </div>
</fieldset>

Related Examples

Social share icons

Author:
Amit Pachange

3 years ago

13k
Social media icons svg

Author:
Samuel Dawson

3 years ago

21.6k
Buttons with Icon

Author:
_Amar_

3 years ago

16.1k
Card with social media share buttons

Author:
Computer guy

2 years ago

9.3k
Social media icons
'follow us on' buttons

Author:
R.P Ketan

2 years ago

9k
Social share icons

Author:
Amit Pachange

3 years ago

11k
Social links with icons

Author:
Leon Bachmann

3 years ago

12.7k
Social Media Icons
Social Media Icons

Author:
Sedat Kumcu

1 year ago

2.1k
Share button

Author:
Maxim

1 year ago

1.6k
Team Section

$$@(\/)(\/)¥$ Author:
$@(\/)(\/)¥

1 year ago

2.4k
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).

Author:
Juan D. Cortorreal

3 months ago

460
Continue with Google button
Login with google button for social login.

Author:
S. Patel

2 years ago

24.6k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components