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

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

visacardes
I'll create professional Visa card components with realistic styling and multiple card types

Author:
Anonymous

10 months ago

791
Simple dialpad

Author:
Brandon D

2 years ago

11.5k
barbershop

Author:
Ishimwe Shadad

3 months ago

426
Privacy Policy Page Template

Author:
Anonymous

1 year ago

1.7k
Configurable 3-Tier Responsive Pricing Table
A modern, responsive pricing table component inspired by SaaS layouts, built with HTML and Tailwind CSS. Features three distinct pricing tiers displayed in cards, stacking vertically on smaller screens and transitioning to a 3-column grid on large screens (lg breakpoint). Includes interactive top controls for selecting the number of users and toggling between monthly/yearly billing cycles. Each card uses placeholder content for icons, titles, descriptions, features (with checkmarks/info icons), and distinct call-to-action buttons, making it easily adaptable. Styled with subtle background colors and clear typography for excellent readability.

Author:
Hamza Atig

11 months ago

874
color blur
blur

Author:
BocchiChan

1 year ago

1.8k
Our features
Our features

Author:
Tanvir Hasan Bappy (Tanvir)

1 year ago

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

1 year ago

2.2k
templete
templete

Author:
Uwera Dorcas

9 months ago

775
Portfolio
This responsive portfolio with dark mode support includes: 1. Fully responsive design that works on both desktop and mobile devices 2. Dark mode toggle with system preference detection and local storage persistence 3. Indigo-800 and Blue-900 color scheme for primary colors in light and dark modes 4. Beautiful animations and effects: 1. Fade-in and slide-up animations for sections using Intersection Observer 2. Hover effects on projects and buttons 3. Smooth scrolling for navigation 5. Mobile-friendly navigation with a toggle menu 6. Sections for About, Projects, and Contact 7. A contact form with styled inputs 8. Social media links in the footer 9. Accessibility considerations (proper heading structure, color contrast, focus styles, ARIA labels) Key features: - The color scheme uses Indigo-800 for light mode and orange-400 for dark mode as primary colors - Dark mode toggle in the header with a sun/moon icon - Sections fade in and slide up as they enter the viewport - Project cards have a hover effect with scaling and increased shadow - The contact form has animated focus states - Social media icons change color on hover - The layout is responsive, with a hamburger menu for mobile screens - Smooth scrolling behavior for navigation links - Dark mode preference is saved in local storage and syncs with system preference This implementation provides a visually appealing, accessible, and functional responsive portfolio with dark mode support, using HTML, Tailwind CSS, and vanilla JavaScript for the

Author:
nejaa badr

1 year ago

3.3k
Coffee & Tea
Coffee: A brewed drink prepared from roasted seeds, called coffee beans, of the coffee plant. Tea: An agricultural product of the leaves, leaf buds, and internodes of various cultivars and sub-varieties of the Camellia sinensis plant, processed and cured using various methods.

Author:
Augustin

10 months ago

1k
Text Overlay Effect
This is a text overlay effect, featuring a subtle background title and a prominent foreground heading. This design enhances visual interest while maintaining a clean, modern aesthetic.

Author:
Anum Shahana

1 year ago

1.7k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components