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

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

11 months ago

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

9 months ago

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

Author:
Ayman Reifoun

8 months ago

748
Fake Medicine Detector
Fake Medicine Detector

Author:
Tanvir Hasan Bappy (Tanvir)

7 months ago

552
Hero Section with Tailwind CSS With Buttons
A modern, responsive Hero Section designed with Tailwind CSS to capture attention and drive engagement. Featuring a bold heading, compelling CTA buttons, and a high-quality image, this design enhances user experience and conversions. Ideal for landing pages, portfolios, and business websites, ensuring a strong first impression and higher interaction rates.

Author:
Abdul Baset Bappy

9 months ago

963
Skills Showcase, My Tech Stack and Expertise & Skills
🚀 Showcasing My Skills with TailwindCSS & Flexbox! I’ve designed a responsive and interactive Skills Section using Tailwind CSS and Flexbox. With smooth hover effects and a clean layout, this section highlights my expertise in: 🔹 Frontend Technologies – HTML, CSS, JavaScript, React, Next.js 🔹 Styling Frameworks – TailwindCSS 🔹 Backend & Tools – Node.js, Git

Author:
Muhammad Umair Arshad

9 months ago

1.3k
Product cards
Product cards for eCommerce

Author:
ehmasuk

2 months ago

343
Card KPI
Targetas ahora con un grafico

Author:
Raul antonio de la cruz hernandez

2 months ago

470
Attractive Feature Section
With Gradient Color 6 Features

Author:
KULDEEP

6 months ago

808
free tailwind resume template
free tailwind resume template

Author:
Geoffrey Callaghan

1 year ago

3.7k
Moving Background Animation

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

11 months ago

3.1k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components