Home
Maxim
Share button

Share button

This tailwind example is contributed by Maxim, on 30-Dec-2024. Component is made with Tailwind CSS v3. It is responsive. similar terms for this example are Social media links,

Other Social media buttons

Author Maxim

1.3k

Fork Fullscreen

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Share Menu</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <script defer src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js"></script>
    <script type="module" src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.esm.js"></script>
    <script nomodule src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.js"></script>
</head>
<body>
    <div class="flex h-80 justify-center">
        <div x-data="{
            open: false,
            copied: false,
            toggle() {
                if (this.open) {
                    return this.close()
                }
                this.$refs.button.focus()
                this.open = true
            },
            close(focusAfter) {
                if (!this.open) return
                this.open = false
                focusAfter && focusAfter.focus()
            },
            copyLink() {
                navigator.clipboard.writeText(window.location.href)
                    .then(() => {
                        this.copied = true;
                        setTimeout(() => this.copied = false, 2000);
                    });
            },
            shareUrl: window.location.href,
            shareTitle: document.title,
            share(platform) {
                const urls = {
                    facebook: `https://www.facebook.com/sharer/sharer.php?u=${encodeURIComponent(this.shareUrl)}`,
                    twitter: `https://twitter.com/intent/tweet?url=${encodeURIComponent(this.shareUrl)}&text=${encodeURIComponent(this.shareTitle)}`,
                    pinterest: `https://pinterest.com/pin/create/button/?url=${encodeURIComponent(this.shareUrl)}&description=${encodeURIComponent(this.shareTitle)}`,
                    email: `mailto:?subject=${encodeURIComponent(this.shareTitle)}&body=${encodeURIComponent(this.shareUrl)}`,
                    instagram: `https://instagram.com/share?url=${encodeURIComponent(this.shareUrl)}`
                };
                
                if (urls[platform]) {
                    window.open(urls[platform], '_blank', 'width=600,height=400');
                }
            }
        }"
        x-on:keydown.escape.prevent.stop="close($refs.button)"
        x-on:focusin.window="!$refs.panel.contains($event.target) && close()"
        x-id="['dropdown-button']"
        class="relative inline-block">
            
            
<button x-ref="button" 
        x-on:click="toggle()" 
        :aria-expanded="open" 
        :aria-controls="$id('dropdown-button')" 
        type="button" 
        class="inline-flex items-center gap-2 rounded-lg border border-gray-300 bg-white px-4 py-2 text-center text-sm font-medium text-gray-700 shadow-sm transition-all hover:bg-gray-100 focus:ring focus:ring-gray-100">
    <span>Share</span>
    <ion-icon name="share-social-outline" class="h-4 w-4"></ion-icon>
</button>

<div x-ref="panel" 
                 x-show="open" 
                 x-transition.origin.top.left 
                 x-on:click.outside="close($refs.button)" 
                 :id="$id('dropdown-button')" 
                 class="absolute left-0 z-10 mt-2 w-48 rounded-lg border border-gray-100 bg-white text-left text-sm shadow-lg"
                 style="display: none;">
                <div class="p-2">
                    
                    <button @click="share('facebook')" class="flex w-full items-center gap-2 rounded-md px-3 py-2 text-gray-700 hover:bg-gray-100">
                        <ion-icon name="logo-facebook" class="h-5 w-5 text-blue-600"></ion-icon>
                        Facebook
                    </button>

<button @click="share('instagram')" class="flex w-full items-center gap-2 rounded-md px-3 py-2 text-gray-700 hover:bg-gray-100">
                        <ion-icon name="logo-instagram" class="h-5 w-5 text-pink-600"></ion-icon>
                        Instagram
                    </button>

<button @click="share('twitter')" class="flex w-full items-center gap-2 rounded-md px-3 py-2 text-gray-700 hover:bg-gray-100">
                        <ion-icon name="logo-twitter" class="h-5 w-5 text-blue-400"></ion-icon>
                        Twitter
                    </button>

<button @click="share('email')" class="flex w-full items-center gap-2 rounded-md px-3 py-2 text-gray-700 hover:bg-gray-100">
                        <ion-icon name="mail-outline" class="h-5 w-5 text-gray-600"></ion-icon>
                        Email
                    </button>

<button @click="share('pinterest')" class="flex w-full items-center gap-2 rounded-md px-3 py-2 text-gray-700 hover:bg-gray-100">
                        <ion-icon name="logo-pinterest" class="h-5 w-5 text-red-600"></ion-icon>
                        Pinterest
                    </button>

<button @click="copyLink()" class="flex w-full items-center gap-2 rounded-md px-3 py-2 text-gray-700 hover:bg-gray-100">
                        <ion-icon name="link-outline" class="h-5 w-5 text-gray-600"></ion-icon>
                        <span x-text="copied ? 'Copied!' : 'Copy Link'"></span>
                    </button>
                </div>
            </div>
        </div>

<div x-show="copied"
             x-transition
             class="fixed bottom-4 right-4 rounded-lg bg-gray-800 px-4 py-2 text-sm text-white"
             style="display: none;">
            Link copied to clipboard!
        </div>
    </div>
</body>
</html>

Related Examples

Tailwind CSS Blog sharing buttons with blog details
Introducing our Blog Sharing Buttons with Blog Details component, designed to enhance the social sharing experience on your blog posts.

Author:
Abid Ullah

1 year ago

2.1k
Modern Responsive Footer with Tailwind CSS
This sleek and modern responsive footer is built using HTML and Tailwind CSS. It features three sections: brand information, useful links, and social media icons. The footer includes smooth hover effects, subtle fade-in animations, and a fully responsive design that adapts seamlessly to different screen sizes. Perfect for websites looking for a professional and stylish footer section.

Author:
Ayyamperumal S

10 months ago

1.8k
Muhammad Umair Arshad - Frontend Developer Resume | React, TypeScript, Tailwind CSS
Professional resume of Muhammad Umair Arshad, a skilled Frontend Developer specializing in React, TypeScript, and Tailwind CSS. I build high-performance web applications with responsive UI design.

Author:
Muhammad Umair Arshad

8 months ago

1.1k
Review popup form with toggle and stars
Review popup form with toggle and stars

Author:
Ayman Reifoun

8 months ago

710
Order History
Order History

Author:
Tanvir Hasan Bappy (Tanvir)

8 months ago

1k
Skill showcase section for resume / porfolio website
show skill progression

Author:
Ava Brown

2 years ago

13.6k
Features Component

Author:
KULDEEP

5 months ago

946
blog component
good blog

Author:
Uwera Dorcas

6 months ago

698
Age verification 18+

Author:
Maxim

11 months ago

1k
Powerful Website Features
Open Layout Design: No traditional boxes - content flows naturally Gradient Accents: Vibrant color gradients for visual interest Animated Icons: Subtle floating animations on feature icons Hover Effects: Soft glow backgrounds appear on hover Tag System: Color-coded tags for each feature's attributes Dark Theme: Sophisticated dark background with perfect contrast

Author:
KULDEEP

5 months ago

1k
Social Media Icons
Social Media Icons

Author:
Aman kumar

1 year ago

1.9k
blockquote

Author:
Freja Jensen

2 years ago

10k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components