<a href="#" class="flex text-black bg-gradient-to-tr from-green-300 via-blue-500 to-purple-600 rounded-lg py-1 px-2 m-2 font-medium hover:text-white border-black border"> <ion-icon name="logo-google-playstore" class="m-1 text-xl"></ion-icon> <div>Download from Playstore</div> </a> <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>

<a href="#" class="flex text-black bg-gradient-to-bl from-fuchsia-500 via-red-600 to-orange-400 rounded-lg py-1 px-2 m-2 font-medium hover:text-white border-black border"> <ion-icon name="logo-apple" class="m-1 text-xl"></ion-icon> <div>Download from Appstore</div> </a> <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>

<a href="#" class="flex text-black bg-gradient-to-bl from-fuchsia-500 via-red-600 to-orange-400 rounded-lg py-1 px-2 m-2 font-medium hover:text-white border-black border"> <ion-icon name="logo-apple" class="m-1 text-xl"></ion-icon> <div>Download from Appstore</div> </a> <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>

<a href="#" class="flex text-black bg-white rounded-lg py-1 px-2 m-2 font-medium hover:text-blue-600 border-black border"> <ion-icon name="logo-Facebook" class="m-1 text-xl text-blue-600"></ion-icon> <div>Login by Facebook</div> </a> <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>

<a href="#" class="flex text-black bg-white rounded-lg py-1 px-2 m-2 font-medium hover:text-stone-700 border-black border"> <ion-icon name="logo-github" class="m-1 text-xl "></ion-icon> <div>Login by GitHub</div> </a> <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>

<a href="#" class="flex text-black bg-white rounded-lg py-1 px-2 m-2 font-medium hover:text-red-500 border-black border"> <ion-icon name="logo-pinterest" class="m-1 text-xl text-red-700"></ion-icon> <div>Continue by Pinterest</div> </a> <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>

<a href="#" class="flex text-blue-600 bg-blue-200 rounded-2xl px-2 m-2 font-medium hover:text-blue-200 hover:bg-blue-600"> <ion-icon name="folder-outline" class="m-1 text-xl"></ion-icon> <div>Archive</div> </a> <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>

<a href="#" class="flex text-blue-600 rounded-2xl px-2 m-2 font-medium hover:text-blue-900 "> <div>Undo</div> </a> <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>

<a href="#" class="flex text-yellow-600 rounded-2xl px-2 m-2 font-medium hover:text-yellow-500 text-2xl "> <ion-icon name="document"></ion-icon> </a> <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>

<a href="#" class="flex text-red-600 bg-red-200 rounded-lg px-2 m-2 font-medium hover:text-red-200 hover:bg-red-600"> <ion-icon name="pause-outline" class="m-1 text-xl"></ion-icon> <div>Pause</div> </a> <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>

<a href="#" class="flex text-black rounded-full p-2 m-2 font-medium hover:text-yellow-500 hover:bg-black text-2xl bg-yellow-400"> <ion-icon name="warning-outline"></ion-icon> </a> <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>

<a href="#" class="flex text-white rounded-full p-1 m-2 font-medium text-2xl bg-red-600 brightness-150"> <ion-icon name="heart-outline"></ion-icon> </a> <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>

<a href="#" class="flex text-violet-700 bg-violet-300 rounded-lg px-2 m-2 font-medium hover:text-white hover:bg-violet-600"> <ion-icon name="settings-outline" class="m-1 text-xl"></ion-icon> <div>Settings</div> </a> <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>

<a href="#" class="flex text-white bg-red-500 rounded-lg px-2 m-2 font-medium hover:bg-white hover:text-red-600"> <ion-icon name="Play-outline" class="m-1 text-xl"></ion-icon> <div>Play</div> </a> <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>

<a href="#" class="flex text-white bg-lime-500 rounded-lg px-2 m-2 font-medium hover:bg-black hover:text-lime-500"> <ion-icon name="cart-outline" class="m-1 text-xl"></ion-icon> <div>Add to cart</div> </a>

<a href="#" class="flex text-white bg-lime-500 rounded-full p-2 m-2 font-medium hover:bg-black hover:text-lime-500 hover:border-lime-500 hover:border-2"> <ion-icon name="call-outline" class="m-1 text-xl"></ion-icon> </a> <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>

<a href="#" class="flex text-white bg-red-500 rounded-full p-2 m-2 font-medium hover:bg-black hover:text-red-500 hover:border-red-500 hover:border-2"> <ion-icon name="call-outline" class="m-1 text-xl"></ion-icon> </a> <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>

<a href="#" class="flex text-red-500 bg-white rounded-lg px-2 m-2 font-medium hover:border-red-500 hover:border-2"> <ion-icon name="mic-outline" class="m-1 text-xl"></ion-icon> <div>Record</div> </a> <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>

<a href="#" class="flex text-blue-500 rounded-lg px-2 m-2 font-medium hover:bg-blue-500 hover:text-white "> <ion-icon name="share-outline" class="m-1 text-xl"></ion-icon> <div>Share</div> </a> <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>

<a href="#" class="flex text-blue-600 rounded-full p-1 m-2 font-medium hover:text-black "> <ion-icon name="share-social" class="m-1 text-2xl"></ion-icon> </a> <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>

<a href="#" class="flex text-yellow-400 rounded-full p-1 m-2 font-medium "> <ion-icon name="star-half" class="m-1 text-2xl"></ion-icon> </a> <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>

<a href="#" class="flex text-yellow-400 rounded-full p-1 m-2 font-medium "> <ion-icon name="star" class="m-1 text-2xl"></ion-icon> </a> <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>