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

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

3 months ago

616
Chat Bot
Simulation of a chat bot that can be used for conversations as a sketch idea

Author:
Ameth Galarcio

5 months ago

1.4k
Social links with icons

Author:
Leon Bachmann

1 year ago

10.7k
Show user details

Author:
Lucas Martinez

1 year ago

21.6k
Upvote downvote buttons

Author:
Lucas Martinez

1 year ago

10.4k
admin panel

Author:
Anonymous

7 months ago

1k
cards
cards with background animation

Author:
Anonymous

1 year ago

9.7k
Calculator
This calculator uses CSS although it can be passed directly to tailwind

Author:
Ameth Galarcio

5 months ago

893
Background image section

Author:
Marc

11 months ago

4.7k
Chat template
fullscreen chat template suitable for mobile devices

Author:
Manon Daniel

1 year ago

15.3k
Simple layout

Author:
Edward Carandang

7 months ago

1.2k
cards
cards with background animation

Author:
Anonymous

8 months ago

1.5k

Explore components by Tags

Didn't find component you were looking for?

Search from 1800+ components