Social Media Icons

Social Media Icons

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

Social media buttons Logo cloud

Author Aman kumar

Tailwind v3.4 2.5k 9

Fork Fullscreen

<div class="bg-white w-full h-auto py-8 flex items-center justify-center gap-4 flex-wrap">
      <button class="bg-blue-50 cursor-pointer rounded-md shadow-md shadow-transparent transition-all duration-300 hover:shadow-indigo-200">
      <svg class="" xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 92 92" fill="none">
      <rect x="0.138672" width="" height="" rx="15" fill="#EDF4FF"/>
      <path d="M56.4927 48.6403L57.7973 40.3588H49.7611V34.9759C49.7611 32.7114 50.883 30.4987 54.4706 30.4987H58.1756V23.4465C56.018 23.1028 53.8378 22.9168 51.6527 22.8901C45.0385 22.8901 40.7204 26.8626 40.7204 34.0442V40.3588H33.3887V48.6403H40.7204V68.671H49.7611V48.6403H56.4927Z" fill="#337FFF"/>
      </svg></button>
      
      <button class="w-12 h-12 flex items-center justify-center bg-gradient-to-tr from-red-50 to-pink-50 cursor-pointer rounded-md shadow-md shadow-transparent transition-all duration-300 hover:shadow-red-200" >
      <svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 51 51" fill="none">
        <path d="M17.4456 25.7808C17.4456 21.1786 21.1776 17.4468 25.7826 17.4468C30.3875 17.4468 34.1216 21.1786 34.1216 25.7808C34.1216 30.383 30.3875 34.1148 25.7826 34.1148C21.1776 34.1148 17.4456 30.383 17.4456 25.7808ZM12.9377 25.7808C12.9377 32.8708 18.6883 38.618 25.7826 38.618C32.8768 38.618 38.6275 32.8708 38.6275 25.7808C38.6275 18.6908 32.8768 12.9436 25.7826 12.9436C18.6883 12.9436 12.9377 18.6908 12.9377 25.7808ZM36.1342 12.4346C36.1339 13.0279 36.3098 13.608 36.6394 14.1015C36.9691 14.595 37.4377 14.9797 37.9861 15.2069C38.5346 15.4342 39.1381 15.4939 39.7204 15.3784C40.3028 15.2628 40.8378 14.9773 41.2577 14.5579C41.6777 14.1385 41.9638 13.6041 42.0799 13.0222C42.1959 12.4403 42.1367 11.8371 41.9097 11.2888C41.6828 10.7406 41.2982 10.2719 40.8047 9.94202C40.3112 9.61218 39.7309 9.436 39.1372 9.43576H39.136C38.3402 9.43613 37.5771 9.75216 37.0142 10.3144C36.4514 10.8767 36.1349 11.6392 36.1342 12.4346ZM15.6765 46.1302C13.2377 46.0192 11.9121 45.6132 11.0311 45.2702C9.86323 44.8158 9.02993 44.2746 8.15381 43.4002C7.27768 42.5258 6.73536 41.6938 6.28269 40.5266C5.93928 39.6466 5.53304 38.3214 5.42217 35.884C5.3009 33.2488 5.27668 32.4572 5.27668 25.781C5.27668 19.1048 5.3029 18.3154 5.42217 15.678C5.53324 13.2406 5.94248 11.918 6.28269 11.0354C6.73736 9.86816 7.27888 9.03536 8.15381 8.15976C9.02873 7.28416 9.86123 6.74216 11.0311 6.28976C11.9117 5.94656 13.2377 5.54056 15.6765 5.42976C18.3133 5.30856 19.1054 5.28436 25.7826 5.28436C32.4598 5.28436 33.2527 5.31056 35.8916 5.42976C38.3305 5.54076 39.6539 5.94976 40.537 6.28976C41.7049 6.74216 42.5382 7.28536 43.4144 8.15976C44.2905 9.03416 44.8308 9.86816 45.2855 11.0354C45.6289 11.9154 46.0351 13.2406 46.146 15.678C46.2673 18.3154 46.2915 19.1048 46.2915 25.781C46.2915 32.4572 46.2673 33.2466 46.146 35.884C46.0349 38.3214 45.6267 39.6462 45.2855 40.5266C44.8308 41.6938 44.2893 42.5266 43.4144 43.4002C42.5394 44.2738 41.7049 44.8158 40.537 45.2702C39.6565 45.6134 38.3305 46.0194 35.8916 46.1302C33.2549 46.2514 32.4628 46.2756 25.7826 46.2756C19.1024 46.2756 18.3125 46.2514 15.6765 46.1302ZM15.4694 0.932162C12.8064 1.05336 10.9867 1.47536 9.39755 2.09336C7.75177 2.73156 6.35853 3.58776 4.9663 4.97696C3.57406 6.36616 2.71955 7.76076 2.08097 9.40556C1.46259 10.9948 1.04034 12.8124 0.919069 15.4738C0.795795 18.1394 0.767578 18.9916 0.767578 25.7808C0.767578 32.57 0.795795 33.4222 0.919069 36.0878C1.04034 38.7494 1.46259 40.5668 2.08097 42.156C2.71955 43.7998 3.57426 45.196 4.9663 46.5846C6.35833 47.9732 7.75177 48.8282 9.39755 49.4682C10.9897 50.0862 12.8064 50.5082 15.4694 50.6294C18.138 50.7506 18.9893 50.7808 25.7826 50.7808C32.5759 50.7808 33.4286 50.7526 36.0958 50.6294C38.759 50.5082 40.5774 50.0862 42.1676 49.4682C43.8124 48.8282 45.2066 47.9738 46.5989 46.5846C47.9911 45.1954 48.8438 43.7998 49.4842 42.156C50.1026 40.5668 50.5268 38.7492 50.6461 36.0878C50.7674 33.4202 50.7956 32.57 50.7956 25.7808C50.7956 18.9916 50.7674 18.1394 50.6461 15.4738C50.5248 12.8122 50.1026 10.9938 49.4842 9.40556C48.8438 7.76176 47.9889 6.36836 46.5989 4.97696C45.2088 3.58556 43.8124 2.73156 42.1696 2.09336C40.5775 1.47536 38.7588 1.05136 36.0978 0.932162C33.4306 0.810962 32.5779 0.780762 25.7846 0.780762C18.9913 0.780762 18.138 0.808962 15.4694 0.932162Z" fill="url(#paint0_radial_7092_54379)"/>
        <path d="M17.4456 25.7808C17.4456 21.1786 21.1776 17.4468 25.7826 17.4468C30.3875 17.4468 34.1216 21.1786 34.1216 25.7808C34.1216 30.383 30.3875 34.1148 25.7826 34.1148C21.1776 34.1148 17.4456 30.383 17.4456 25.7808ZM12.9377 25.7808C12.9377 32.8708 18.6883 38.618 25.7826 38.618C32.8768 38.618 38.6275 32.8708 38.6275 25.7808C38.6275 18.6908 32.8768 12.9436 25.7826 12.9436C18.6883 12.9436 12.9377 18.6908 12.9377 25.7808ZM36.1342 12.4346C36.1339 13.0279 36.3098 13.608 36.6394 14.1015C36.9691 14.595 37.4377 14.9797 37.9861 15.2069C38.5346 15.4342 39.1381 15.4939 39.7204 15.3784C40.3028 15.2628 40.8378 14.9773 41.2577 14.5579C41.6777 14.1385 41.9638 13.6041 42.0799 13.0222C42.1959 12.4403 42.1367 11.8371 41.9097 11.2888C41.6828 10.7406 41.2982 10.2719 40.8047 9.94202C40.3112 9.61218 39.7309 9.436 39.1372 9.43576H39.136C38.3402 9.43613 37.5771 9.75216 37.0142 10.3144C36.4514 10.8767 36.1349 11.6392 36.1342 12.4346ZM15.6765 46.1302C13.2377 46.0192 11.9121 45.6132 11.0311 45.2702C9.86323 44.8158 9.02993 44.2746 8.15381 43.4002C7.27768 42.5258 6.73536 41.6938 6.28269 40.5266C5.93928 39.6466 5.53304 38.3214 5.42217 35.884C5.3009 33.2488 5.27668 32.4572 5.27668 25.781C5.27668 19.1048 5.3029 18.3154 5.42217 15.678C5.53324 13.2406 5.94248 11.918 6.28269 11.0354C6.73736 9.86816 7.27888 9.03536 8.15381 8.15976C9.02873 7.28416 9.86123 6.74216 11.0311 6.28976C11.9117 5.94656 13.2377 5.54056 15.6765 5.42976C18.3133 5.30856 19.1054 5.28436 25.7826 5.28436C32.4598 5.28436 33.2527 5.31056 35.8916 5.42976C38.3305 5.54076 39.6539 5.94976 40.537 6.28976C41.7049 6.74216 42.5382 7.28536 43.4144 8.15976C44.2905 9.03416 44.8308 9.86816 45.2855 11.0354C45.6289 11.9154 46.0351 13.2406 46.146 15.678C46.2673 18.3154 46.2915 19.1048 46.2915 25.781C46.2915 32.4572 46.2673 33.2466 46.146 35.884C46.0349 38.3214 45.6267 39.6462 45.2855 40.5266C44.8308 41.6938 44.2893 42.5266 43.4144 43.4002C42.5394 44.2738 41.7049 44.8158 40.537 45.2702C39.6565 45.6134 38.3305 46.0194 35.8916 46.1302C33.2549 46.2514 32.4628 46.2756 25.7826 46.2756C19.1024 46.2756 18.3125 46.2514 15.6765 46.1302ZM15.4694 0.932162C12.8064 1.05336 10.9867 1.47536 9.39755 2.09336C7.75177 2.73156 6.35853 3.58776 4.9663 4.97696C3.57406 6.36616 2.71955 7.76076 2.08097 9.40556C1.46259 10.9948 1.04034 12.8124 0.919069 15.4738C0.795795 18.1394 0.767578 18.9916 0.767578 25.7808C0.767578 32.57 0.795795 33.4222 0.919069 36.0878C1.04034 38.7494 1.46259 40.5668 2.08097 42.156C2.71955 43.7998 3.57426 45.196 4.9663 46.5846C6.35833 47.9732 7.75177 48.8282 9.39755 49.4682C10.9897 50.0862 12.8064 50.5082 15.4694 50.6294C18.138 50.7506 18.9893 50.7808 25.7826 50.7808C32.5759 50.7808 33.4286 50.7526 36.0958 50.6294C38.759 50.5082 40.5774 50.0862 42.1676 49.4682C43.8124 48.8282 45.2066 47.9738 46.5989 46.5846C47.9911 45.1954 48.8438 43.7998 49.4842 42.156C50.1026 40.5668 50.5268 38.7492 50.6461 36.0878C50.7674 33.4202 50.7956 32.57 50.7956 25.7808C50.7956 18.9916 50.7674 18.1394 50.6461 15.4738C50.5248 12.8122 50.1026 10.9938 49.4842 9.40556C48.8438 7.76176 47.9889 6.36836 46.5989 4.97696C45.2088 3.58556 43.8124 2.73156 42.1696 2.09336C40.5775 1.47536 38.7588 1.05136 36.0978 0.932162C33.4306 0.810962 32.5779 0.780762 25.7846 0.780762C18.9913 0.780762 18.138 0.808962 15.4694 0.932162Z" fill="url(#paint1_radial_7092_54379)"/>
        <defs>
          <radialGradient id="paint0_radial_7092_54379" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(7.41436 51.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_54379" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(31.1086 53.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>
      
      <svg class="cursor-pointer rounded-md shadow-md shadow-transparent transition-all duration-300 hover:shadow-indigo-200"  xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 93 92" fill="none">
      <rect x="0.138672" width="91.5618" height="91.5618" rx="15" fill="#F7F7F7"/>
      <path d="M50.7568 42.1716L69.3704 21H64.9596L48.7974 39.383L35.8887 21H21L40.5205 48.7983L21 71H25.4111L42.4788 51.5869L56.1113 71H71L50.7557 42.1716H50.7568ZM44.7152 49.0433L42.7374 46.2752L27.0005 24.2492H33.7756L46.4755 42.0249L48.4533 44.7929L64.9617 67.8986H58.1865L44.7152 49.0443V49.0433Z" fill="black"/>
      </svg>
      
      <button class="w-12 h-12 flex items-center justify-center bg-gray-100 cursor-pointer rounded-md shadow-md shadow-transparent transition-all duration-300 hover:shadow-indigo-200" >
      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="28" viewBox="0 0 42 47" fill="none">
      <path fill-rule="evenodd" clip-rule="evenodd" d="M30.6721 17.4285C33.7387 19.6085 37.4112 20.7733 41.1737 20.7592V13.3024C40.434 13.3045 39.6963 13.2253 38.9739 13.0663V19.0068C35.203 19.0135 31.5252 17.8354 28.4599 15.6389V30.9749C28.4507 33.4914 27.7606 35.9585 26.4628 38.1146C25.165 40.2706 23.3079 42.0353 21.0885 43.2215C18.8691 44.4076 16.37 44.9711 13.8563 44.852C11.3426 44.733 8.90795 43.9359 6.81055 42.5453C8.75059 44.5082 11.2295 45.8513 13.9333 46.4044C16.6372 46.9576 19.4444 46.6959 21.9994 45.6526C24.5545 44.6093 26.7425 42.8312 28.2864 40.5436C29.8302 38.256 30.6605 35.5616 30.6721 32.8018V17.4285ZM33.3938 9.82262C31.8343 8.13232 30.8775 5.97386 30.6721 3.68324V2.71387H28.5842C28.8423 4.16989 29.4039 5.5553 30.2326 6.78004C31.0612 8.00479 32.1383 9.04144 33.3938 9.82262ZM11.645 36.642C10.9213 35.6957 10.4779 34.5653 10.365 33.3793C10.2522 32.1934 10.4746 30.9996 11.0068 29.9338C11.5391 28.8681 12.3598 27.9731 13.3757 27.3508C14.3915 26.7285 15.5616 26.4039 16.7529 26.4139C17.4106 26.4137 18.0644 26.5143 18.6916 26.7121V19.0068C17.9584 18.9097 17.2189 18.8682 16.4794 18.8826V24.8728C14.9522 24.39 13.2992 24.4998 11.8492 25.1803C10.3992 25.8608 9.25851 27.0621 8.65394 28.5454C8.04937 30.0286 8.02524 31.6851 8.58636 33.1853C9.14748 34.6855 10.2527 35.9196 11.6823 36.642H11.645Z" fill="#EE1D52"/>
      <path fill-rule="evenodd" clip-rule="evenodd" d="M28.4589 15.5892C31.5241 17.7857 35.2019 18.9638 38.9729 18.9571V13.0166C36.8243 12.5623 34.8726 11.4452 33.3927 9.82262C32.1372 9.04144 31.0601 8.00479 30.2315 6.78004C29.4029 5.5553 28.8412 4.16989 28.5831 2.71387H23.09V32.8018C23.0849 34.1336 22.6629 35.4304 21.8831 36.51C21.1034 37.5897 20.0051 38.3981 18.7425 38.8217C17.4798 39.2453 16.1162 39.2629 14.8431 38.872C13.57 38.4811 12.4512 37.7012 11.6439 36.642C10.3645 35.9965 9.3399 34.9387 8.7354 33.6394C8.1309 32.3401 7.98177 30.875 8.31208 29.4805C8.64239 28.0861 9.43286 26.8435 10.556 25.9535C11.6791 25.0634 13.0693 24.5776 14.5023 24.5745C15.1599 24.5766 15.8134 24.6772 16.4411 24.8728V18.8826C13.7288 18.9477 11.0946 19.8033 8.86172 21.3444C6.62887 22.8855 4.89458 25.0451 3.87175 27.5579C2.84892 30.0708 2.58205 32.8276 3.10392 35.49C3.62579 38.1524 4.91367 40.6045 6.80948 42.5453C8.90731 43.9459 11.3458 44.7512 13.8651 44.8755C16.3845 44.9997 18.8904 44.4383 21.1158 43.2509C23.3413 42.0636 25.2031 40.2948 26.5027 38.133C27.8024 35.9712 28.4913 33.4973 28.4962 30.9749L28.4589 15.5892Z" fill="black"/>
      <path fill-rule="evenodd" clip-rule="evenodd" d="M38.9736 13.0161V11.4129C37.0005 11.4213 35.0655 10.8696 33.3934 9.82211C34.8695 11.4493 36.8229 12.5674 38.9736 13.0161ZM28.5838 2.71335C28.5838 2.42751 28.4968 2.12924 28.4596 1.8434V0.874023H20.8785V30.9744C20.872 32.6598 20.197 34.2738 19.0017 35.4621C17.8064 36.6504 16.1885 37.3159 14.503 37.3126C13.5106 37.3176 12.5311 37.0876 11.6446 36.6415C12.4519 37.7007 13.5707 38.4805 14.8438 38.8715C16.1169 39.2624 17.4805 39.2448 18.7432 38.8212C20.0058 38.3976 21.1041 37.5892 21.8838 36.5095C22.6636 35.4298 23.0856 34.1331 23.0907 32.8013V2.71335H28.5838ZM16.4418 18.8696V17.167C13.3222 16.7432 10.1511 17.3885 7.44529 18.9977C4.73944 20.6069 2.65839 23.0851 1.54131 26.0284C0.424223 28.9718 0.336969 32.2067 1.29377 35.206C2.25057 38.2053 4.195 40.792 6.81017 42.5448C4.92871 40.5995 3.65455 38.1484 3.14333 35.4908C2.63212 32.8333 2.906 30.0844 3.9315 27.5799C4.957 25.0755 6.68974 22.924 8.91801 21.3882C11.1463 19.8524 13.7736 18.9988 16.4791 18.9318L16.4418 18.8696Z" fill="#69C9D0"/>
      </svg>
      </button>
      
      <svg class="cursor-pointer rounded-md shadow-md shadow-transparent transition-all duration-300 hover:shadow-green-200" xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 93 92" fill="none">
      <rect x="1.13867" width="91.5618" height="91.5618" rx="15" fill="#ECFFF5"/>
      <path d="M23.5762 66.8405L26.8608 54.6381C24.2118 49.8847 23.3702 44.3378 24.4904 39.0154C25.6106 33.693 28.6176 28.952 32.9594 25.6624C37.3012 22.3729 42.6867 20.7554 48.1276 21.1068C53.5685 21.4582 58.6999 23.755 62.5802 27.5756C66.4604 31.3962 68.8292 36.4844 69.2519 41.9065C69.6746 47.3286 68.1228 52.7208 64.8813 57.0938C61.6399 61.4668 56.9261 64.5271 51.605 65.7133C46.284 66.8994 40.7125 66.1318 35.9131 63.5513L23.5762 66.8405ZM36.508 58.985L37.2709 59.4365C40.7473 61.4918 44.8076 62.3423 48.8191 61.8555C52.8306 61.3687 56.5681 59.5719 59.4489 56.7452C62.3298 53.9185 64.1923 50.2206 64.7463 46.2279C65.3002 42.2351 64.5143 38.1717 62.5113 34.6709C60.5082 31.1701 57.4003 28.4285 53.6721 26.8734C49.9438 25.3184 45.8045 25.0372 41.8993 26.0736C37.994 27.11 34.5422 29.4059 32.0817 32.6035C29.6212 35.801 28.2903 39.7206 28.2963 43.7514C28.293 47.0937 29.2197 50.3712 30.9732 53.2192L31.4516 54.0061L29.6153 60.8167L36.508 58.985Z" fill="#00D95F"/>
      <path fill-rule="evenodd" clip-rule="evenodd" d="M55.0259 46.8847C54.5787 46.5249 54.0549 46.2716 53.4947 46.1442C52.9344 46.0168 52.3524 46.0186 51.793 46.1495C50.9524 46.4977 50.4093 47.8134 49.8661 48.4713C49.7516 48.629 49.5833 48.7396 49.3928 48.7823C49.2024 48.8251 49.0028 48.797 48.8316 48.7034C45.7543 47.5012 43.1748 45.2965 41.5122 42.4475C41.3704 42.2697 41.3033 42.044 41.325 41.8178C41.3467 41.5916 41.4555 41.3827 41.6286 41.235C42.2344 40.6368 42.6791 39.8959 42.9218 39.0809C42.9756 38.1818 42.7691 37.2863 42.3269 36.5011C41.985 35.4002 41.3344 34.42 40.4518 33.6762C39.9966 33.472 39.4919 33.4036 38.9985 33.4791C38.5052 33.5546 38.0443 33.7709 37.6715 34.1019C37.0242 34.6589 36.5104 35.3537 36.168 36.135C35.8256 36.9163 35.6632 37.7643 35.6929 38.6165C35.6949 39.0951 35.7557 39.5716 35.8739 40.0354C36.1742 41.1497 36.636 42.2144 37.2447 43.1956C37.6839 43.9473 38.163 44.6749 38.6801 45.3755C40.3607 47.6767 42.4732 49.6305 44.9003 51.1284C46.1183 51.8897 47.42 52.5086 48.7799 52.973C50.1924 53.6117 51.752 53.8568 53.2931 53.6824C54.1711 53.5499 55.003 53.2041 55.7156 52.6755C56.4281 52.1469 56.9995 51.4518 57.3795 50.6512C57.6028 50.1675 57.6705 49.6269 57.5735 49.1033C57.3407 48.0327 55.9053 47.4007 55.0259 46.8847Z" fill="#00D95F"/>
      </svg>
      
      <svg class="cursor-pointer rounded-md shadow-md shadow-transparent transition-all duration-300 hover:shadow-red-200" xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 93 92" fill="none">
      <rect x="1.13867" width="91.5618" height="91.5618" rx="15" fill="#FFECEC"/>
      <path d="M44.3501 23.0437C36.9186 23.893 29.5132 30.0479 29.2075 38.84C29.0154 44.2083 30.5044 48.2356 35.4951 49.3664C37.6608 45.4553 34.7965 44.5927 34.3511 41.7633C32.5216 30.1686 47.4153 22.2615 55.2093 30.3563C60.6018 35.9615 57.0519 53.206 48.3541 51.4136C40.0231 49.7017 52.4323 35.9749 45.7823 33.2796C40.3767 31.0894 37.5037 39.9798 40.0667 44.396C38.5647 51.9902 35.3292 59.1464 36.6391 68.6715C40.8876 65.5158 42.3198 59.4727 43.4943 53.1702C45.6295 54.4978 46.7691 55.8789 49.4937 56.0935C59.5407 56.8891 65.1515 45.8263 63.7805 35.6218C62.5623 26.5749 53.7422 21.971 44.3501 23.0437Z" fill="#FF0000"/>
      </svg>
      
      <svg class="cursor-pointer rounded-md shadow-md shadow-transparent transition-all duration-300 hover:shadow-blue-200" xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 92 93" fill="none">
      <rect x="0.138672" y="1" width="91.5618" height="91.5618" rx="15" fill="#EEFAFF"/>
      <path fill-rule="evenodd" clip-rule="evenodd" d="M24.6975 21.5618C22.6561 21.5618 21 23.1674 21 25.1456V68.0091C21 69.9875 22.6563 71.5918 24.6975 71.5918H67.3325C69.3747 71.5918 71.03 69.9873 71.03 68.0086V25.1456C71.03 23.1674 69.3747 21.5618 67.3325 21.5618H24.6975ZM36.2032 40.9068V63.4304H28.7167V40.9068H36.2032ZM36.6967 33.9411C36.6967 36.1025 35.0717 37.8321 32.4615 37.8321L32.4609 37.8319H32.4124C29.8998 37.8319 28.2754 36.1023 28.2754 33.9409C28.2754 31.7304 29.9489 30.0491 32.5111 30.0491C35.0717 30.0491 36.6478 31.7304 36.6967 33.9411ZM47.833 63.4304H40.3471L40.3469 63.4312C40.3469 63.4312 40.4452 43.0205 40.3475 40.9075H47.8336V44.0957C48.8288 42.5613 50.6098 40.3787 54.5808 40.3787C59.5062 40.3787 63.1991 43.598 63.1991 50.516V63.4304H55.7133V51.3822C55.7133 48.354 54.6293 46.2887 51.921 46.2887C49.8524 46.2887 48.6206 47.6815 48.0796 49.0271C47.8819 49.5072 47.833 50.1813 47.833 50.8535V63.4304Z" fill="#006699"/>
      </svg>
      
      <svg class="cursor-pointer rounded-md shadow-md shadow-transparent transition-all duration-300 hover:shadow-purple-200" xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 93 93" fill="none">
      <rect x="0.138672" y="1" width="91.5618" height="91.5618" rx="15" fill="#F0EEFF"/>
      <path d="M46.4657 23.5618C33.5649 23.5618 23.5615 33.0155 23.5615 45.7788C23.5615 52.4554 26.2986 58.2272 30.7534 62.2126C31.1256 62.5447 31.3547 63.0142 31.3661 63.5181L31.4921 67.5951C31.5013 67.895 31.584 68.1882 31.733 68.4487C31.882 68.7092 32.0927 68.9291 32.3466 69.0892C32.6004 69.2492 32.8898 69.3444 33.1891 69.3664C33.4884 69.3885 33.7885 69.3367 34.0631 69.2155L38.6096 67.2114C38.9932 67.0396 39.4284 67.011 39.8349 67.1198C41.925 67.6924 44.1467 68.0016 46.4657 68.0016C59.3665 68.0016 69.3699 58.5479 69.3699 45.7846C69.3699 33.0212 59.3665 23.5618 46.4657 23.5618Z" fill="url(#paint0_radial_7092_54519)"/>
      <path d="M32.7117 52.2779L39.4398 41.6045C39.6929 41.2027 40.0266 40.8577 40.4198 40.5913C40.8129 40.3249 41.2571 40.1429 41.7241 40.0568C42.1911 39.9707 42.671 39.9824 43.1333 40.0911C43.5956 40.1998 44.0303 40.4032 44.4101 40.6884L49.7639 44.7023C50.0029 44.8813 50.2937 44.9775 50.5923 44.9765C50.8909 44.9754 51.181 44.8772 51.4187 44.6966L58.645 39.2111C59.607 38.4781 60.8667 39.6348 60.2254 40.6597L53.4916 51.3274C53.2385 51.7292 52.9048 52.0742 52.5116 52.3406C52.1185 52.607 51.6744 52.789 51.2073 52.8751C50.7403 52.9612 50.2605 52.9495 49.7981 52.8408C49.3358 52.7321 48.9011 52.5287 48.5214 52.2435L43.1675 48.2296C42.9285 48.0506 42.6377 47.9544 42.3391 47.9554C42.0406 47.9565 41.7504 48.0547 41.5127 48.2353L34.2864 53.7209C33.3244 54.4538 32.0647 53.3028 32.7117 52.2779Z" fill="white"/>
      <defs>
        <radialGradient id="paint0_radial_7092_54519" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(31.2344 69.3701) 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>
      
      <svg class="cursor-pointer rounded-md shadow-md shadow-transparent transition-all duration-300 hover:shadow-sky-200" xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 92 93" fill="none">
      <rect x="0.138672" y="1" width="91.5618" height="91.5618" rx="15" fill="#E5F7FF"/>
      <path fill-rule="evenodd" clip-rule="evenodd" d="M71.153 49.5768C71.153 63.3922 59.9534 74.5918 46.138 74.5918C32.3227 74.5918 21.123 63.3922 21.123 49.5768C21.123 35.7614 32.3227 24.5618 46.138 24.5618C59.9534 24.5618 71.153 35.7614 71.153 49.5768ZM48.5352 41.901C44.2377 43.7573 31.8466 49.0289 31.8466 49.0289C28.91 50.2169 30.6289 51.3306 30.6289 51.3306C30.6289 51.3306 33.1357 52.2216 35.2846 52.8898C37.4333 53.558 38.5793 52.8156 38.5793 52.8156C38.5793 52.8156 43.5931 49.4002 48.6784 45.7619C52.2597 43.2375 51.4002 45.3165 50.5407 46.2075C48.6784 48.138 45.5986 51.1821 43.02 53.6323C41.8741 54.6719 42.4471 55.5628 42.9485 56.0083C44.4067 57.2873 47.8411 59.6135 49.4003 60.6696C49.8324 60.9623 50.1204 61.1574 50.1826 61.2057C50.5407 61.5028 52.5463 62.8392 53.7639 62.5422C54.9815 62.2452 55.1247 60.5374 55.1247 60.5374C55.1247 60.5374 56.0558 54.4491 56.9154 48.8804C57.0746 47.787 57.2338 46.7166 57.3822 45.7184C57.768 43.1241 58.0812 41.0182 58.133 40.2675C58.3479 37.7431 55.7693 38.7825 55.7693 38.7825C55.7693 38.7825 50.1826 41.1586 48.5352 41.901Z" fill="#34AADF"/>
      </svg>
      
      <svg class="cursor-pointer rounded-md shadow-md shadow-transparent transition-all duration-300 hover:shadow-green-200" xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 93 93" fill="none">
      <rect x="1.13867" y="1" width="91.5618" height="91.5618" rx="15" fill="#EEFFE9"/>
      <path d="M55.9308 36.5403C56.9196 36.5403 57.8855 36.6225 58.8383 36.74C57.1157 29.1747 49.1697 23.4524 39.615 23.4524C28.8002 23.4524 20.0352 30.7781 20.0352 39.8123C20.0352 45.021 22.9657 49.6421 27.5113 52.6322L24.9299 57.8086L31.9619 54.7884C33.4698 55.3254 35.0368 55.7676 36.7104 55.9734C36.4817 54.975 36.3517 53.9515 36.3517 52.901C36.3517 43.8797 45.1327 36.5403 55.9308 36.5403ZM46.1415 30.8139C47.4928 30.8139 48.5887 31.9132 48.5887 33.2682C48.5887 34.6237 47.4929 35.7222 46.1415 35.7222C44.7895 35.7222 43.694 34.6237 43.694 33.2682C43.694 31.9131 44.7895 30.8139 46.1415 30.8139ZM33.0882 35.7222C31.7367 35.7222 30.6408 34.6237 30.6408 33.2682C30.6408 31.9132 31.7368 30.8139 33.0882 30.8139C34.4396 30.8139 35.5357 31.9132 35.5357 33.2682C35.5356 34.6237 34.4395 35.7222 33.0882 35.7222Z" fill="#51C332"/>
      <path d="M72.2473 52.9008C72.2473 45.6724 64.9403 39.8123 55.9308 39.8123C46.921 39.8123 39.615 45.6724 39.615 52.9008C39.615 60.1287 46.921 65.9889 55.9308 65.9889C57.4125 65.9889 58.8219 65.7794 60.1894 65.4821L68.9841 69.2608L65.9424 63.1654C69.7542 60.7698 72.2473 57.0859 72.2473 52.9008ZM51.0361 52.0827C49.6847 52.0827 48.5886 50.9838 48.5886 49.6281C48.5886 48.2731 49.6846 47.1746 51.0361 47.1746C52.388 47.1746 53.4834 48.2736 53.4834 49.6281C53.4834 50.9839 52.3877 52.0827 51.0361 52.0827ZM60.8257 52.0827C59.4736 52.0827 58.3784 50.9838 58.3784 49.6281C58.3784 48.2731 59.4735 47.1746 60.8257 47.1746C62.1777 47.1746 63.2732 48.2736 63.2732 49.6281C63.2732 50.9839 62.1777 52.0827 60.8257 52.0827Z" fill="#51C332"/>
      </svg>
      
      <svg class="cursor-pointer rounded-md shadow-md shadow-transparent transition-all duration-300 hover:shadow-violet-200" xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 92 93" fill="none">
      <rect x="0.138672" y="1" width="91.5618" height="91.5618" rx="15" fill="#F9F1FF"/>
      <path d="M35.4663 64.818C35.4663 64.0512 35.4663 63.2844 35.4663 62.5176C35.4717 62.4862 35.4706 62.4541 35.463 62.4232C35.4554 62.3923 35.4415 62.3632 35.4221 62.3379C35.4027 62.3125 35.3783 62.2913 35.3503 62.2757C35.3223 62.26 35.2914 62.2503 35.2595 62.2469C33.3396 61.707 31.5676 60.7451 30.0755 59.4329C28.9883 58.4538 28.0831 57.2935 27.4011 56.0047C26.4398 54.143 25.8001 52.1352 25.5084 50.0644C25.147 47.4669 25.0214 44.8424 25.1333 42.2227C25.1579 41.0013 25.2209 39.7938 25.3611 38.5724C25.5847 36.2515 26.1762 33.9798 27.1137 31.841C28.2713 29.2112 30.3715 27.0989 33.0092 25.9111C34.806 25.0971 36.6963 24.5029 38.6384 24.1415C40.5428 23.7844 42.471 23.5652 44.4077 23.4857C46.1534 23.4246 47.9011 23.4501 49.6443 23.5621C52.1391 23.6663 54.6114 24.0754 57.0049 24.78C58.7795 25.2864 60.4677 26.0524 62.0137 27.0527C63.5199 28.0763 64.7382 29.4627 65.5538 31.0811C66.5126 32.9714 67.1644 34.9996 67.4851 37.0908C67.6934 38.3324 67.8304 39.5847 67.8952 40.8417C67.9863 42.3996 67.9758 43.9645 67.9162 45.5155C67.8566 47.0665 67.7234 48.5724 67.5307 50.0922C67.287 52.3732 66.5787 54.5817 65.4486 56.5842C63.9777 59.1174 61.6214 61.0303 58.8241 61.9624C56.9113 62.6255 54.9363 63.0974 52.9285 63.3711C51.4599 63.5724 49.9878 63.7181 48.5086 63.7771C47.3765 63.8292 46.2444 63.8153 45.1122 63.7979C44.4708 63.7979 43.8329 63.7355 43.1949 63.6799C43.1323 63.6683 43.0676 63.6752 43.009 63.6999C42.9503 63.7246 42.9004 63.766 42.8655 63.8187C41.5756 65.3524 40.2367 66.8444 38.8872 68.3295C38.6414 68.6004 38.3568 68.8342 38.0425 69.0234C37.8362 69.1574 37.6009 69.2415 37.3557 69.2689C37.1105 69.2963 36.8622 69.2663 36.6309 69.1811C36.3996 69.096 36.1918 68.9583 36.0242 68.779C35.8566 68.5997 35.7339 68.3839 35.6661 68.1491C35.5325 67.7317 35.4662 67.2961 35.4698 66.8583C35.4663 66.1713 35.4663 65.4947 35.4663 64.818ZM37.026 67.7292L37.1908 67.5765L40.1175 64.36C41.2438 63.1225 42.3689 61.8837 43.4929 60.6439C43.5481 60.5682 43.6227 60.5085 43.7089 60.4707C43.7951 60.4329 43.8899 60.4184 43.9836 60.4287C44.3656 60.4669 44.7477 60.4808 45.1332 60.4843C46.4652 60.4843 47.7971 60.4843 49.129 60.3906C50.3383 60.2969 51.544 60.1512 52.7428 59.9638C54.0334 59.7414 55.3111 59.4506 56.5703 59.0929C59.3744 58.3469 61.544 56.7507 62.9075 54.1657C63.7124 52.5764 64.2173 50.8549 64.3971 49.0859C64.6102 47.4187 64.7377 45.7417 64.7792 44.0617C64.8413 41.9511 64.6957 39.8396 64.3445 37.757C64.101 36.2482 63.6628 34.7765 63.0407 33.3781C62.2485 31.6432 61.1269 30.2067 59.3989 29.2838C56.7491 27.8681 53.8819 27.2366 50.9271 26.9139C50.0894 26.8237 49.2517 26.7751 48.4105 26.7439C46.688 26.656 44.9619 26.6652 43.2405 26.7716C42.0025 26.8626 40.7712 27.0271 39.5532 27.2643C37.7619 27.5876 36.0291 28.1723 34.4112 28.9992C33.4733 29.4684 32.6224 30.0913 31.8946 30.8417C30.715 32.1468 29.8498 33.6998 29.3639 35.3837C28.7876 37.3448 28.473 39.3722 28.4281 41.4142C28.3153 43.4562 28.3411 45.5033 28.5052 47.5419C28.6073 48.7551 28.8125 49.9575 29.1186 51.1366C29.574 52.974 30.4575 54.6804 31.6983 56.1192C33.038 57.5872 34.7694 58.6505 36.693 59.1866C36.9349 59.2594 37.0435 59.3427 37.0435 59.6133C37.0225 60.6126 37.0435 61.6119 37.0435 62.6112L37.026 67.7292Z" fill="#754A91"/>
      <path d="M34.5732 36.7373C34.5487 35.9774 34.9658 35.4257 35.4705 34.9295C36.1362 34.2982 36.8696 33.7409 37.6577 33.2675C38.017 33.0481 38.4443 32.9645 38.861 33.0321C39.2776 33.0996 39.6556 33.3138 39.9254 33.6353C40.8789 34.6275 41.7324 35.7094 42.4736 36.8657C42.8407 37.3858 43.1179 37.9627 43.2938 38.5728C43.3641 38.8109 43.3687 39.0633 43.3071 39.3037C43.2454 39.5442 43.1198 39.7638 42.9433 39.9399C42.539 40.3328 42.108 40.698 41.6534 41.0329C41.4244 41.2136 41.2541 41.457 41.1637 41.7328C41.0734 42.0085 41.0669 42.3045 41.1452 42.5839C41.4259 43.8958 42.062 45.1072 42.9854 46.0884C44.1073 47.4443 45.5529 48.5021 47.1915 49.1661C47.5941 49.3711 48.0554 49.4335 48.4988 49.3431C48.7417 49.2775 48.9575 49.1379 49.1157 48.9441C49.3611 48.6352 49.6275 48.3368 49.8483 48.0072C50.1347 47.596 50.572 47.3119 51.067 47.2153C51.562 47.1187 52.0756 47.2174 52.4981 47.4902C53.6863 48.1726 54.808 48.9625 55.849 49.8497C56.0943 50.0579 56.3502 50.2591 56.5956 50.4708C56.8859 50.69 57.0955 50.9974 57.1924 51.3458C57.2893 51.6943 57.268 52.0646 57.1318 52.4C56.9153 52.9639 56.5996 53.4855 56.1995 53.9406C55.7022 54.6247 55.0688 55.201 54.3383 55.6338C53.9891 55.8369 53.5967 55.9561 53.1925 55.982C52.7884 56.0079 52.3837 55.9398 52.0109 55.783C49.1751 54.6528 46.5253 53.1103 44.1491 51.2064C41.8248 49.3123 39.7937 47.0911 38.1203 44.6137C36.7123 42.5629 35.5921 40.3322 34.7905 37.9829C34.7052 37.6988 34.635 37.4104 34.5802 37.119C34.5646 36.9923 34.5623 36.8644 34.5732 36.7373Z" fill="#754A91"/>
      <path d="M46.6744 33.0453C49.0471 33.0887 51.3291 33.9551 53.1226 35.4934C54.9161 37.0317 56.1073 39.1444 56.4886 41.463C56.6421 42.3061 56.7242 43.1603 56.734 44.0168C56.734 44.2181 56.6814 44.3638 56.4641 44.3846C56.2468 44.4054 56.1907 44.2215 56.1907 44.0376C56.2233 42.3051 55.864 40.5872 55.1392 39.0099C54.5288 37.7138 53.6246 36.5746 52.4969 35.6809C51.3692 34.7872 50.0484 34.1631 48.6373 33.8572C47.8912 33.6862 47.1283 33.5978 46.3625 33.5935C46.2879 33.5948 46.2135 33.5855 46.1417 33.5658C46.0805 33.5487 46.0284 33.5088 45.9963 33.4544C45.9643 33.4 45.9548 33.3355 45.9699 33.2743C45.9704 33.2453 45.9766 33.2167 45.9884 33.1901C46.0001 33.1635 46.0171 33.1395 46.0383 33.1195C46.0595 33.0995 46.0845 33.0838 46.1119 33.0735C46.1393 33.0631 46.1685 33.0583 46.1977 33.0592C46.3555 33.0384 46.5167 33.0453 46.6744 33.0453Z" fill="#754A91"/>
      <path d="M53.4406 42.4553C53.4288 41.4913 53.189 40.5435 52.7404 39.6879C52.2918 38.8322 51.6469 38.0925 50.8574 37.5282C49.9359 36.8874 48.8647 36.4898 47.7449 36.3727C47.5556 36.3485 47.3663 36.338 47.1735 36.3172C46.9807 36.2964 46.8651 36.2166 46.8826 36.0223C46.9001 35.828 47.0228 35.7586 47.2331 35.7725C50.3386 35.9598 52.9814 37.6982 53.7946 40.9355C53.9433 41.5598 54.0175 42.1991 54.0154 42.8405C54.0154 42.8994 54.0154 42.9584 54.0154 43.0139C54.0154 43.1874 53.9033 43.3019 53.7315 43.2985C53.6934 43.2972 53.656 43.2883 53.6215 43.2722C53.587 43.2561 53.5562 43.2333 53.531 43.205C53.5057 43.1768 53.4865 43.1437 53.4746 43.1079C53.4627 43.072 53.4583 43.0342 53.4616 42.9966C53.4336 42.8335 53.4406 42.667 53.4406 42.4553Z" fill="#754A91"/>
      <path d="M47.9996 38.5898C49.7031 38.7043 50.8913 39.5301 51.2173 41.324C51.2568 41.5538 51.2849 41.7854 51.3014 42.018C51.3014 42.2053 51.2593 42.3649 51.0525 42.3649C50.8457 42.3649 50.7756 42.2262 50.7686 42.018C50.7667 41.3303 50.5527 40.6597 50.1552 40.0957C49.7376 39.5849 49.1379 39.2521 48.4798 39.1658C48.3327 39.1385 48.184 39.12 48.0347 39.1103C47.7893 39.1103 47.6526 38.9888 47.6842 38.8015C47.7157 38.6141 47.8629 38.5794 47.9996 38.5898Z" fill="#754A91"/>
      </svg>
      
      <button class="w-12 h-12 flex items-center justify-center bg-gray-100 cursor-pointer rounded-md shadow-md shadow-transparent transition-all duration-300 hover:shadow-blue-200" >
      <svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 50 51" fill="none">
      <path d="M29.3522 14.6735C29.3522 18.5324 27.8124 22.2333 25.0717 24.9619C22.3309 27.6906 18.6136 29.2235 14.7376 29.2235C10.8616 29.2235 7.14432 27.6906 4.40356 24.9619C1.66279 22.2333 0.123047 18.5324 0.123047 14.6735C0.123047 10.8146 1.66279 7.11378 4.40356 4.38513C7.14432 1.65648 10.8616 0.123535 14.7376 0.123535C18.6136 0.123535 22.3309 1.65648 25.0717 4.38513C27.8124 7.11378 29.3522 10.8146 29.3522 14.6735Z" fill="url(#paint0_linear_7092_54245)"/>
      <path d="M49.7196 35.5684C49.7196 37.4798 49.3415 39.3725 48.6068 41.1384C47.8721 42.9043 46.7952 44.5088 45.4376 45.8604C44.0801 47.2119 42.4684 48.284 40.6947 49.0155C38.921 49.747 37.0199 50.1234 35.1 50.1234C31.2227 50.1234 27.5041 48.59 24.7624 45.8604C22.0207 43.1308 20.4805 39.4287 20.4805 35.5684C20.4805 31.7082 22.0207 28.0061 24.7624 25.2765C27.5041 22.5469 31.2227 21.0134 35.1 21.0134C37.0199 21.0134 38.921 21.3899 40.6947 22.1214C42.4684 22.8528 44.0801 23.9249 45.4376 25.2765C46.7952 26.628 47.8721 28.2326 48.6068 29.9985C49.3415 31.7644 49.7196 33.657 49.7196 35.5684Z" fill="url(#paint1_linear_7092_54245)"/>
      <path opacity="0.05" fill-rule="evenodd" clip-rule="evenodd" d="M0.176758 15.9184C0.40376 18.6676 1.40597 21.2962 3.06724 23.4996C4.72852 25.7031 6.98086 27.3913 9.56328 28.3685C12.1457 29.3458 14.9525 29.5721 17.6584 29.0212C20.3643 28.4704 22.8585 27.1649 24.8521 25.2561C26.8457 23.3473 28.257 20.9133 28.9225 18.2361C29.5879 15.559 29.4804 12.7482 28.6122 10.1297C27.744 7.51107 26.1508 5.1918 24.0171 3.44061C21.8835 1.68942 19.2967 0.57799 16.5566 0.235107C12.8361 1.47829 9.43753 3.52951 6.60533 6.24127C3.77313 8.95304 1.57765 12.258 0.176758 15.9184Z" fill="black"/>
      <path opacity="0.05" fill-rule="evenodd" clip-rule="evenodd" d="M49.6811 34.5236C49.4902 31.741 48.5055 29.0712 46.8434 26.83C45.1813 24.5889 42.9113 22.8701 40.302 21.877C37.6928 20.884 34.8534 20.6582 32.1197 21.2263C29.386 21.7945 26.8724 23.1329 24.8762 25.0831C22.88 27.0333 21.4848 29.5139 20.8555 32.2313C20.2263 34.9487 20.3893 37.7893 21.3254 40.417C22.2615 43.0447 23.9315 45.3497 26.1377 47.0592C28.344 48.7688 30.9943 49.8113 33.7751 50.0636C37.394 48.7765 40.6902 46.7204 43.4363 44.0372C46.1824 41.354 48.313 38.1076 49.6811 34.522V34.5236Z" fill="black"/>
      <path opacity="0.1" fill-rule="evenodd" clip-rule="evenodd" d="M0.860352 19.2453C1.62798 21.5909 2.97863 23.7038 4.78599 25.3863C6.59336 27.0687 8.79838 28.2658 11.1948 28.8656C13.5913 29.4654 16.1009 29.4483 18.4889 28.8158C20.877 28.1834 23.0654 26.9563 24.8496 25.2493C26.6337 23.5423 27.9554 21.4112 28.6908 19.0553C29.4263 16.6994 29.5516 14.1957 29.0549 11.7783C28.5583 9.36083 27.456 7.10872 25.8511 5.23255C24.2462 3.35637 22.1911 1.91743 19.8781 1.05029C15.32 1.99885 11.1204 4.2075 7.75796 7.42448C4.3955 10.6415 2.00549 14.7374 0.860352 19.2453Z" fill="black"/>
      <path opacity="0.1" fill-rule="evenodd" clip-rule="evenodd" d="M49.0178 31.1034C48.2615 28.73 46.9097 26.5895 45.0911 24.8854C43.2726 23.1813 41.0477 21.9703 38.6282 21.3678C36.2088 20.7653 33.6752 20.7913 31.2686 21.4432C28.8621 22.0951 26.6625 23.3513 24.8793 25.0923C23.0961 26.8333 21.7885 29.0011 21.081 31.3894C20.3735 33.7778 20.2896 36.3073 20.8374 38.7372C21.3851 41.1671 22.5462 43.4166 24.2101 45.2717C25.8741 47.1267 27.9856 48.5255 30.3437 49.3351C34.8435 48.3264 38.9734 46.0868 42.2714 42.8669C45.5694 39.647 47.9054 35.574 49.0178 31.1034Z" fill="black"/>
      <path opacity="0.1" fill-rule="evenodd" clip-rule="evenodd" d="M1.39746 20.6252C2.34836 22.7654 3.80103 24.6456 5.63274 26.1068C7.46445 27.568 9.62136 28.5673 11.9212 29.0202C14.2211 29.4732 16.5963 29.3665 18.8462 28.7092C21.0961 28.0519 23.1545 26.8633 24.8475 25.2438C26.5406 23.6243 27.8185 21.6215 28.5733 19.4047C29.328 17.1878 29.5375 14.8221 29.184 12.5073C28.8304 10.1926 27.9243 7.99684 26.5421 6.10565C25.1599 4.21446 23.3423 2.6834 21.2428 1.64185C16.3875 2.39676 11.881 4.62188 8.33208 8.01668C4.78311 11.4115 2.36261 15.8124 1.39746 20.6252Z" fill="black"/>
      <path opacity="0.1" fill-rule="evenodd" clip-rule="evenodd" d="M48.4788 29.6951C47.5328 27.53 46.0747 25.6268 44.2299 24.1487C42.385 22.6707 40.2086 21.6621 37.8874 21.2097C35.5663 20.7572 33.1699 20.8743 30.9041 21.551C28.6383 22.2277 26.5708 23.4437 24.8792 25.0946C23.1877 26.7455 21.9226 28.7818 21.1927 31.0288C20.4628 33.2758 20.2899 35.6661 20.6889 37.9946C21.0878 40.323 22.0467 42.5199 23.4831 44.3965C24.9195 46.2731 26.7905 47.7734 28.9354 48.7684C33.7482 47.9515 38.1973 45.6882 41.6891 42.2804C45.1809 38.8726 47.5494 34.4823 48.4788 29.6951Z" fill="black"/>
      <path d="M48.0711 25.2318C48.0711 28.2581 47.4724 31.2548 46.3092 34.0507C45.1459 36.8467 43.4409 39.3871 41.2914 41.527C39.142 43.667 36.5903 45.3645 33.7819 46.5226C30.9735 47.6807 27.9635 48.2768 24.9238 48.2768C21.884 48.2768 18.874 47.6807 16.0656 46.5226C13.2573 45.3645 10.7055 43.667 8.55608 41.527C6.40665 39.3871 4.70162 36.8467 3.53836 34.0507C2.37509 31.2548 1.77637 28.2581 1.77637 25.2318C1.77637 22.2055 2.37509 19.2088 3.53836 16.4128C4.70162 13.6169 6.40665 11.0764 8.55608 8.93649C10.7055 6.79657 13.2573 5.09908 16.0656 3.94096C18.874 2.78284 21.884 2.18677 24.9238 2.18677C27.9635 2.18677 30.9735 2.78284 33.7819 3.94096C36.5903 5.09908 39.142 6.79657 41.2914 8.93649C43.4409 11.0764 45.1459 13.6169 46.3092 16.4128C47.4724 19.2088 48.0711 22.2055 48.0711 25.2318Z" fill="url(#paint2_linear_7092_54245)"/>
      <path fill-rule="evenodd" clip-rule="evenodd" d="M18.4151 24.4319C17.4797 23.8169 16.6991 22.9944 16.1343 22.0286C15.5889 21.0081 15.3197 19.8631 15.3534 18.7069C15.3121 17.2395 15.8134 15.8084 16.7616 14.6869C17.7471 13.5607 19.0136 12.7153 20.4324 12.2369C21.9754 11.6924 23.6012 11.4189 25.2377 11.4286C26.3084 11.4185 27.378 11.5004 28.4346 11.6736C29.1909 11.7902 29.9337 11.9817 30.6521 12.2452C31.3117 12.4683 31.9072 12.848 32.3873 13.3519C32.7411 13.7665 32.9315 14.2956 32.9229 14.8402C32.9355 15.1232 32.8922 15.4059 32.7954 15.6721C32.6987 15.9383 32.5504 16.1829 32.359 16.3919C32.1778 16.5845 31.958 16.7366 31.7139 16.8383C31.4697 16.94 31.2068 16.9889 30.9424 16.9819C30.5786 16.9789 30.2196 16.8982 29.8895 16.7452C29.0761 16.3815 28.2381 16.0752 27.3818 15.8286C26.5935 15.6209 25.7809 15.52 24.9657 15.5286C23.9033 15.4895 22.8522 15.7581 21.939 16.3019C21.5537 16.5358 21.2383 16.8688 21.0258 17.266C20.8133 17.6633 20.7115 18.1102 20.731 18.5602C20.7254 19.151 20.9505 19.7208 21.3584 20.1486C21.8431 20.6511 22.416 21.0607 23.0486 21.3569C23.7572 21.708 24.8139 22.1736 26.2188 22.7536C26.3744 22.8028 26.5261 22.8635 26.6726 22.9352C28.0436 23.477 29.3581 24.1519 30.597 24.9502C31.5755 25.5875 32.4006 26.4333 33.013 27.4269C33.6161 28.4712 33.9181 29.6618 33.8857 30.8669C33.9363 32.3425 33.513 33.7955 32.6776 35.0136C31.827 36.1668 30.6503 37.0393 29.2989 37.5186C27.6702 38.0998 25.9491 38.38 24.2199 38.3452C21.8437 38.4283 19.4788 37.9814 17.2972 37.0369C16.7395 36.7888 16.2505 36.409 15.8723 35.9302C15.5583 35.4915 15.3955 34.9627 15.4085 34.4236C15.3929 34.1392 15.4393 33.8548 15.5444 33.5901C15.6495 33.3254 15.8109 33.0866 16.0175 32.8902C16.4504 32.5115 17.0125 32.3134 17.5875 32.3369C18.2282 32.3456 18.8576 32.5073 19.4229 32.8086C20.1259 33.1597 20.6804 33.423 21.0864 33.5986C21.5501 33.7925 22.0304 33.9442 22.5214 34.0519C23.1268 34.1846 23.7453 34.2483 24.3651 34.2419C25.4611 34.3201 26.5518 34.0297 27.4635 33.4169C27.8048 33.1501 28.0776 32.806 28.2592 32.413C28.4408 32.02 28.5261 31.5894 28.508 31.1569C28.509 30.5436 28.275 29.9532 27.854 29.5069C27.2975 28.9331 26.6461 28.4595 25.9285 28.1069C25.0798 27.6602 23.8862 27.1158 22.3478 26.4736C20.972 25.9259 19.6545 25.2419 18.4151 24.4319Z" fill="white"/>
      <defs>
        <linearGradient id="paint0_linear_7092_54245" x1="12.4584" y1="0.300202" x2="17.0069" y2="29.0484" 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_54245" x1="22.446" y1="42.8651" x2="47.7384" y2="28.2474" 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_54245" x1="15.8904" y1="9.6051" x2="38.9459" y2="49.5823" gradientUnits="userSpaceOnUse">
          <stop stop-color="#00B7F0"/>
          <stop offset="1" stop-color="#007CC1"/>
        </linearGradient>
      </defs>
      </svg>
      </button>
      
      <button class="w-12 h-12 flex items-center justify-center bg-gray-100 cursor-pointer rounded-md shadow-md shadow-transparent transition-all duration-300 hover:shadow-blue-200" >
      <svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 54 41" fill="none">
      <path
        d="M4.00654 40.1236H12.4893V19.5227L0.371094 10.4341V36.4881C0.371094 38.4997 2.00099 40.1236 4.00654 40.1236Z"
        fill="#4285F4" />
      <path
        d="M41.5732 40.1236H50.056C52.0676 40.1236 53.6914 38.4937 53.6914 36.4881V10.4341L41.5732 19.5227"
        fill="#34A853" />
      <path
        d="M41.5732 3.7693V19.5229L53.6914 10.4343V5.58702C53.6914 1.09118 48.5594 -1.47181 44.9663 1.22448"
        fill="#FBBC04" />
      <path d="M12.4893 19.5227V3.76904L27.0311 14.6754L41.5729 3.76904V19.5227L27.0311 30.429"
        fill="#EA4335" />
      <path
        d="M0.371094 5.58702V10.4343L12.4893 19.5229V3.7693L9.09617 1.22448C5.49708 -1.47181 0.371094 1.09118 0.371094 5.58702Z"
        fill="#C5221F" />
      </svg>
      </button>
      
      <svg class="cursor-pointer rounded-md shadow-md shadow-transparent transition-all duration-300 hover:shadow-red-200" xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 92 93" fill="none">
      <rect x="0.138672" y="1" width="91.5618" height="91.5618" rx="15" fill="#FFECE8"/>
      <path d="M71.2471 33.8708C70.6493 31.6234 68.8809 29.8504 66.6309 29.2428C62.5626 28.1523 46.2396 28.1523 46.2396 28.1523C46.2396 28.1523 29.925 28.1523 25.8484 29.2428C23.6067 29.8421 21.8383 31.615 21.2322 33.8708C20.1445 37.9495 20.1445 46.4647 20.1445 46.4647C20.1445 46.4647 20.1445 54.98 21.2322 59.0586C21.83 61.306 23.5984 63.079 25.8484 63.6866C29.925 64.7771 46.2396 64.7771 46.2396 64.7771C46.2396 64.7771 62.5626 64.7771 66.6309 63.6866C68.8726 63.0873 70.641 61.3144 71.2471 59.0586C72.3348 54.98 72.3348 46.4647 72.3348 46.4647C72.3348 46.4647 72.3348 37.9495 71.2471 33.8708Z" fill="#FF3000"/>
      <path d="M41.0256 54.314L54.5838 46.4647L41.0256 38.6154V54.314Z" fill="white"/>
      </svg>
      
      
      </div>

Related Examples

Social Media Icons
Social Media Icons

Aman kumar

2 years ago

3.5k
Social Media Icons
Social Media Icons

Aman kumar

2 years ago

2.9k
Social Media Icons
Social Media Icons

Aman kumar

2 years ago

3.4k
Social Media Icons
Social Media Icons

Sedat Kumcu

1 year ago

2.6k
Modern Responsive Footer with Tailwind CSS
This sleek and modern responsive footer is built using HTML and Tailwind CSS. It features three sections: brand information, useful links, and social media icons. The footer includes smooth hover effects, subtle fade-in animations, and a fully responsive design that adapts seamlessly to different screen sizes. Perfect for websites looking for a professional and stylish footer section.

Ayyamperumal S

1 year ago

2.7k
Logo grid

ariaw

1 year ago

720
Sponsors section with icon

Sienna

3 years ago

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

Anonymous

1 year ago

866
Tailwind CSS Blog sharing buttons with blog details
Introducing our Blog Sharing Buttons with Blog Details component, designed to enhance the social sharing experience on your blog posts.

Abid Ullah

2 years ago

2.4k
Company Logos Showcase
Client showcase with icons

Brandon D

4 years ago

13.4k
Modern Dark Footer with Overlapping Gradient CTA
A comprehensive, dark-themed website footer component built with HTML and Tailwind CSS. It features a visually distinct overlapping section with a colorful gradient background containing a prominent call-to-action (CTA) block. The main footer area utilizes a multi-column grid layout for organized navigation links, a newsletter signup form, and social media icons. A final bottom bar includes legal links and copyright information. The design is responsive and adapts its layout for different screen sizes.

Hamza Atig

1 year ago

1.3k
Continue with Discord button
Login with the Discord button for social login

Anonymous

2 years ago

3.6k

Browse by topic

Explore components by Tags

Jump straight to the UI pattern you need.

Footer Header Card Article Avatar FAQ Banner Blog Breadcrumb Button Call to Action Form Carousel Contact us Error page Feature Gallery Hero Input Spinner Login Modal Pagination Pricing Profile

Can't find it?

Didn't find the component you were looking for?

Search across 3,000+ community-built components and grab the code in seconds.