<div class="flex items-center border"> <a class=" p-1 text-violet-500 px-2 text-xl " href="#"> <ion-icon name="share-social-sharp" class="mt-2"></ion-icon> </a> <div class="flex"><a class=" bg-blue-800 text-white px-2 m-1" href="#"> <ion-icon name="logo-facebook"></ion-icon> Facebook</a></div> <div class="flex"><a class=" bg-green-500 text-white px-2 m-1" href="#"> <ion-icon name="logo-whatsapp"></ion-icon> WhatsApp</a></div> <div class="flex"><a class=" bg-blue-500 text-white px-2 m-1" href="#"> <ion-icon name="logo-twitter"></ion-icon> Twitter</a></div> <div class="flex"><a class=" bg-red-500 text-white px-2 m-1" href="#"> <ion-icon name="logo-reddit"></ion-icon> Reddit</a></div> </div> <script type="module" src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"></script> <script nomodule src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js"></script>

<div class="flex flex-row m-2 text-xl space-x-3"> <a class="p-1 font-medium m-1 text-blue-600 hover:text-black hover:border-black border-2 border-blue-600 px-2 " href="#"> <ion-icon name="logo-facebook" class="mt-1"></ion-icon> </a> <a class=" p-1 font-medium m-1 text-red-600 hover:text-black hover:border-black border-2 border-red-600 px-2 " href="#"> <ion-icon name="logo-instagram" class="mt-1"></ion-icon></a> <a class=" p-1 font-medium m-1 text-cyan-500 hover:text-black hover:border-black border-2 border-cyan-500 px-2 " href="#"> <ion-icon name="logo-linkedin" class="mt-1"></ion-icon></a> <a class=" p-1 font-medium m-1 text-yellow-500 hover:text-black hover:border-black border-2 border-yellow-500 px-2 " href="#"> <ion-icon name="logo-snapchat" class="mt-1"></ion-icon></a> <a class=" p-1 font-medium m-1 text-gray-500 hover:text-black hover:border-black border-2 border-gray-500 px-2 " href="#"> <ion-icon name="mail-sharp" class="mt-1"></ion-icon></a> <a class=" p-1 font-medium m-1 text-red-500 hover:text-black hover:border-black border-2 border-red-500 px-2" href="#"> <ion-icon name="logo-reddit" class="mt-1"></ion-icon> </a> </div> <script type="module" src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"></script> <script nomodule src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js"></script>

<div class="flex m-2 space-x-2"> <a class=" p-1 text-blue-500 m-1 px-2 text-xl hover:bg-blue-500 hover:text-white hover:border hover:rounded-md" href="#"> <ion-icon name="logo-facebook" class="mt-1"></ion-icon> </a> <a class=" p-1 text-red-500 m-1 px-2 text-xl hover:bg-red-500 hover:text-white hover:border hover:rounded-md" href="#"> <ion-icon name="logo-instagram" class="mt-1"></ion-icon> </a> <a class=" p-1 text-blue-400 m-1 px-2 text-xl hover:bg-blue-500 hover:text-white hover:border hover:rounded-md" href="#"> <ion-icon name="logo-twitter" class="mt-1"></ion-icon> </a> <a class=" p-1 text-yellow-500 px-2 text-xl hover:bg-yellow-500 hover:text-white hover:border hover:rounded-md" href="#"> <ion-icon name="logo-linkedin" class="mt-2"></ion-icon> </a> <a class=" p-1 text-violet-500 px-2 text-xl hover:bg-violet-500 hover:text-white hover:border hover:rounded-md" href="#"> <ion-icon name="share-social-sharp" class="mt-2"></ion-icon> </a> </div> <script type="module" src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"></script> <script nomodule src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js"></script>

<div class="flex flex-row m-2 rounded-2xl "> <a class="p-1 font-medium hover:rounded-full m-1 hover:text-blue-600 hover:border-0 border border-black px-2 " href="#"> <ion-icon name="logo-facebook"></ion-icon> </a> <a class=" p-1 font-medium hover:rounded-full m-1 hover:text-red-500 hover:border-0 border border-black px-2 " href="#"> <ion-icon name="logo-instagram"></ion-icon></a> <a class=" p-1 font-medium hover:rounded-full m-1 hover:text-yellow-500 hover:border-0 border border-black px-2 " href="#"> <ion-icon name="logo-snapchat"></ion-icon></a> <a class=" p-1 font-medium hover:rounded-full m-1 hover:text-blue-400 hover:border-0 border border-black px-2 " href="#"> <ion-icon name="logo-twitter"></ion-icon></a> <a class=" p-1 font-medium hover:rounded-full m-1 hover:text-black hover:border-0 border border-black px-2 " href="#"> <ion-icon name="mail-sharp"></ion-icon></a> <a class=" p-1 font-medium hover:rounded-full m-1 hover:text-red-600 hover:border-0 border border-black px-2 " href="#"> <ion-icon name="logo-reddit"></ion-icon> </a> </div> <script type="module" src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"></script> <script nomodule src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js"></script>

<div class="flex m-2 shadow bg-black text-white"> <a class="rounded p-1 font-medium m-2 text-xl hover:text-blue-600" href="#"> <ion-icon name="logo-facebook"></ion-icon> </a> <a class="rounded p-1 font-medium m-2 text-xl hover:text-red-600" href="#"> <ion-icon name="logo-instagram"></ion-icon> </a> <a class="rounded p-1 font-medium m-2 text-xl hover:text-cyan-600" href="#"> <ion-icon name="logo-twitter"></ion-icon> </a> <a class="rounded p-1 font-medium m-2 text-xl hover:text-gray-100" href="#"> <ion-icon name="mail-sharp"></ion-icon> </a> <a class="rounded p-1 font-medium m-2 text-xl hover:text-yellow-600" href="#"> <ion-icon name="logo-google"></ion-icon> </a> </div> <script type="module" src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"></script> <script nomodule src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js"></script>

<div class="flex m-2 space-x-4"> <a class="rounded p-1 bg-blue-500 hover:bg-white text-white hover:text-blue-500 m-1 px-2 text-lg" href="#"> <ion-icon name="logo-facebook" class="mt-1"></ion-icon> </a> <a class="rounded p-1 bg-red-500 hover:bg-white text-white hover:text-red-500 m-1 px-2 text-lg" href="#"> <ion-icon name="logo-instagram" class="mt-1"></ion-icon> </a> <a class="rounded p-1 bg-blue-400 hover:bg-white text-white hover:text-blue-400 m-1 px-2 text-lg" href="#"> <ion-icon name="logo-twitter" class="mt-1"></ion-icon> </a> <a class="rounded p-1 bg-yellow-500 hover:bg-white text-white hover:text-yellow-500 m-1 px-2 text-lg" href="#"> <ion-icon name="logo-linkedin" class="mt-1"></ion-icon> </a> <a class="rounded p-1 bg-violet-500 hover:bg-white text-white hover:text-violet-500 m-1 px-2 text-lg" href="#"> <ion-icon name="logo-google" class="mt-1"></ion-icon> </a> <a class="rounded p-1 bg-red-600 hover:bg-white text-white hover:text-red-600 m-1 px-2 text-lg" href="#"> <ion-icon name="logo-reddit" class="mt-1"></ion-icon> </a> </div> <script type="module" src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"></script> <script nomodule src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js"></script>

<div class="flex space-x-4"> <a href="#" class="text-xl text-red-600 rounded-full border border-red-500 px-2 py-1 hover:text-blue-500 hover:border-0"> <ion-icon name="logo-facebook" class="mt-1"></ion-icon> </a> <a href="#" class="text-xl text-red-600 rounded-full border border-red-500 px-2 py-1 hover:text-blue-500 hover:border-0"> <ion-icon name="logo-instagram" class="mt-1"></ion-icon> </a> <a href="#" class="text-xl text-red-600 rounded-full border border-red-500 px-2 py-1 hover:text-blue-500 hover:border-0"> <ion-icon name="logo-linkedin" class="mt-1"></ion-icon> </a> <a href="#" class="text-xl text-red-600 rounded-full border border-red-500 px-2 py-1 hover:text-blue-500 hover:border-0"> <ion-icon name="logo-reddit" class="mt-1"></ion-icon> </a> </div> <script type="module" src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"></script> <script nomodule src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js"></script>

<div class="flex flex-col m-2 shadow text-white"> <a class="p-1 font-medium text-xl bg-blue-600 hover:bg-white hover:text-blue-600 border " href="#"> <ion-icon name="logo-facebook"></ion-icon> </a> <a class="p-1 font-medium text-xl bg-green-500 hover:bg-white hover:text-green-500 border " href="#"> <ion-icon name="logo-whatsapp"></ion-icon> </a> <a class="p-1 font-medium text-xl hover:bg-white bg-blue-700 hover:text-blue-700 border " href="#"> <ion-icon name="logo-tumblr"></ion-icon> </a> <a class="p-1 font-medium text-xl hover:text-orange-500 border bg-orange-500 hover:bg-white" href="#"> <ion-icon name="mail-sharp"></ion-icon> </a> <a class="p-1 font-medium text-xl hover:bg-white bg-red-500 hover:text-red-500 border " href="#"> <ion-icon name="logo-reddit"></ion-icon> </a> </div> <script type="module" src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"></script> <script nomodule src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js"></script>

<div class="flex flex-col m-2 shadow bg-black text-white"> <a class="rounded p-1 font-medium m-2 text-xl hover:text-blue-600" href="#"> <ion-icon name="logo-facebook"></ion-icon> </a> <a class="rounded p-1 font-medium m-2 text-xl hover:text-red-600" href="#"> <ion-icon name="logo-youtube"></ion-icon> </a> <a class="rounded p-1 font-medium m-2 text-xl hover:text-cyan-600" href="#"> <ion-icon name="logo-tumblr"></ion-icon> </a> <a class="rounded p-1 font-medium m-2 text-xl hover:text-gray-300" href="#"> <ion-icon name="mail-sharp"></ion-icon> </a> <a class="rounded p-1 font-medium m-2 text-xl hover:text-yellow-600" href="#"> <ion-icon name="logo-google"></ion-icon> </a> </div> <script type="module" src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"></script> <script nomodule src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js"></script>

<div class="flex flex-col m-2 space-y-2"> <a class="rounded p-1 bg-blue-500 hover:bg-white text-white hover:text-blue-500 m-1 px-2 text-lg" href="#"> <ion-icon name="logo-github" class="mt-1"></ion-icon> </a> <a class="rounded p-1 bg-yellow-500 hover:bg-white text-white hover:text-yellow-500 m-1 px-2 text-lg" href="#"> <ion-icon name="logo-tumblr" class="mt-1"></ion-icon> </a> <a class="rounded p-1 bg-green-400 hover:bg-white text-white hover:text-green-400 m-1 px-2 text-lg" href="#"> <ion-icon name="logo-whatsapp" class="mt-1"></ion-icon> </a> <a class="rounded p-1 bg-red-500 hover:bg-white text-white hover:text-red-500 m-1 px-2 text-lg" href="#"> <ion-icon name="logo-youtube" class="mt-1"></ion-icon> </a> </div> <script type="module" src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"></script> <script nomodule src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js"></script>