Home
Computer guy
Card with social media share buttons

Card with social media share buttons

This tailwind example is contributed by Computer guy, on 27-Sep-2023. Component is made with Tailwind CSS v3. It is responsive. It supports dark mode. similar terms for this example are Social media links,

Card Social media buttons

Author Computer guy

8.6k

Fork Fullscreen

<section>
    <div
        class="mx-auto max-w-sm mt-20 border-4 border-indigo-600 shadow-[5px_5px_0_0_rgba(0,0,0,1)] shadow-indigo-600/100 max-w-5xl mx-5 p-4 md:p-10 flex flex-col items-center justify-center text-center">
       
        <p class="text-indigo-900 text-xl md:text-2xl font-bold border-b-4 border-b-indigo-300">Share this post</p>

<ul class="flex flex-row items-center justify-center text-center mt-5">
            <li class="mx-2">
                <a href="" target="_blank" aria-label="Share on Twitter">
                    <svg class="h-8 text-indigo-700 hover:text-indigo-300" fill="currentColor" role="img"
                        viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                        <title>Twitter</title>
                        <path
                            d="M23.953 4.57a10 10 0 01-2.825.775 4.958 4.958 0 002.163-2.723c-.951.555-2.005.959-3.127 1.184a4.92 4.92 0 00-8.384 4.482C7.69 8.095 4.067 6.13 1.64 3.162a4.822 4.822 0 00-.666 2.475c0 1.71.87 3.213 2.188 4.096a4.904 4.904 0 01-2.228-.616v.06a4.923 4.923 0 003.946 4.827 4.996 4.996 0 01-2.212.085 4.936 4.936 0 004.604 3.417 9.867 9.867 0 01-6.102 2.105c-.39 0-.779-.023-1.17-.067a13.995 13.995 0 007.557 2.209c9.053 0 13.998-7.496 13.998-13.985 0-.21 0-.42-.015-.63A9.935 9.935 0 0024 4.59z">
                        </path>
                    </svg>
                </a>
            </li>

<li class="mx-2">
                <a href="" target="_blank" aria-label="Share on LinkedIn">
                    <svg class="h-8 text-indigo-700 hover:text-indigo-300" fill="currentColor" role="img"
                        viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                        <title>LinkedIn</title>
                        <path
                            d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z">
                        </path>
                    </svg>
                </a>
            </li>

<li class="mx-2">
                <a href="" target="_blank" aria-label="Share on Mastodon">
                    <svg class="h-8 text-indigo-700 hover:text-indigo-300" fill="currentColor" role="img"
                        viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                        <title>Mastodon</title>
                        <path
                            d="M23.268 5.313c-.35-2.578-2.617-4.61-5.304-5.004C17.51.242 15.792 0 11.813 0h-.03c-3.98 0-4.835.242-5.288.309C3.882.692 1.496 2.518.917 5.127.64 6.412.61 7.837.661 9.143c.074 1.874.088 3.745.26 5.611.118 1.24.325 2.47.62 3.68.55 2.237 2.777 4.098 4.96 4.857 2.336.792 4.849.923 7.256.38.265-.061.527-.132.786-.213.585-.184 1.27-.39 1.774-.753a.057.057 0 0 0 .023-.043v-1.809a.052.052 0 0 0-.02-.041.053.053 0 0 0-.046-.01 20.282 20.282 0 0 1-4.709.545c-2.73 0-3.463-1.284-3.674-1.818a5.593 5.593 0 0 1-.319-1.433.053.053 0 0 1 .066-.054c1.517.363 3.072.546 4.632.546.376 0 .75 0 1.125-.01 1.57-.044 3.224-.124 4.768-.422.038-.008.077-.015.11-.024 2.435-.464 4.753-1.92 4.989-5.604.008-.145.03-1.52.03-1.67.002-.512.167-3.63-.024-5.545zm-3.748 9.195h-2.561V8.29c0-1.309-.55-1.976-1.67-1.976-1.23 0-1.846.79-1.846 2.35v3.403h-2.546V8.663c0-1.56-.617-2.35-1.848-2.35-1.112 0-1.668.668-1.67 1.977v6.218H4.822V8.102c0-1.31.337-2.35 1.011-3.12.696-.77 1.608-1.164 2.74-1.164 1.311 0 2.302.5 2.962 1.498l.638 1.06.638-1.06c.66-.999 1.65-1.498 2.96-1.498 1.13 0 2.043.395 2.74 1.164.675.77 1.012 1.81 1.012 3.12z">
                        </path>
                    </svg>
                </a>
            </li>

<li class="mx-2">
                <a href="" target="_blank" aria-label="Share on Facebook">
                    <svg class="h-8 text-indigo-700 hover:text-indigo-300" fill="currentColor" role="img"
                        viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                        <title>Facebook</title>
                        <path
                            d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z">
                        </path>
                    </svg>
                </a>
            </li>
        </ul>
    </div>
</section>

Related Examples

Social share icons

Author:
Amit Pachange

2 years ago

12.5k
Social media icons svg

Author:
Samuel Dawson

2 years ago

20.4k
Social links with icons

Author:
Leon Bachmann

2 years ago

11.7k
Social share buttons box

Author:
Prajwal Hallale

2 years ago

11.5k
Social share icons

Author:
Amit Pachange

2 years ago

10.3k
Social media icons
'follow us on' buttons

Author:
R.P Ketan

2 years ago

8.5k
Team Section

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

7 months ago

1.8k
DevPort
modern portifolio by salvator

Author:
Baraka Salvator

1 month ago

326
home
html , css

Author:
Hacker Development

1 month ago

502
Responsive Multi-Tier Pricing Table Component
flexible and responsive 3-tier pricing table component built with HTML and Tailwind CSS. Features distinct visual styles for different plans (e.g., highlighting a recommended option), adapts to various screen sizes, and supports both light and dark color schemes. Uses generic placeholders for easy adaptation to any product or service.

Author:
Hamza Atig

2 months ago

421
Responsive card with image

Author:
Simon Scheffer

2 years ago

10.6k
Auto-Flipping 3D Profile Card with Tailwind CSS
This project showcases a 3D auto-flipping profile card built with HTML, Tailwind CSS, and vanilla JavaScript. The front side displays the user’s photo, name, and role, while the back side reveals contact information. The card flips automatically every few seconds to add a dynamic, engaging feel—perfect for portfolios or personal websites.

Author:
irahoza daniel

1 month ago

264

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components