Home
Prajwal Hallale
Social share buttons box

Social share buttons box

This tailwind example is contributed by Prajwal Hallale, on 28-Apr-2023. Component is made with Tailwind CSS v3. similar terms for this example are Social media links,

Social media buttons

Author Prajwal Hallale

11.8k

Fork Fullscreen

<fieldset class="text-lg border-2 border-gray-300 rounded-lg p-4 mb-4 max-w-sm mx-auto mt-24">
    <legend class="px-2 text-xl font-semibold">
        Share
    </legend>
    <div id="laravel-share-this" class="flex justify-center gap-4 flex-wrap" style="color: black;">
        <a href="https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fmcqmate.com%2Fquiz%2F14%2F8085-microprocessor&amp;quote=8085%2BMicroprocessor%2Bonline%2Bpractice%2Btest"
            target="_blank"
            class="border-2 border-blue-500 rounded-md py-1 px-2 text-blue-500 hover:bg-blue-500 hover:text-white">Facebook</a>
        <a href="https://wa.me/?text=8085+Microprocessor+online+practice+test%0A%0Ahttps%3A%2F%2Fmcqmate.com%2Fquiz%2F14%2F8085-microprocessor"
            target="_blank"
            class="border-2 border-green-500 rounded-md py-1 px-2 text-green-500 hover:bg-green-500 hover:text-white">Whatsapp</a>
        <a href="https://twitter.com/intent/tweet?text=8085+Microprocessor+online+practice+test%0A&amp;url=https%3A%2F%2Fmcqmate.com%2Fquiz%2F14%2F8085-microprocessor"
            target="_blank"
            class="border-2 border-blue-400 rounded-md py-1 px-2 text-blue-400 hover:bg-blue-400 hover:text-white">Twitter</a>
        <a href="https://telegram.me/share/url?text=8085+Microprocessor+online+practice+test%0A&amp;url=https%3A%2F%2Fmcqmate.com%2Fquiz%2F14%2F8085-microprocessor"
            target="_blank"
            class="border-2 border-blue-600 rounded-md py-1 px-2 text-blue-600 hover:bg-blue-600 hover:text-white">Telegram</a>
    </div>
</fieldset>

Related Examples