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.2k

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

1.9k
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

9 months ago

1.5k
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

7 months ago

997
Review popup form with toggle and stars
Review popup form with toggle and stars

Author:
Ayman Reifoun

6 months ago

647
macOS Style Webpage – macOS Design in the Browser
A simple webpage inspired by the macOS interface. It recreates the clean design, dock, and desktop look of macOS using only HTML, tailwind CSS, and JavaScript. This project focuses on front-end styling and layout to bring the visual feel of macOS to the web — not a full simulation, just the look and vibe.

Author:
Hamza Atig

3 weeks ago

409
Simple Footer

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

1 year ago

2.5k
profile
user profile

Author:
gidy

5 months ago

591
Help and support center ticketing system
Help and support center ticketing system

Author:
Rushikesh Latpate

9 months ago

1.3k
navigation header
responsive navigation header

Author:
Abid Ullah

1 year ago

2.3k
Aurora Spinner
Aurora Spinner using tailwindcss

Author:
Deepak Kumar Chouhan

10 months ago

1.3k
Play, Pause and Stop buttons

Author:
Lukas Müller

2 years ago

11.2k
Ai clone, chat ui
Chat interface for ai builder, dont toomuch focused on designing responsive

Author:
Abhiraj

9 months ago

1.6k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components