Home
Aman kumar
Social Media Icons

Social Media Icons

Social Media Icons

This tailwind example is contributed by Aman kumar, on 28-Jun-2024. Component is made with Tailwind CSS v3. It is responsive. similar terms for this example are Social media links,

Social media buttons Logo cloud

Author Aman kumar

1.9k

7

Fork Fullscreen

<div class="bg-white w-full h-auto py-8 flex items-center justify-center gap-4 flex-wrap">
      <button class="w-10 h-10 flex items-center justify-center rounded-lg bg-white shadow-md shadow-gray-200 group transition-all duration-300">
      <svg class="transition-all duration-300 group-hover:scale-110"
      xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 72 72" fill="none">
        <path d="M46.4927 38.6403L47.7973 30.3588H39.7611V24.9759C39.7611 22.7114 40.883 20.4987 44.4706 20.4987H48.1756V13.4465C46.018 13.1028 43.8378 12.9168 41.6527 12.8901C35.0385 12.8901 30.7204 16.8626 30.7204 24.0442V30.3588H23.3887V38.6403H30.7204V58.671H39.7611V38.6403H46.4927Z" fill="#337FFF"/>
      </svg>
      </button>
      
      <button class="w-10 h-10 flex items-center justify-center group rounded-lg bg-white shadow-md shadow-gray-200 group transition-all duration-300">
      <svg class="transition-all duration-300 group-hover:scale-110" width="28" height="28" viewBox="0 0 72 72" fill="none" xmlns="http://www.w3.org/2000/svg">
        <path d="M27.4456 35.7808C27.4456 31.1786 31.1776 27.4468 35.7826 27.4468C40.3875 27.4468 44.1216 31.1786 44.1216 35.7808C44.1216 40.383 40.3875 44.1148 35.7826 44.1148C31.1776 44.1148 27.4456 40.383 27.4456 35.7808ZM22.9377 35.7808C22.9377 42.8708 28.6883 48.618 35.7826 48.618C42.8768 48.618 48.6275 42.8708 48.6275 35.7808C48.6275 28.6908 42.8768 22.9436 35.7826 22.9436C28.6883 22.9436 22.9377 28.6908 22.9377 35.7808ZM46.1342 22.4346C46.1339 23.0279 46.3098 23.608 46.6394 24.1015C46.9691 24.595 47.4377 24.9797 47.9861 25.2069C48.5346 25.4342 49.1381 25.4939 49.7204 25.3784C50.3028 25.2628 50.8378 24.9773 51.2577 24.5579C51.6777 24.1385 51.9638 23.6041 52.0799 23.0222C52.1959 22.4403 52.1367 21.8371 51.9097 21.2888C51.6828 20.7406 51.2982 20.2719 50.8047 19.942C50.3112 19.6122 49.7309 19.436 49.1372 19.4358H49.136C48.3402 19.4361 47.5771 19.7522 47.0142 20.3144C46.4514 20.8767 46.1349 21.6392 46.1342 22.4346ZM25.6765 56.1302C23.2377 56.0192 21.9121 55.6132 21.0311 55.2702C19.8632 54.8158 19.0299 54.2746 18.1538 53.4002C17.2777 52.5258 16.7354 51.6938 16.2827 50.5266C15.9393 49.6466 15.533 48.3214 15.4222 45.884C15.3009 43.2488 15.2767 42.4572 15.2767 35.781C15.2767 29.1048 15.3029 28.3154 15.4222 25.678C15.5332 23.2406 15.9425 21.918 16.2827 21.0354C16.7374 19.8682 17.2789 19.0354 18.1538 18.1598C19.0287 17.2842 19.8612 16.7422 21.0311 16.2898C21.9117 15.9466 23.2377 15.5406 25.6765 15.4298C28.3133 15.3086 29.1054 15.2844 35.7826 15.2844C42.4598 15.2844 43.2527 15.3106 45.8916 15.4298C48.3305 15.5408 49.6539 15.9498 50.537 16.2898C51.7049 16.7422 52.5382 17.2854 53.4144 18.1598C54.2905 19.0342 54.8308 19.8682 55.2855 21.0354C55.6289 21.9154 56.0351 23.2406 56.146 25.678C56.2673 28.3154 56.2915 29.1048 56.2915 35.781C56.2915 42.4572 56.2673 43.2466 56.146 45.884C56.0349 48.3214 55.6267 49.6462 55.2855 50.5266C54.8308 51.6938 54.2893 52.5266 53.4144 53.4002C52.5394 54.2738 51.7049 54.8158 50.537 55.2702C49.6565 55.6134 48.3305 56.0194 45.8916 56.1302C43.2549 56.2514 42.4628 56.2756 35.7826 56.2756C29.1024 56.2756 28.3125 56.2514 25.6765 56.1302ZM25.4694 10.9322C22.8064 11.0534 20.9867 11.4754 19.3976 12.0934C17.7518 12.7316 16.3585 13.5878 14.9663 14.977C13.5741 16.3662 12.7195 17.7608 12.081 19.4056C11.4626 20.9948 11.0403 22.8124 10.9191 25.4738C10.7958 28.1394 10.7676 28.9916 10.7676 35.7808C10.7676 42.57 10.7958 43.4222 10.9191 46.0878C11.0403 48.7494 11.4626 50.5668 12.081 52.156C12.7195 53.7998 13.5743 55.196 14.9663 56.5846C16.3583 57.9732 17.7518 58.8282 19.3976 59.4682C20.9897 60.0862 22.8064 60.5082 25.4694 60.6294C28.138 60.7506 28.9893 60.7808 35.7826 60.7808C42.5759 60.7808 43.4286 60.7526 46.0958 60.6294C48.759 60.5082 50.5774 60.0862 52.1676 59.4682C53.8124 58.8282 55.2066 57.9738 56.5989 56.5846C57.9911 55.1954 58.8438 53.7998 59.4842 52.156C60.1026 50.5668 60.5268 48.7492 60.6461 46.0878C60.7674 43.4202 60.7956 42.57 60.7956 35.7808C60.7956 28.9916 60.7674 28.1394 60.6461 25.4738C60.5248 22.8122 60.1026 20.9938 59.4842 19.4056C58.8438 17.7618 57.9889 16.3684 56.5989 14.977C55.2088 13.5856 53.8124 12.7316 52.1696 12.0934C50.5775 11.4754 48.7588 11.0514 46.0978 10.9322C43.4306 10.811 42.5779 10.7808 35.7846 10.7808C28.9913 10.7808 28.138 10.809 25.4694 10.9322Z" fill="url(#paint0_radial_7092_54471)"/>
        <path d="M27.4456 35.7808C27.4456 31.1786 31.1776 27.4468 35.7826 27.4468C40.3875 27.4468 44.1216 31.1786 44.1216 35.7808C44.1216 40.383 40.3875 44.1148 35.7826 44.1148C31.1776 44.1148 27.4456 40.383 27.4456 35.7808ZM22.9377 35.7808C22.9377 42.8708 28.6883 48.618 35.7826 48.618C42.8768 48.618 48.6275 42.8708 48.6275 35.7808C48.6275 28.6908 42.8768 22.9436 35.7826 22.9436C28.6883 22.9436 22.9377 28.6908 22.9377 35.7808ZM46.1342 22.4346C46.1339 23.0279 46.3098 23.608 46.6394 24.1015C46.9691 24.595 47.4377 24.9797 47.9861 25.2069C48.5346 25.4342 49.1381 25.4939 49.7204 25.3784C50.3028 25.2628 50.8378 24.9773 51.2577 24.5579C51.6777 24.1385 51.9638 23.6041 52.0799 23.0222C52.1959 22.4403 52.1367 21.8371 51.9097 21.2888C51.6828 20.7406 51.2982 20.2719 50.8047 19.942C50.3112 19.6122 49.7309 19.436 49.1372 19.4358H49.136C48.3402 19.4361 47.5771 19.7522 47.0142 20.3144C46.4514 20.8767 46.1349 21.6392 46.1342 22.4346ZM25.6765 56.1302C23.2377 56.0192 21.9121 55.6132 21.0311 55.2702C19.8632 54.8158 19.0299 54.2746 18.1538 53.4002C17.2777 52.5258 16.7354 51.6938 16.2827 50.5266C15.9393 49.6466 15.533 48.3214 15.4222 45.884C15.3009 43.2488 15.2767 42.4572 15.2767 35.781C15.2767 29.1048 15.3029 28.3154 15.4222 25.678C15.5332 23.2406 15.9425 21.918 16.2827 21.0354C16.7374 19.8682 17.2789 19.0354 18.1538 18.1598C19.0287 17.2842 19.8612 16.7422 21.0311 16.2898C21.9117 15.9466 23.2377 15.5406 25.6765 15.4298C28.3133 15.3086 29.1054 15.2844 35.7826 15.2844C42.4598 15.2844 43.2527 15.3106 45.8916 15.4298C48.3305 15.5408 49.6539 15.9498 50.537 16.2898C51.7049 16.7422 52.5382 17.2854 53.4144 18.1598C54.2905 19.0342 54.8308 19.8682 55.2855 21.0354C55.6289 21.9154 56.0351 23.2406 56.146 25.678C56.2673 28.3154 56.2915 29.1048 56.2915 35.781C56.2915 42.4572 56.2673 43.2466 56.146 45.884C56.0349 48.3214 55.6267 49.6462 55.2855 50.5266C54.8308 51.6938 54.2893 52.5266 53.4144 53.4002C52.5394 54.2738 51.7049 54.8158 50.537 55.2702C49.6565 55.6134 48.3305 56.0194 45.8916 56.1302C43.2549 56.2514 42.4628 56.2756 35.7826 56.2756C29.1024 56.2756 28.3125 56.2514 25.6765 56.1302ZM25.4694 10.9322C22.8064 11.0534 20.9867 11.4754 19.3976 12.0934C17.7518 12.7316 16.3585 13.5878 14.9663 14.977C13.5741 16.3662 12.7195 17.7608 12.081 19.4056C11.4626 20.9948 11.0403 22.8124 10.9191 25.4738C10.7958 28.1394 10.7676 28.9916 10.7676 35.7808C10.7676 42.57 10.7958 43.4222 10.9191 46.0878C11.0403 48.7494 11.4626 50.5668 12.081 52.156C12.7195 53.7998 13.5743 55.196 14.9663 56.5846C16.3583 57.9732 17.7518 58.8282 19.3976 59.4682C20.9897 60.0862 22.8064 60.5082 25.4694 60.6294C28.138 60.7506 28.9893 60.7808 35.7826 60.7808C42.5759 60.7808 43.4286 60.7526 46.0958 60.6294C48.759 60.5082 50.5774 60.0862 52.1676 59.4682C53.8124 58.8282 55.2066 57.9738 56.5989 56.5846C57.9911 55.1954 58.8438 53.7998 59.4842 52.156C60.1026 50.5668 60.5268 48.7492 60.6461 46.0878C60.7674 43.4202 60.7956 42.57 60.7956 35.7808C60.7956 28.9916 60.7674 28.1394 60.6461 25.4738C60.5248 22.8122 60.1026 20.9938 59.4842 19.4056C58.8438 17.7618 57.9889 16.3684 56.5989 14.977C55.2088 13.5856 53.8124 12.7316 52.1696 12.0934C50.5775 11.4754 48.7588 11.0514 46.0978 10.9322C43.4306 10.811 42.5779 10.7808 35.7846 10.7808C28.9913 10.7808 28.138 10.809 25.4694 10.9322Z" fill="url(#paint1_radial_7092_54471)"/>
        <defs>
        <radialGradient id="paint0_radial_7092_54471" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(17.4144 61.017) scale(65.31 65.2708)">
        <stop offset="0.09" stop-color="#FA8F21"/>
        <stop offset="0.78" stop-color="#D82D7E"/>
        </radialGradient>
        <radialGradient id="paint1_radial_7092_54471" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(41.1086 63.257) scale(51.4733 51.4424)">
        <stop offset="0.64" stop-color="#8C3AAA" stop-opacity="0"/>
        <stop offset="1" stop-color="#8C3AAA"/>
        </radialGradient>
        </defs>
        </svg>
        
      </button>
      
      <button class="w-10 h-10 flex items-center justify-center rounded-lg bg-white shadow-md shadow-gray-200 group transition-all duration-300">
      <svg class="transition-all duration-300 group-hover:scale-110" xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 72 72" fill="none">
        <path d="M40.7568 32.1716L59.3704 11H54.9596L38.7974 29.383L25.8887 11H11L30.5205 38.7983L11 61H15.4111L32.4788 41.5869L46.1113 61H61L40.7557 32.1716H40.7568ZM34.7152 39.0433L32.7374 36.2752L17.0005 14.2492H23.7756L36.4755 32.0249L38.4533 34.7929L54.9617 57.8986H48.1865L34.7152 39.0443V39.0433Z" fill="black"/>
      </svg>
      </button>
      
      <button class="w-10 h-10 flex items-center justify-center rounded-lg bg-white shadow-md shadow-gray-200 group transition-all duration-300">
      <svg class="transition-all duration-300 group-hover:scale-110" width="28" height="28" viewBox="0 0 72 72" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path fill-rule="evenodd" clip-rule="evenodd" d="M45.6721 29.4285C48.7387 31.6085 52.4112 32.7733 56.1737 32.7592V25.3024C55.434 25.3045 54.6963 25.2253 53.9739 25.0663V31.0068C50.203 31.0135 46.5252 29.8354 43.4599 27.6389V42.9749C43.4507 45.4914 42.7606 47.9585 41.4628 50.1146C40.165 52.2706 38.3079 54.0353 36.0885 55.2215C33.8691 56.4076 31.37 56.9711 28.8563 56.852C26.3426 56.733 23.9079 55.9359 21.8105 54.5453C23.7506 56.5082 26.2295 57.8513 28.9333 58.4044C31.6372 58.9576 34.4444 58.6959 36.9994 57.6526C39.5545 56.6093 41.7425 54.8312 43.2864 52.5436C44.8302 50.256 45.6605 47.5616 45.6721 44.8018V29.4285ZM48.3938 21.8226C46.8343 20.1323 45.8775 17.9739 45.6721 15.6832V14.7139H43.5842C43.8423 16.1699 44.4039 17.5553 45.2326 18.78C46.0612 20.0048 47.1383 21.0414 48.3938 21.8226ZM26.645 48.642C25.9213 47.6957 25.4779 46.5653 25.365 45.3793C25.2522 44.1934 25.4746 42.9996 26.0068 41.9338C26.5391 40.8681 27.3598 39.9731 28.3757 39.3508C29.3915 38.7285 30.5616 38.4039 31.7529 38.4139C32.4106 38.4137 33.0644 38.5143 33.6916 38.7121V31.0068C32.9584 30.9097 32.2189 30.8682 31.4794 30.8826V36.8728C29.9522 36.39 28.2992 36.4998 26.8492 37.1803C25.3992 37.8608 24.2585 39.0621 23.6539 40.5454C23.0494 42.0286 23.0252 43.6851 23.5864 45.1853C24.1475 46.6855 25.2527 47.9196 26.6823 48.642H26.645Z" fill="#EE1D52"/>
      <path fill-rule="evenodd" clip-rule="evenodd" d="M43.4589 27.5892C46.5241 29.7857 50.2019 30.9638 53.9729 30.9571V25.0166C51.8243 24.5623 49.8726 23.4452 48.3927 21.8226C47.1372 21.0414 46.0601 20.0048 45.2315 18.78C44.4029 17.5553 43.8412 16.1699 43.5831 14.7139H38.09V44.8018C38.0849 46.1336 37.6629 47.4304 36.8831 48.51C36.1034 49.5897 35.0051 50.3981 33.7425 50.8217C32.4798 51.2453 31.1162 51.2629 29.8431 50.872C28.57 50.4811 27.4512 49.7012 26.6439 48.642C25.3645 47.9965 24.3399 46.9387 23.7354 45.6394C23.1309 44.3401 22.9818 42.875 23.3121 41.4805C23.6424 40.0861 24.4329 38.8435 25.556 37.9535C26.6791 37.0634 28.0693 36.5776 29.5023 36.5745C30.1599 36.5766 30.8134 36.6772 31.4411 36.8728V30.8826C28.7288 30.9477 26.0946 31.8033 23.8617 33.3444C21.6289 34.8855 19.8946 37.0451 18.8717 39.5579C17.8489 42.0708 17.5821 44.8276 18.1039 47.49C18.6258 50.1524 19.9137 52.6045 21.8095 54.5453C23.9073 55.9459 26.3458 56.7512 28.8651 56.8755C31.3845 56.9997 33.8904 56.4383 36.1158 55.2509C38.3413 54.0636 40.2031 52.2948 41.5027 50.133C42.8024 47.9712 43.4913 45.4973 43.4962 42.9749L43.4589 27.5892Z" fill="black"/>
      <path fill-rule="evenodd" clip-rule="evenodd" d="M53.9736 25.0161V23.4129C52.0005 23.4213 50.0655 22.8696 48.3934 21.8221C49.8695 23.4493 51.8229 24.5674 53.9736 25.0161ZM43.5838 14.7134C43.5838 14.4275 43.4968 14.1292 43.4596 13.8434V12.874H35.8785V42.9744C35.872 44.6598 35.197 46.2738 34.0017 47.4621C32.8064 48.6504 31.1885 49.3159 29.503 49.3126C28.5106 49.3176 27.5311 49.0876 26.6446 48.6415C27.4519 49.7007 28.5707 50.4805 29.8438 50.8715C31.1169 51.2624 32.4805 51.2448 33.7432 50.8212C35.0058 50.3976 36.1041 49.5892 36.8838 48.5095C37.6636 47.4298 38.0856 46.1331 38.0907 44.8013V14.7134H43.5838ZM31.4418 30.8696V29.167C28.3222 28.7432 25.1511 29.3885 22.4453 30.9977C19.7394 32.6069 17.6584 35.0851 16.5413 38.0284C15.4242 40.9718 15.337 44.2067 16.2938 47.206C17.2506 50.2053 19.195 52.792 21.8102 54.5448C19.9287 52.5995 18.6545 50.1484 18.1433 47.4908C17.6321 44.8333 17.906 42.0844 18.9315 39.5799C19.957 37.0755 21.6897 34.924 23.918 33.3882C26.1463 31.8524 28.7736 30.9988 31.4791 30.9318L31.4418 30.8696Z" fill="#69C9D0"/>
      </svg>
      
      </button>
      
      <button class="w-10 h-10 flex items-center justify-center rounded-lg bg-white shadow-md shadow-gray-200 group transition-all duration-300">
      <svg class="transition-all duration-300 group-hover:scale-110" xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 71 72" fill="none">
      <path d="M12.5762 56.8405L15.8608 44.6381C13.2118 39.8847 12.3702 34.3378 13.4904 29.0154C14.6106 23.693 17.6176 18.952 21.9594 15.6624C26.3012 12.3729 31.6867 10.7554 37.1276 11.1068C42.5685 11.4582 47.6999 13.755 51.5802 17.5756C55.4604 21.3962 57.8292 26.4844 58.2519 31.9065C58.6746 37.3286 57.1228 42.7208 53.8813 47.0938C50.6399 51.4668 45.9261 54.5271 40.605 55.7133C35.284 56.8994 29.7125 56.1318 24.9131 53.5513L12.5762 56.8405ZM25.508 48.985L26.2709 49.4365C29.7473 51.4918 33.8076 52.3423 37.8191 51.8555C41.8306 51.3687 45.5681 49.5719 48.4489 46.7452C51.3298 43.9185 53.1923 40.2206 53.7463 36.2279C54.3002 32.2351 53.5143 28.1717 51.5113 24.6709C49.5082 21.1701 46.4003 18.4285 42.6721 16.8734C38.9438 15.3184 34.8045 15.0372 30.8993 16.0736C26.994 17.11 23.5422 19.4059 21.0817 22.6035C18.6212 25.801 17.2903 29.7206 17.2963 33.7514C17.293 37.0937 18.2197 40.3712 19.9732 43.2192L20.4516 44.0061L18.6153 50.8167L25.508 48.985Z" fill="#00D95F"/>
      <path fill-rule="evenodd" clip-rule="evenodd" d="M44.0259 36.8847C43.5787 36.5249 43.0549 36.2716 42.4947 36.1442C41.9344 36.0168 41.3524 36.0186 40.793 36.1495C39.9524 36.4977 39.4093 37.8134 38.8661 38.4713C38.7516 38.629 38.5833 38.7396 38.3928 38.7823C38.2024 38.8251 38.0028 38.797 37.8316 38.7034C34.7543 37.5012 32.1748 35.2965 30.5122 32.4475C30.3704 32.2697 30.3033 32.044 30.325 31.8178C30.3467 31.5916 30.4555 31.3827 30.6286 31.235C31.2344 30.6368 31.6791 29.8959 31.9218 29.0809C31.9756 28.1818 31.7691 27.2863 31.3269 26.5011C30.985 25.4002 30.3344 24.42 29.4518 23.6762C28.9966 23.472 28.4919 23.4036 27.9985 23.4791C27.5052 23.5546 27.0443 23.7709 26.6715 24.1019C26.0242 24.6589 25.5104 25.3537 25.168 26.135C24.8256 26.9163 24.6632 27.7643 24.6929 28.6165C24.6949 29.0951 24.7557 29.5716 24.8739 30.0354C25.1742 31.1497 25.636 32.2144 26.2447 33.1956C26.6839 33.9473 27.163 34.6749 27.6801 35.3755C29.3607 37.6767 31.4732 39.6305 33.9003 41.1284C35.1183 41.8897 36.42 42.5086 37.7799 42.973C39.1924 43.6117 40.752 43.8568 42.2931 43.6824C43.1711 43.5499 44.003 43.2041 44.7156 42.6755C45.4281 42.1469 45.9995 41.4518 46.3795 40.6512C46.6028 40.1675 46.6705 39.6269 46.5735 39.1033C46.3407 38.0327 44.9053 37.4007 44.0259 36.8847Z" fill="#00D95F"/>
      </svg>
      </button>
      
      <button class="w-10 h-10 flex items-center justify-center rounded-lg bg-white shadow-md shadow-gray-200 group transition-all duration-300">
      <svg class="transition-all duration-300 group-hover:scale-110" xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 71 72" fill="none">
      <path d="M33.3501 13.0437C25.9186 13.893 18.5132 20.0479 18.2075 28.84C18.0154 34.2083 19.5044 38.2356 24.4951 39.3664C26.6608 35.4553 23.7965 34.5927 23.3511 31.7633C21.5216 20.1686 36.4153 12.2615 44.2093 20.3563C49.6018 25.9615 46.0519 43.206 37.3541 41.4136C29.0231 39.7017 41.4323 25.9749 34.7823 23.2796C29.3767 21.0894 26.5037 29.9798 29.0667 34.396C27.5647 41.9902 24.3292 49.1464 25.6391 58.6715C29.8876 55.5158 31.3198 49.4727 32.4943 43.1702C34.6295 44.4978 35.7691 45.8789 38.4937 46.0935C48.5407 46.8891 54.1515 35.8263 52.7805 25.6218C51.5623 16.5749 42.7422 11.971 33.3501 13.0437Z" fill="#FF0000"/>
      </svg>
      </button>
      
      <button class="w-10 h-10 flex items-center justify-center rounded-lg bg-white shadow-md shadow-gray-200 group transition-all duration-300">
      <svg class="rounded-md transition-all duration-300 group-hover:scale-110" xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 72 72" fill="none">
      <path fill-rule="evenodd" clip-rule="evenodd" d="M14.6975 11C12.6561 11 11 12.6057 11 14.5838V57.4474C11 59.4257 12.6563 61.03 14.6975 61.03H57.3325C59.3747 61.03 61.03 59.4255 61.03 57.4468V14.5838C61.03 12.6057 59.3747 11 57.3325 11H14.6975ZM26.2032 30.345V52.8686H18.7167V30.345H26.2032ZM26.6967 23.3793C26.6967 25.5407 25.0717 27.2703 22.4615 27.2703L22.4609 27.2701H22.4124C19.8998 27.2701 18.2754 25.5405 18.2754 23.3791C18.2754 21.1686 19.9489 19.4873 22.5111 19.4873C25.0717 19.4873 26.6478 21.1686 26.6967 23.3793ZM37.833 52.8686H30.3471L30.3469 52.8694C30.3469 52.8694 30.4452 32.4588 30.3475 30.3458H37.8336V33.5339C38.8288 31.9995 40.6098 29.8169 44.5808 29.8169C49.5062 29.8169 53.1991 33.0363 53.1991 39.9543V52.8686H45.7133V40.8204C45.7133 37.7922 44.6293 35.7269 41.921 35.7269C39.8524 35.7269 38.6206 37.1198 38.0796 38.4653C37.8819 38.9455 37.833 39.6195 37.833 40.2918V52.8686Z" fill="#006699"/>
      </svg>
      </button>
      
      <button class="w-10 h-10 flex items-center justify-center rounded-lg bg-white shadow-md shadow-gray-200 group transition-all duration-300">
      <svg class="rounded-md transition-all duration-300 group-hover:scale-110" xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 72 72" fill="none">
      <path d="M35.9042 13C23.0034 13 13 22.4537 13 35.2171C13 41.8936 15.737 47.6655 20.1919 51.6508C20.5641 51.9829 20.7931 52.4525 20.8046 52.9563L20.9306 57.0333C20.9397 57.3333 21.0225 57.6264 21.1714 57.8869C21.3204 58.1474 21.5311 58.3674 21.785 58.5274C22.0389 58.6874 22.3282 58.7826 22.6275 58.8047C22.9268 58.8267 23.227 58.7749 23.5016 58.6538L28.048 56.6496C28.4317 56.4779 28.8669 56.4492 29.2734 56.558C31.3634 57.1306 33.5851 57.4398 35.9042 57.4398C48.805 57.4398 58.8084 47.9861 58.8084 35.2228C58.8084 22.4594 48.805 13 35.9042 13Z" fill="url(#paint0_radial_7092_54580)"/>
      <path d="M22.1502 41.7161L28.8783 31.0428C29.1314 30.6409 29.4651 30.2959 29.8583 30.0295C30.2514 29.7631 30.6955 29.5812 31.1626 29.4951C31.6296 29.409 32.1094 29.4206 32.5717 29.5293C33.034 29.638 33.4688 29.8414 33.8485 30.1266L39.2024 34.1406C39.4414 34.3195 39.7322 34.4157 40.0308 34.4147C40.3293 34.4137 40.6194 34.3154 40.8572 34.1348L48.0835 28.6493C49.0455 27.9163 50.3052 29.073 49.6639 30.098L42.93 40.7656C42.6769 41.1674 42.3433 41.5124 41.9501 41.7788C41.5569 42.0452 41.1128 42.2272 40.6458 42.3133C40.1787 42.3994 39.6989 42.3877 39.2366 42.279C38.7743 42.1703 38.3396 41.967 37.9598 41.6818L32.606 37.6678C32.367 37.4889 32.0762 37.3926 31.7776 37.3937C31.479 37.3947 31.1889 37.4929 30.9512 37.6735L23.7249 43.1591C22.7629 43.892 21.5032 42.7411 22.1502 41.7161Z" fill="white"/>
      <defs>
        <radialGradient id="paint0_radial_7092_54580" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(20.6729 58.8084) scale(50.3892 50.3892)">
          <stop stop-color="#0099FF"/>
          <stop offset="0.6" stop-color="#A033FF"/>
          <stop offset="0.9" stop-color="#FF5280"/>
          <stop offset="1" stop-color="#FF7061"/>
        </radialGradient>
      </defs>
      </svg>
      </button>
      
      <button class="w-10 h-10 flex items-center justify-center rounded-lg bg-white shadow-md shadow-gray-200 group transition-all duration-300">
      <svg class="rounded-md transition-all duration-300 group-hover:scale-110"  xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 72 72" fill="none">
      <path fill-rule="evenodd" clip-rule="evenodd" d="M61.03 36.015C61.03 49.8304 49.8304 61.03 36.015 61.03C22.1996 61.03 11 49.8304 11 36.015C11 22.1996 22.1996 11 36.015 11C49.8304 11 61.03 22.1996 61.03 36.015ZM38.4121 28.3392C34.1147 30.1955 21.7235 35.4671 21.7235 35.4671C18.7869 36.6551 20.5058 37.7688 20.5058 37.7688C20.5058 37.7688 23.0127 38.6599 25.1615 39.328C27.3103 39.9963 28.4563 39.2538 28.4563 39.2538C28.4563 39.2538 33.47 35.8384 38.5554 32.2002C42.1366 29.6757 41.2772 31.7547 40.4176 32.6457C38.5554 34.5762 35.4755 37.6204 32.897 40.0706C31.751 41.1101 32.324 42.001 32.8254 42.4465C34.2836 43.7256 37.718 46.0518 39.2773 47.1079C39.7093 47.4005 39.9974 47.5956 40.0596 47.6439C40.4176 47.941 42.4232 49.2774 43.6408 48.9804C44.8584 48.6834 45.0017 46.9757 45.0017 46.9757C45.0017 46.9757 45.9328 40.8873 46.7923 35.3186C46.9515 34.2252 47.1107 33.1548 47.2592 32.1567C47.645 29.5623 47.9582 27.4565 48.0099 26.7058C48.2248 24.1814 45.6463 25.2208 45.6463 25.2208C45.6463 25.2208 40.0596 27.5968 38.4121 28.3392Z" fill="#34AADF"/>
      </svg>
      </button>
      
      <button class="w-10 h-10 flex items-center justify-center rounded-lg bg-white shadow-md shadow-gray-200 group transition-all duration-300">
      <svg class="rounded-md transition-all duration-300 group-hover:scale-110" xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 72 72" fill="none">
      <path d="M45.8956 26.0879C46.8845 26.0879 47.8503 26.1701 48.8032 26.2876C47.0805 18.7224 39.1346 13 29.5799 13C18.7651 13 10 20.3257 10 29.3599C10 34.5686 12.9306 39.1897 17.4761 42.1798L14.8948 47.3562L21.9268 44.336C23.4347 44.873 25.0016 45.3152 26.6753 45.521C26.4465 44.5226 26.3166 43.4991 26.3166 42.4487C26.3166 33.4273 35.0976 26.0879 45.8956 26.0879ZM36.1064 20.3615C37.4577 20.3615 38.5536 21.4608 38.5536 22.8158C38.5536 24.1713 37.4578 25.2698 36.1064 25.2698C34.7543 25.2698 33.6589 24.1713 33.6589 22.8158C33.6589 21.4607 34.7543 20.3615 36.1064 20.3615ZM23.0531 25.2698C21.7016 25.2698 20.6057 24.1713 20.6057 22.8158C20.6057 21.4608 21.7017 20.3615 23.0531 20.3615C24.4045 20.3615 25.5006 21.4608 25.5006 22.8158C25.5005 24.1713 24.4044 25.2698 23.0531 25.2698Z" fill="#51C332"/>
      <path d="M62.2121 42.4484C62.2121 35.22 54.9051 29.3599 45.8956 29.3599C36.8858 29.3599 29.5799 35.22 29.5799 42.4484C29.5799 49.6763 36.8858 55.5365 45.8956 55.5365C47.3773 55.5365 48.7867 55.3271 50.1542 55.0297L58.9489 58.8084L55.9072 52.713C59.7191 50.3174 62.2121 46.6335 62.2121 42.4484ZM41.001 41.6303C39.6496 41.6303 38.5534 40.5314 38.5534 39.1757C38.5534 37.8207 39.6495 36.7222 41.001 36.7222C42.3528 36.7222 43.4482 37.8212 43.4482 39.1757C43.4482 40.5316 42.3526 41.6303 41.001 41.6303ZM50.7905 41.6303C49.4385 41.6303 48.3433 40.5314 48.3433 39.1757C48.3433 37.8207 49.4384 36.7222 50.7905 36.7222C52.1425 36.7222 53.238 37.8212 53.238 39.1757C53.238 40.5316 52.1425 41.6303 50.7905 41.6303Z" fill="#51C332"/>
      </svg>
      </button>
      
      <button class="w-10 h-10 flex items-center justify-center rounded-lg bg-white shadow-md shadow-gray-200 group transition-all duration-300">
      <svg class="rounded-md transition-all duration-300 group-hover:scale-110" xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 72 72" fill="none">
      <path d="M25.4663 54.2563C25.4663 53.4894 25.4663 52.7226 25.4663 51.9558C25.4717 51.9244 25.4706 51.8923 25.463 51.8614C25.4554 51.8305 25.4415 51.8015 25.4221 51.7761C25.4027 51.7507 25.3783 51.7296 25.3503 51.7139C25.3223 51.6983 25.2914 51.6885 25.2595 51.6852C23.3396 51.1452 21.5676 50.1833 20.0755 48.8711C18.9883 47.8921 18.0831 46.7318 17.4011 45.443C16.4398 43.5813 15.8001 41.5734 15.5084 39.5027C15.147 36.9051 15.0214 34.2807 15.1333 31.6609C15.1579 30.4395 15.2209 29.232 15.3611 28.0107C15.5847 25.6897 16.1762 23.4181 17.1137 21.2792C18.2713 18.6495 20.3715 16.5371 23.0092 15.3493C24.806 14.5354 26.6963 13.9411 28.6384 13.5797C30.5428 13.2226 32.471 13.0035 34.4077 12.924C36.1534 12.8628 37.9011 12.8883 39.6443 13.0003C42.1391 13.1045 44.6114 13.5136 47.0049 14.2182C48.7795 14.7246 50.4677 15.4906 52.0137 16.4909C53.5199 17.5145 54.7382 18.9009 55.5538 20.5194C56.5126 22.4097 57.1644 24.4378 57.4851 26.5291C57.6934 27.7706 57.8304 29.023 57.8952 30.2799C57.9863 31.8379 57.9758 33.4027 57.9162 34.9537C57.8566 36.5047 57.7234 38.0106 57.5307 39.5304C57.287 41.8115 56.5787 44.0199 55.4486 46.0224C53.9777 48.5556 51.6214 50.4686 48.8241 51.4006C46.9113 52.0637 44.9363 52.5357 42.9285 52.8094C41.4599 53.0106 39.9878 53.1563 38.5086 53.2153C37.3765 53.2674 36.2444 53.2535 35.1122 53.2362C34.4708 53.2362 33.8329 53.1737 33.1949 53.1182C33.1323 53.1065 33.0676 53.1134 33.009 53.1381C32.9503 53.1628 32.9004 53.2042 32.8655 53.257C31.5756 54.7906 30.2367 56.2826 28.8872 57.7677C28.6414 58.0387 28.3568 58.2725 28.0425 58.4617C27.8362 58.5957 27.6009 58.6798 27.3557 58.7072C27.1105 58.7346 26.8622 58.7045 26.6309 58.6194C26.3996 58.5343 26.1918 58.3965 26.0242 58.2172C25.8566 58.0379 25.7339 57.8222 25.6661 57.5873C25.5325 57.1699 25.4662 56.7343 25.4698 56.2965C25.4663 55.6095 25.4663 54.9329 25.4663 54.2563ZM27.026 57.1674L27.1908 57.0148L30.1175 53.7983C31.2438 52.5607 32.3689 51.322 33.4929 50.0821C33.5481 50.0065 33.6227 49.9467 33.7089 49.9089C33.7951 49.8711 33.8899 49.8566 33.9836 49.867C34.3656 49.9051 34.7477 49.919 35.1332 49.9225C36.4652 49.9225 37.7971 49.9225 39.129 49.8288C40.3383 49.7351 41.544 49.5894 42.7428 49.402C44.0334 49.1796 45.3111 48.8889 46.5703 48.5311C49.3744 47.7851 51.544 46.189 52.9075 43.604C53.7124 42.0147 54.2173 40.2931 54.3971 38.5242C54.6102 36.8569 54.7377 35.18 54.7792 33.4999C54.8413 31.3894 54.6957 29.2779 54.3445 27.1953C54.101 25.6864 53.6628 24.2147 53.0407 22.8164C52.2485 21.0815 51.1269 19.645 49.3989 18.722C46.7491 17.3063 43.8819 16.6748 40.9271 16.3521C40.0894 16.2619 39.2517 16.2133 38.4105 16.1821C36.688 16.0942 34.9619 16.1035 33.2405 16.2099C32.0025 16.3008 30.7712 16.4653 29.5532 16.7026C27.7619 17.0258 26.0291 17.6105 24.4112 18.4375C23.4733 18.9066 22.6224 19.5296 21.8946 20.2799C20.715 21.5851 19.8498 23.138 19.3639 24.8219C18.7876 26.7831 18.473 28.8105 18.4281 30.8524C18.3153 32.8944 18.3411 34.9416 18.5052 36.9801C18.6073 38.1933 18.8125 39.3958 19.1186 40.5748C19.574 42.4122 20.4575 44.1186 21.6983 45.5575C23.038 47.0254 24.7694 48.0887 26.693 48.6248C26.9349 48.6976 27.0435 48.7809 27.0435 49.0516C27.0225 50.0509 27.0435 51.0502 27.0435 52.0495L27.026 57.1674Z" fill="#754A91"/>
      <path d="M24.5732 26.1755C24.5487 25.4156 24.9658 24.8639 25.4705 24.3677C26.1362 23.7365 26.8696 23.1792 27.6577 22.7057C28.017 22.4863 28.4443 22.4027 28.861 22.4703C29.2776 22.5379 29.6556 22.7521 29.9254 23.0735C30.8789 24.0657 31.7324 25.1476 32.4736 26.3039C32.8407 26.824 33.1179 27.4009 33.2938 28.011C33.3641 28.2491 33.3687 28.5015 33.3071 28.742C33.2454 28.9824 33.1198 29.2021 32.9433 29.3781C32.539 29.7711 32.108 30.1363 31.6534 30.4711C31.4244 30.6518 31.2541 30.8952 31.1637 31.171C31.0734 31.4468 31.0669 31.7428 31.1452 32.0221C31.4259 33.334 32.062 34.5455 32.9854 35.5266C34.1073 36.8825 35.5529 37.9403 37.1915 38.6044C37.5941 38.8093 38.0554 38.8717 38.4988 38.7813C38.7417 38.7157 38.9575 38.5761 39.1157 38.3823C39.3611 38.0735 39.6275 37.7751 39.8483 37.4454C40.1347 37.0343 40.572 36.7501 41.067 36.6535C41.562 36.5569 42.0756 36.6556 42.4981 36.9284C43.6863 37.6109 44.808 38.4007 45.849 39.2879C46.0943 39.4961 46.3502 39.6973 46.5956 39.909C46.8859 40.1282 47.0955 40.4356 47.1924 40.7841C47.2893 41.1325 47.268 41.5029 47.1318 41.8382C46.9153 42.4022 46.5996 42.9237 46.1995 43.3788C45.7022 44.063 45.0688 44.6392 44.3383 45.0721C43.9891 45.2751 43.5967 45.3943 43.1925 45.4202C42.7884 45.4461 42.3837 45.378 42.0109 45.2213C39.1751 44.091 36.5253 42.5485 34.1491 40.6446C31.8248 38.7505 29.7937 36.5294 28.1203 34.052C26.7123 32.0011 25.5921 29.7705 24.7905 27.4212C24.7052 27.137 24.635 26.8486 24.5802 26.5572C24.5646 26.4305 24.5623 26.3026 24.5732 26.1755Z" fill="#754A91"/>
      <path d="M36.6744 22.4835C39.0471 22.527 41.3291 23.3933 43.1226 24.9317C44.9161 26.47 46.1073 28.5826 46.4886 30.9013C46.6421 31.7443 46.7242 32.5985 46.734 33.4551C46.734 33.6563 46.6814 33.802 46.4641 33.8229C46.2468 33.8437 46.1907 33.6598 46.1907 33.4759C46.2233 31.7433 45.864 30.0255 45.1392 28.4481C44.5288 27.152 43.6246 26.0128 42.4969 25.1191C41.3692 24.2255 40.0484 23.6014 38.6373 23.2955C37.8912 23.1245 37.1283 23.036 36.3625 23.0318C36.2879 23.033 36.2135 23.0237 36.1417 23.004C36.0805 22.9869 36.0284 22.947 35.9963 22.8926C35.9643 22.8382 35.9548 22.7737 35.9699 22.7125C35.9704 22.6835 35.9766 22.6549 35.9884 22.6283C36.0001 22.6017 36.0171 22.5777 36.0383 22.5577C36.0595 22.5377 36.0845 22.5221 36.1119 22.5117C36.1393 22.5013 36.1685 22.4965 36.1977 22.4974C36.3555 22.4766 36.5167 22.4835 36.6744 22.4835Z" fill="#754A91"/>
      <path d="M43.4406 31.8935C43.4288 30.9296 43.189 29.9818 42.7404 29.1261C42.2918 28.2705 41.6469 27.5308 40.8574 26.9664C39.9359 26.3257 38.8647 25.928 37.7449 25.811C37.5556 25.7867 37.3663 25.7763 37.1735 25.7555C36.9807 25.7346 36.8651 25.6548 36.8826 25.4605C36.9001 25.2662 37.0228 25.1968 37.2331 25.2107C40.3386 25.3981 42.9814 27.1364 43.7946 30.3738C43.9433 30.998 44.0175 31.6373 44.0154 32.2787C44.0154 32.3377 44.0154 32.3967 44.0154 32.4522C44.0154 32.6257 43.9033 32.7402 43.7315 32.7367C43.6934 32.7354 43.656 32.7265 43.6215 32.7104C43.587 32.6944 43.5562 32.6715 43.531 32.6432C43.5057 32.615 43.4865 32.5819 43.4746 32.5461C43.4627 32.5103 43.4583 32.4724 43.4616 32.4348C43.4336 32.2717 43.4406 32.1052 43.4406 31.8935Z" fill="#754A91"/>
      <path d="M37.9996 28.028C39.7031 28.1425 40.8913 28.9683 41.2173 30.7622C41.2568 30.992 41.2849 31.2236 41.3014 31.4562C41.3014 31.6436 41.2593 31.8032 41.0525 31.8032C40.8457 31.8032 40.7756 31.6644 40.7686 31.4562C40.7667 30.7686 40.5527 30.0979 40.1552 29.5339C39.7376 29.0231 39.1379 28.6903 38.4798 28.604C38.3327 28.5768 38.184 28.5582 38.0347 28.5485C37.7893 28.5485 37.6526 28.4271 37.6842 28.2397C37.7157 28.0523 37.8629 28.0176 37.9996 28.028Z" fill="#754A91"/>
      </svg>
      </button>
      
      <button class="w-10 h-10 flex items-center justify-center rounded-lg bg-white shadow-md shadow-gray-200 group transition-all duration-300">
      <svg class="rounded-md transition-all duration-300 group-hover:scale-110" width="28" height="28" viewBox="0 0 72 72" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path d="M40.3522 25.55C40.3522 29.4089 38.8124 33.1097 36.0717 35.8384C33.3309 38.5671 29.6136 40.1 25.7376 40.1C21.8616 40.1 18.1443 38.5671 15.4036 35.8384C12.6628 33.1097 11.123 29.4089 11.123 25.55C11.123 21.6911 12.6628 17.9902 15.4036 15.2616C18.1443 12.5329 21.8616 11 25.7376 11C29.6136 11 33.3309 12.5329 36.0717 15.2616C38.8124 17.9902 40.3522 21.6911 40.3522 25.55Z" fill="url(#paint0_linear_7092_54518)"/>
      <path d="M60.7196 46.445C60.7196 48.3564 60.3415 50.2491 59.6068 52.015C58.8721 53.7809 57.7952 55.3854 56.4376 56.737C55.0801 58.0885 53.4684 59.1606 51.6947 59.8921C49.921 60.6235 48.0199 61 46.1 61C42.2227 61 38.5041 59.4665 35.7624 56.737C33.0207 54.0074 31.4805 50.3052 31.4805 46.445C31.4805 42.5848 33.0207 38.8827 35.7624 36.1531C38.5041 33.4235 42.2227 31.89 46.1 31.89C48.0199 31.89 49.921 32.2665 51.6947 32.9979C53.4684 33.7294 55.0801 34.8015 56.4376 36.1531C57.7952 37.5046 58.8721 39.1092 59.6068 40.8751C60.3415 42.641 60.7196 44.5336 60.7196 46.445Z" fill="url(#paint1_linear_7092_54518)"/>
      <path opacity="0.05" fill-rule="evenodd" clip-rule="evenodd" d="M11.1768 26.795C11.4038 29.5441 12.406 32.1727 14.0672 34.3762C15.7285 36.5797 17.9809 38.2679 20.5633 39.2451C23.1457 40.2224 25.9525 40.4487 28.6584 39.8978C31.3643 39.347 33.8585 38.0415 35.8521 36.1327C37.8457 34.2239 39.257 31.7899 39.9225 29.1127C40.5879 26.4356 40.4804 23.6248 39.6122 21.0062C38.744 18.3877 37.1508 16.0684 35.0171 14.3172C32.8835 12.566 30.2967 11.4546 27.5566 11.1117C23.8361 12.3549 20.4375 14.4061 17.6053 17.1179C14.7731 19.8296 12.5777 23.1346 11.1768 26.795Z" fill="black"/>
      <path opacity="0.05" fill-rule="evenodd" clip-rule="evenodd" d="M60.6811 45.4C60.4902 42.6174 59.5055 39.9476 57.8434 37.7064C56.1813 35.4652 53.9113 33.7464 51.302 32.7534C48.6928 31.7603 45.8534 31.5345 43.1197 32.1027C40.386 32.6708 37.8724 34.0092 35.8762 35.9594C33.88 37.9097 32.4848 40.3902 31.8555 43.1076C31.2263 45.825 31.3893 48.6656 32.3254 51.2933C33.2615 53.9211 34.9315 56.226 37.1377 57.9356C39.344 59.6451 41.9943 60.6877 44.7751 60.94C48.394 59.6528 51.6902 57.5967 54.4363 54.9135C57.1824 52.2303 59.313 48.9839 60.6811 45.3983V45.4Z" fill="black"/>
      <path opacity="0.1" fill-rule="evenodd" clip-rule="evenodd" d="M11.8604 30.1216C12.628 32.4673 13.9786 34.5801 15.786 36.2626C17.5934 37.9451 19.7984 39.1422 22.1948 39.742C24.5913 40.3418 27.1009 40.3246 29.4889 39.6922C31.877 39.0597 34.0654 37.8326 35.8496 36.1257C37.6337 34.4187 38.9554 32.2876 39.6908 29.9317C40.4263 27.5758 40.5516 25.072 40.0549 22.6546C39.5583 20.2372 38.456 17.9851 36.8511 16.1089C35.2462 14.2327 33.1911 12.7938 30.8781 11.9266C26.32 12.8752 22.1204 15.0838 18.758 18.3008C15.3955 21.5178 13.0055 25.6137 11.8604 30.1216Z" fill="black"/>
      <path opacity="0.1" fill-rule="evenodd" clip-rule="evenodd" d="M60.0178 41.98C59.2615 39.6066 57.9097 37.466 56.0911 35.7619C54.2726 34.0578 52.0477 32.8469 49.6282 32.2444C47.2088 31.6419 44.6752 31.6678 42.2686 32.3198C39.8621 32.9717 37.6625 34.2279 35.8793 35.9689C34.0961 37.7098 32.7885 39.8777 32.081 42.266C31.3735 44.6544 31.2896 47.1839 31.8374 49.6138C32.3851 52.0437 33.5462 54.2932 35.2101 56.1483C36.8741 58.0033 38.9856 59.4021 41.3437 60.2117C45.8435 59.203 49.9734 56.9634 53.2714 53.7435C56.5694 50.5236 58.9054 46.4505 60.0178 41.98Z" fill="black"/>
      <path opacity="0.1" fill-rule="evenodd" clip-rule="evenodd" d="M12.3975 31.5016C13.3484 33.6419 14.801 35.522 16.6327 36.9832C18.4644 38.4444 20.6214 39.4437 22.9212 39.8967C25.2211 40.3497 27.5963 40.243 29.8462 39.5857C32.0961 38.9284 34.1545 37.7397 35.8475 36.1203C37.5406 34.5008 38.8185 32.498 39.5733 30.2811C40.328 28.0643 40.5375 25.6985 40.184 23.3838C39.8304 21.069 38.9243 18.8733 37.5421 16.9821C36.1599 15.0909 34.3423 13.5599 32.2428 12.5183C27.3875 13.2732 22.881 15.4983 19.3321 18.8931C15.7831 22.288 13.3626 26.6889 12.3975 31.5016Z" fill="black"/>
      <path opacity="0.1" fill-rule="evenodd" clip-rule="evenodd" d="M59.4788 40.5717C58.5328 38.4066 57.0747 36.5033 55.2299 35.0253C53.385 33.5473 51.2086 32.5387 48.8874 32.0863C46.5663 31.6338 44.1699 31.7509 41.9041 32.4276C39.6383 33.1043 37.5708 34.3203 35.8792 35.9712C34.1877 37.622 32.9226 39.6584 32.1927 41.9054C31.4628 44.1524 31.2899 46.5427 31.6889 48.8712C32.0878 51.1996 33.0467 53.3965 34.4831 55.2731C35.9195 57.1497 37.7905 58.65 39.9354 59.645C44.7482 58.8281 49.1973 56.5648 52.6891 53.157C56.1809 49.7492 58.5494 45.3589 59.4788 40.5717Z" fill="black"/>
      <path d="M59.0711 36.1084C59.0711 39.1347 58.4724 42.1313 57.3092 44.9273C56.1459 47.7232 54.4409 50.2637 52.2914 52.4036C50.142 54.5436 47.5903 56.241 44.7819 57.3992C41.9735 58.5573 38.9635 59.1534 35.9238 59.1534C32.884 59.1534 29.874 58.5573 27.0656 57.3992C24.2573 56.241 21.7055 54.5436 19.5561 52.4036C17.4066 50.2637 15.7016 47.7232 14.5384 44.9273C13.3751 42.1313 12.7764 39.1347 12.7764 36.1084C12.7764 33.082 13.3751 30.0854 14.5384 27.2894C15.7016 24.4935 17.4066 21.953 19.5561 19.8131C21.7055 17.6732 24.2573 15.9757 27.0656 14.8176C29.874 13.6594 32.884 13.0634 35.9238 13.0634C38.9635 13.0634 41.9735 13.6594 44.7819 14.8176C47.5903 15.9757 50.142 17.6732 52.2914 19.8131C54.4409 21.953 56.1459 24.4935 57.3092 27.2894C58.4724 30.0854 59.0711 33.082 59.0711 36.1084Z" fill="url(#paint2_linear_7092_54518)"/>
      <path fill-rule="evenodd" clip-rule="evenodd" d="M29.4151 35.3084C28.4797 34.6934 27.6991 33.8709 27.1343 32.905C26.5889 31.8846 26.3197 30.7396 26.3534 29.5834C26.3121 28.116 26.8134 26.6849 27.7616 25.5634C28.7471 24.4371 30.0136 23.5918 31.4324 23.1134C32.9754 22.5688 34.6012 22.2954 36.2377 22.305C37.3084 22.2949 38.378 22.3769 39.4346 22.55C40.1909 22.6667 40.9337 22.8582 41.6521 23.1217C42.3117 23.3447 42.9072 23.7245 43.3873 24.2284C43.7411 24.6429 43.9315 25.172 43.9229 25.7167C43.9355 25.9997 43.8922 26.2823 43.7954 26.5486C43.6987 26.8148 43.5504 27.0594 43.359 27.2684C43.1778 27.4609 42.958 27.6131 42.7139 27.7147C42.4697 27.8164 42.2068 27.8654 41.9424 27.8584C41.5786 27.8554 41.2196 27.7747 40.8895 27.6217C40.0761 27.258 39.2381 26.9517 38.3818 26.705C37.5935 26.4974 36.7809 26.3965 35.9657 26.405C34.9033 26.366 33.8522 26.6345 32.939 27.1784C32.5537 27.4122 32.2383 27.7452 32.0258 28.1425C31.8133 28.5397 31.7115 28.9867 31.731 29.4367C31.7254 30.0275 31.9505 30.5972 32.3584 31.025C32.8431 31.5276 33.416 31.9371 34.0486 32.2334C34.7572 32.5845 35.8139 33.05 37.2188 33.63C37.3744 33.6792 37.5261 33.74 37.6726 33.8117C39.0436 34.3534 40.3581 35.0283 41.597 35.8267C42.5755 36.464 43.4006 37.3098 44.013 38.3034C44.6161 39.3476 44.9181 40.5382 44.8857 41.7434C44.9363 43.2189 44.513 44.672 43.6776 45.89C42.827 47.0433 41.6503 47.9157 40.2989 48.395C38.6702 48.9763 36.9491 49.2564 35.2199 49.2217C32.8437 49.3048 30.4788 48.8578 28.2972 47.9134C27.7395 47.6653 27.2505 47.2855 26.8723 46.8067C26.5583 46.368 26.3955 45.8392 26.4085 45.3C26.3929 45.0157 26.4393 44.7313 26.5444 44.4666C26.6495 44.2018 26.8109 43.9631 27.0175 43.7667C27.4504 43.388 28.0125 43.1899 28.5875 43.2134C29.2282 43.2221 29.8576 43.3838 30.4229 43.685C31.1259 44.0361 31.6804 44.2995 32.0864 44.475C32.5501 44.6689 33.0304 44.8207 33.5214 44.9284C34.1268 45.061 34.7453 45.1248 35.3651 45.1184C36.4611 45.1965 37.5518 44.9061 38.4635 44.2934C38.8048 44.0266 39.0776 43.6825 39.2592 43.2895C39.4408 42.8964 39.5261 42.4659 39.508 42.0334C39.509 41.4201 39.275 40.8297 38.854 40.3834C38.2975 39.8095 37.6461 39.3359 36.9285 38.9834C36.0798 38.5367 34.8862 37.9923 33.3478 37.35C31.972 36.8024 30.6545 36.1184 29.4151 35.3084Z" fill="white"/>
      <defs>
      <linearGradient id="paint0_linear_7092_54518" x1="23.4584" y1="11.1767" x2="28.0069" y2="39.9249" gradientUnits="userSpaceOnUse">
      <stop offset="0.012" stop-color="#00B7F0"/>
      <stop offset="0.339" stop-color="#009DE5"/>
      <stop offset="0.755" stop-color="#0082D9"/>
      <stop offset="1" stop-color="#0078D4"/>
      </linearGradient>
      <linearGradient id="paint1_linear_7092_54518" x1="33.446" y1="53.7417" x2="58.7384" y2="39.124" gradientUnits="userSpaceOnUse">
      <stop stop-color="#0078D4"/>
      <stop offset="0.37" stop-color="#007AD5"/>
      <stop offset="0.573" stop-color="#0082D9"/>
      <stop offset="0.735" stop-color="#0090DF"/>
      <stop offset="0.875" stop-color="#00A3E7"/>
      <stop offset="1" stop-color="#00BCF2"/>
      </linearGradient>
      <linearGradient id="paint2_linear_7092_54518" x1="26.8904" y1="20.4817" x2="49.9459" y2="60.4589" gradientUnits="userSpaceOnUse">
      <stop stop-color="#00B7F0"/>
      <stop offset="1" stop-color="#007CC1"/>
      </linearGradient>
      </defs>
      </svg>                          
      </button>
      
      <button class="w-10 h-10 flex items-center justify-center rounded-lg bg-white shadow-md shadow-gray-200 group transition-all duration-300">
      <svg class="rounded-md transition-all duration-300 group-hover:scale-110" width="28" height="28" viewBox="0 0 72 72" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path d="M13.0065 56.1236H21.4893V35.5227L9.37109 26.4341V52.4881C9.37109 54.4997 11.001 56.1236 13.0065 56.1236Z" fill="#4285F4"/>
      <path d="M50.5732 56.1236H59.056C61.0676 56.1236 62.6914 54.4937 62.6914 52.4881V26.4341L50.5732 35.5227" fill="#34A853"/>
      <path d="M50.5732 19.7693V35.5229L62.6914 26.4343V21.587C62.6914 17.0912 57.5594 14.5282 53.9663 17.2245" fill="#FBBC04"/>
      <path d="M21.4893 35.5227V19.769L36.0311 30.6754L50.5729 19.769V35.5227L36.0311 46.429" fill="#EA4335"/>
      <path d="M9.37109 21.587V26.4343L21.4893 35.5229V19.7693L18.0962 17.2245C14.4971 14.5282 9.37109 17.0912 9.37109 21.587Z" fill="#C5221F"/>
      </svg>                          
      </button>
      
      <button class="w-10 h-10 flex items-center justify-center rounded-lg bg-white shadow-md shadow-gray-200 group transition-all duration-300">
      <svg class="rounded-md transition-all duration-300 group-hover:scale-110" xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 72 72" fill="none">
      <path d="M61.1026 23.7185C60.5048 21.471 58.7363 19.6981 56.4863 19.0904C52.4181 18 36.0951 18 36.0951 18C36.0951 18 19.7805 18 15.7039 19.0904C13.4622 19.6897 11.6937 21.4627 11.0876 23.7185C10 27.7971 10 36.3124 10 36.3124C10 36.3124 10 44.8276 11.0876 48.9063C11.6854 51.1537 13.4539 52.9267 15.7039 53.5343C19.7805 54.6247 36.0951 54.6247 36.0951 54.6247C36.0951 54.6247 52.4181 54.6247 56.4863 53.5343C58.728 52.935 60.4965 51.162 61.1026 48.9063C62.1902 44.8276 62.1902 36.3124 62.1902 36.3124C62.1902 36.3124 62.1902 27.7971 61.1026 23.7185Z" fill="#FF3000"/>
      <path d="M30.8811 44.1617L44.4392 36.3124L30.8811 28.463V44.1617Z" fill="white"/>
      </svg>
      </button>
      </div>

Related Examples

Social Media Icons
Social Media Icons

Author:
Aman kumar

1 year ago

2.3k
Social Media Icons
Social Media Icons

Author:
Aman kumar

1 year ago

1.8k
Social Media Icons
Social Media Icons

Author:
Aman kumar

1 year ago

2.1k
Social Media Icons
Social Media Icons

Author:
Sedat Kumcu

1 year ago

1.7k
macOS Style Webpage – macOS Design in the Browser
A simple webpage inspired by the macOS interface. It recreates the clean design, dock, and desktop look of macOS using only HTML, tailwind CSS, and JavaScript. This project focuses on front-end styling and layout to bring the visual feel of macOS to the web — not a full simulation, just the look and vibe.

Author:
Hamza Atig

3 weeks ago

408
Login popup modal
centered modal for gaining more attention from users, it also has social login buttons.

Author:
R Thapa

2 years ago

16.9k
Sign up with google button

Author:
Laurits

2 years ago

41k
Uses emoji for attention, mentions key features (modern, responsive, accessible)
Drop-in Tailwind CSS profile card component with responsive layout, gradient header, and hover effects - zero custom CSS needed. Features skill tags, social icons, and clean stats display. Just copy-paste the HTML, swap in your details, and you're live. Perfect for portfolios, developer profiles, or link-in-bio pages.

Author:
Muhammad Umair Arshad

7 months ago

833
Game changer
by salvator

Author:
Baraka Salvator

5 months ago

642
Social Media
Social Media button vertical dark style

Author:
sina

1 month ago

254
App store & Google playstore buttons

Author:
Dika Rahman

1 year ago

2.3k
Share button

Author:
Maxim

10 months ago

1.2k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components

TailwindFlex.com

Tailwindflex.com is a free Tailwind CSS examples library. It's a one-stop destination for ready-made Tailwind CSS components and templates.

Contact

Email: admin@tailwindflex.com

Resources

Tailwind CSS Gradient Generator Free Bootstrap CSS Components Free CSS Components

© 2025 TailwindFlex. All Rights Reserved.

v1.12