Components

Tailwind CSS card

In CSS tailwind card components are very important tools for representing information in a visually appealing and user friendly manner. Cards help you put different things together and increase usability of the page with ease.

image

Cards generally work to group different things viz. items, products and functions. It is essential to understand that cards should not only look good but enhance the interface too.

Default Card

following is simple tailwind card example with title and description

Fast Transaction

Provides faster transaction, so money arrives in realtime 

  <div class="relative max-w-xs border border-solid border-gray-200 rounded-2xl p-4 transition-all duration-500 col-span-12  xl:p-7   lg:col-span-3 md:col-span-6 ">
<div class=" mb-6 ">
<svg width="26" height="26" viewBox="0 0 26 26" fill="none" xmlns="http://www.w3.org/2000/svg">
  <path d="M8.66699 12.8162L11.3501 15.4993C11.5616 15.7107 11.9043 15.7109 12.1158 15.4997L17.8753 9.75033M13.0003 23.8337C7.01724 23.8337 2.16699 18.9834 2.16699 13.0003C2.16699 7.01724 7.01724 2.16699 13.0003 2.16699C18.9834 2.16699 23.8337 7.01724 23.8337 13.0003C23.8337 18.9834 18.9834 23.8337 13.0003 23.8337Z" stroke="#4F46E5" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
</svg>
</div>
<h4 class="text-base font-semibold text-gray-900 mb-2 capitalize transition-all duration-500 ">Fast Transaction</h4>
<p class="text-sm font-normal text-gray-500 transition-all duration-500 leading-5 "> Provides faster transaction, so money arrives in realtime </p>
</div>

Here, instead of a button a link can be used inside the card to make it work as call to action (CTA). Following are tailwind card design with cta.

Fast Transaction

Provides faster transaction, so money arrives in realtime

Read More 
  <div class="relative max-w-xs border border-solid border-gray-200 rounded-2xl p-4 transition-all duration-500 col-span-12  xl:p-7   lg:col-span-3 md:col-span-6 ">
<div class=" mb-6 ">
<svg width="26" height="26" viewBox="0 0 26 26" fill="none" xmlns="http://www.w3.org/2000/svg">
  <path d="M8.66699 12.8162L11.3501 15.4993C11.5616 15.7107 11.9043 15.7109 12.1158 15.4997L17.8753 9.75033M13.0003 23.8337C7.01724 23.8337 2.16699 18.9834 2.16699 13.0003C2.16699 7.01724 7.01724 2.16699 13.0003 2.16699C18.9834 2.16699 23.8337 7.01724 23.8337 13.0003C23.8337 18.9834 18.9834 23.8337 13.0003 23.8337Z" stroke="#4F46E5" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
</svg>
</div>
<h4 class="text-base font-semibold text-gray-900 mb-2 capitalize transition-all duration-500 ">Fast Transaction</h4>
<p class="text-sm font-normal text-gray-500 transition-all duration-500 leading-5 mb-4"> Provides faster transaction, so money arrives in realtime </p>
<a href="javascript:;" class="group flex items-center gap-2 text-sm font-semibold text-indigo-600 transition-all duration-500 ">Read More <svg class="transition-all duration-500  group-hover:translate-x-1" width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
  <path d="M2.25 9L14.25 9M10.5 13.5L14.4697 9.53033C14.7197 9.28033 14.8447 9.15533 14.8447 9C14.8447 8.84467 14.7197 8.71967 14.4697 8.46967L10.5 4.5" stroke="#4F46E5" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"></path>
</svg>
</a>
</div>

Card with Button

By using the following tailwind css card example you can add an action button also.

Fast Transaction

Provides faster transaction, so money arrives in realtime 

  <div class="relative max-w-xs border border-solid border-gray-200 rounded-2xl p-4 transition-all duration-500 col-span-12  xl:p-7   lg:col-span-3 md:col-span-6 ">
<div class=" mb-6 ">
<svg width="26" height="26" viewBox="0 0 26 26" fill="none" xmlns="http://www.w3.org/2000/svg">
  <path d="M8.66699 12.8162L11.3501 15.4993C11.5616 15.7107 11.9043 15.7109 12.1158 15.4997L17.8753 9.75033M13.0003 23.8337C7.01724 23.8337 2.16699 18.9834 2.16699 13.0003C2.16699 7.01724 7.01724 2.16699 13.0003 2.16699C18.9834 2.16699 23.8337 7.01724 23.8337 13.0003C23.8337 18.9834 18.9834 23.8337 13.0003 23.8337Z" stroke="#4F46E5" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
</svg>
</div>
<h4 class="text-base font-semibold text-gray-900 mb-2 capitalize transition-all duration-500 ">Fast Transaction</h4>
<p class="text-sm font-normal text-gray-500 transition-all duration-500 leading-5 mb-5"> Provides faster transaction, so money arrives in realtime </p>
<button class="bg-indigo-600 shadow-sm rounded-full py-2 px-5 text-xs text-white font-semibold">Read More</button>
</div>

Card with Image

This type is popular when it comes to blogs, here one can add image in the card. It has other use cases other than blog as well.You can also use this as a tailwind product card.

Card image

Fast Transaction

Provides faster transaction, so money arrives in realtime 

  <div class="relative max-w-xs border border-solid border-gray-200 rounded-2xl transition-all duration-500 ">
<div class="block overflow-hidden">
<img src="https://pagedone.io/asset/uploads/1695365240.png" alt="Card image" />
</div>
<div class="p-4">
<h4 class="text-base font-semibold text-gray-900 mb-2 capitalize transition-all duration-500 ">Fast Transaction</h4>
<p class="text-sm font-normal text-gray-500 transition-all duration-500 leading-5 mb-5"> Provides faster transaction, so money arrives in realtime </p>
<button class="bg-indigo-600 shadow-sm rounded-full py-2 px-5 text-xs text-white font-semibold">Read More</button>
</div>
</div>

1000+ Tailwind Blocks

Access over 1,000 ready-made Tailwind blocks with modern designs to accelerate your design process.

Explore More

Horizontal Card

Here in this card all details are shown horizontally.

Card image

Fast Transaction

Provides faster transaction, so money arrives in realtime 

 <div class="relative flex flex-col items-center border border-solid border-gray-200 rounded-2xl transition-all duration-500 md:flex-row md:max-w-lg ">
<div class="block overflow-hidden md:w-52 h-48">
<img src="https://pagedone.io/asset/uploads/1695365240.png" alt="Card image" class="h-full rounded-2xl object-cover" />
</div>
<div class="p-4">
<h4 class="text-base font-semibold text-gray-900 mb-2 capitalize transition-all duration-500 ">Fast Transaction</h4>
<p class="text-sm font-normal text-gray-500 transition-all duration-500 leading-5 mb-5"> Provides faster transaction, so money arrives in realtime </p>
<button class="bg-indigo-600 shadow-sm rounded-full py-2 px-5 text-xs text-white font-semibold">Read More</button>
</div>
</div>

Call to Action card

Call to action cards can be used to show download, subscribe or buy now buttons which encourage users to take certain action.

Download Pagedone

Pagedone is available on iOS & Android.

 <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-4">
<div class="bg-indigo-600 rounded-2xl p-4 xl:p-8">
<h2 class="font-manrope text-4xl text-white text-center font-bold mb-4">Download Pagedone </h2>
<p class="text-lg text-white text-center mb-14">Pagedone is available on iOS &amp; Android.</p>
<div class=" lg:flex-row gap-4  flex-col flex items-center justify-center">
 <a href="javascript:;" class="transition-all duration-500 hover:scale-105">
   <svg width="169" height="56" viewBox="0 0 169 56" fill="none" xmlns="http://www.w3.org/2000/svg">
     <g clip-path="url(#clip0_7904_65920)">
       <path d="M154.727 2.40881e-06H14.2765C13.7645 2.40881e-06 13.2587 2.40894e-06 12.7481 0.00280241C12.3207 0.00560241 11.8967 0.0137364 11.4651 0.0205824C10.5277 0.0316449 9.59238 0.114349 8.66744 0.267976C7.74379 0.424948 6.84908 0.720885 6.01356 1.14578C5.17906 1.57426 4.41656 2.13104 3.75371 2.7959C3.08738 3.45889 2.53195 4.22523 2.10876 5.06543C1.68441 5.90395 1.39016 6.80252 1.23618 7.73007C1.08074 8.65646 0.997092 9.59353 0.985995 10.5329C0.973039 10.9621 0.971671 11.3928 0.964844 11.8221V44.182C0.971671 44.6167 0.973039 45.0379 0.985995 45.4727C0.997096 46.412 1.08074 47.349 1.23618 48.2754C1.38974 49.2035 1.684 50.1025 2.10876 50.9414C2.53176 51.7789 3.08727 52.5421 3.75371 53.2014C4.41405 53.8692 5.17704 54.4264 6.01356 54.8516C6.84907 55.2776 7.74369 55.5753 8.66744 55.7347C9.59254 55.8871 10.5277 55.9698 11.4651 55.9822C11.8967 55.9917 12.3207 55.9972 12.7481 55.9972C13.2587 56 13.7646 56 14.2765 56H154.727C155.229 56 155.739 56 156.241 55.9972C156.666 55.9972 157.102 55.9917 157.528 55.9822C158.464 55.9705 159.397 55.8878 160.32 55.7347C161.247 55.5742 162.145 55.2766 162.984 54.8516C163.82 54.4261 164.582 53.869 165.242 53.2014C165.907 52.5395 166.463 51.7768 166.892 50.9414C167.313 50.1019 167.605 49.2029 167.756 48.2754C167.912 47.3489 167.998 46.4121 168.015 45.4727C168.021 45.0379 168.021 44.6167 168.021 44.182C168.032 43.6734 168.032 43.1676 168.032 42.6507V13.3506C168.032 12.8379 168.032 12.3293 168.021 11.8221C168.021 11.3928 168.021 10.9621 168.015 10.5328C167.998 9.59339 167.912 8.65653 167.756 7.73002C167.604 6.803 167.313 5.90451 166.892 5.06537C166.03 3.38128 164.663 2.01044 162.984 1.14565C162.145 0.721797 161.247 0.425939 160.32 0.26785C159.397 0.113546 158.464 0.0308133 157.528 0.0203864C157.102 0.0135544 156.666 0.00535041 156.241 0.00262041C155.739 -0.000179591 155.229 2.40881e-06 154.727 2.40881e-06Z" fill="black"></path>
       <path d="M12.7549 54.7751C12.3296 54.7751 11.9145 54.7697 11.4924 54.7602C10.6181 54.7487 9.7459 54.6724 8.88286 54.5318C8.07812 54.3928 7.29854 54.1343 6.56983 53.7648C5.84781 53.3983 5.18927 52.9177 4.61944 52.3415C4.04136 51.7721 3.56008 51.1117 3.19467 50.3864C2.82524 49.6564 2.56958 48.874 2.43658 48.0663C2.29295 47.1985 2.21524 46.321 2.20412 45.4413C2.19527 45.1461 2.18368 44.163 2.18368 44.163V11.8222C2.18368 11.8222 2.19602 10.8542 2.20419 10.5699C2.21484 9.69161 2.29209 8.81545 2.43529 7.94896C2.56854 7.13909 2.8244 6.35438 3.19403 5.62202C3.55809 4.89726 4.0367 4.23634 4.6113 3.66489C5.18525 3.08801 5.8459 2.60498 6.56915 2.23343C7.29618 1.86507 8.07429 1.60836 8.8774 1.47191C9.74328 1.32991 10.6185 1.25313 11.4959 1.24223L12.7556 1.22514H156.234L157.509 1.24292C158.378 1.25328 159.245 1.32937 160.103 1.47054C160.915 1.6087 161.701 1.8672 162.436 2.23753C163.885 2.98632 165.064 4.17097 165.808 5.62543C166.171 6.35275 166.423 7.13105 166.555 7.93392C166.7 8.80752 166.781 9.69057 166.798 10.576C166.802 10.9725 166.802 11.3984 166.802 11.8222C166.813 12.3472 166.813 12.8469 166.813 13.3507V42.6509C166.813 43.1595 166.813 43.6558 166.802 44.1561C166.802 44.6114 166.802 45.0285 166.796 45.4577C166.78 46.3274 166.7 47.1946 166.558 48.0526C166.427 48.8661 166.173 49.6547 165.804 50.3906C165.436 51.108 164.957 51.7627 164.386 52.3306C163.815 52.9099 163.156 53.3933 162.432 53.7621C161.699 54.1345 160.914 54.394 160.103 54.5318C159.24 54.6732 158.368 54.7495 157.494 54.7602C157.085 54.7697 156.657 54.7751 156.241 54.7751L154.727 54.7779L12.7549 54.7751Z" fill="white"></path>
       <path d="M35.8621 27.8438C35.8777 26.6286 36.1996 25.4372 36.7978 24.3803C37.396 23.3234 38.251 22.4354 39.2834 21.799C38.6276 20.8597 37.7624 20.0867 36.7565 19.5415C35.7506 18.9962 34.6318 18.6936 33.4889 18.6577C31.0509 18.4011 28.6874 20.1206 27.4451 20.1206C26.1787 20.1206 24.2659 18.6832 22.2061 18.7257C20.8738 18.7688 19.5754 19.1573 18.4373 19.8533C17.2993 20.5493 16.3604 21.529 15.7122 22.6971C12.9044 27.5719 14.9988 34.7362 17.6885 38.6767C19.0342 40.6062 20.6069 42.7615 22.6648 42.6851C24.6786 42.6013 25.4307 41.3974 27.8615 41.3974C30.2697 41.3974 30.9753 42.6851 33.075 42.6365C35.2359 42.6013 36.5973 40.6984 37.8958 38.7506C38.8627 37.3757 39.6067 35.8562 40.1003 34.2483C38.8449 33.7159 37.7736 32.8247 37.0199 31.6857C36.2662 30.5468 35.8635 29.2106 35.8621 27.8438Z" fill="black"></path>
       <path d="M31.8962 16.0662C33.0744 14.6479 33.6549 12.8249 33.5143 10.9844C31.7143 11.174 30.0516 12.0366 28.8575 13.4005C28.2736 14.0668 27.8265 14.842 27.5416 15.6817C27.2566 16.5214 27.1396 17.4091 27.197 18.2942C28.0973 18.3035 28.988 18.1078 29.802 17.7219C30.616 17.336 31.332 16.7699 31.8962 16.0662Z" fill="black"></path>
       <path d="M60.0219 37.9917H53.4134L51.8264 42.6907H49.0273L55.2868 25.3055H58.1949L64.4543 42.6907H61.6075L60.0219 37.9917ZM54.0979 35.8233H59.3361L56.7538 28.1971H56.6815L54.0979 35.8233Z" fill="black"></path>
       <path d="M77.9725 36.3538C77.9725 40.2927 75.8701 42.8233 72.6975 42.8233C71.8938 42.8655 71.0945 42.6798 70.3911 42.2876C69.6878 41.8954 69.1088 41.3125 68.7204 40.6057H68.6604V46.8838H66.0658V30.0155H68.5772V32.1237H68.6249C69.0312 31.4202 69.6199 30.8404 70.3287 30.4458C71.0374 30.0512 71.8395 29.8567 72.6497 29.8829C75.8579 29.8829 77.9725 32.4258 77.9725 36.3538ZM75.3057 36.3538C75.3057 33.7876 73.9832 32.1005 71.9653 32.1005C69.9829 32.1005 68.6495 33.8231 68.6495 36.3538C68.6495 38.9077 69.9829 40.618 71.9653 40.618C73.9832 40.618 75.3057 38.9432 75.3057 36.3538Z" fill="black"></path>
       <path d="M91.8854 36.3538C91.8854 40.2927 89.7823 42.8233 86.6097 42.8233C85.806 42.8655 85.0067 42.6798 84.3033 42.2876C83.6 41.8954 83.021 41.3125 82.6326 40.6057H82.5726V46.8838H79.978V30.0155H82.4894V32.1237H82.5371C82.9433 31.4202 83.5321 30.8404 84.2408 30.4458C84.9496 30.0512 85.7517 29.8567 86.5619 29.8829C89.7701 29.8829 91.8854 32.4258 91.8854 36.3538ZM89.2179 36.3538C89.2179 33.7876 87.8954 32.1005 85.8775 32.1005C83.8951 32.1005 82.5617 33.8231 82.5617 36.3538C82.5617 38.9077 83.8951 40.618 85.8775 40.618C87.8954 40.618 89.2179 38.9432 89.2179 36.3538Z" fill="black"></path>
       <path d="M101.078 37.8468C101.271 39.5708 102.941 40.7028 105.223 40.7028C107.41 40.7028 108.983 39.5707 108.983 38.0162C108.983 36.6668 108.034 35.8588 105.788 35.3051L103.541 34.7623C100.357 33.9912 98.8791 32.4982 98.8791 30.0756C98.8791 27.076 101.486 25.0156 105.186 25.0156C108.851 25.0156 111.362 27.076 111.447 30.0756H108.828C108.671 28.3406 107.241 27.2934 105.151 27.2934C103.061 27.2934 101.63 28.3529 101.63 29.8951C101.63 31.1242 102.544 31.8475 104.779 32.4011L106.689 32.8714C110.246 33.715 111.722 35.1478 111.722 37.6908C111.722 40.9433 109.14 42.9804 105.031 42.9804C101.186 42.9804 98.59 40.9912 98.4223 37.8466L101.078 37.8468Z" fill="black"></path>
       <path d="M117.325 27.0159V30.0155H119.729V32.0759H117.325V39.0636C117.325 40.1491 117.807 40.655 118.863 40.655C119.149 40.65 119.433 40.6299 119.717 40.5948V42.6428C119.242 42.7318 118.759 42.7721 118.276 42.7631C115.716 42.7631 114.718 41.7993 114.718 39.3411V32.0759H112.881V30.0155H114.718V27.0159H117.325Z" fill="black"></path>
       <path d="M121.12 36.3538C121.12 32.3657 123.462 29.8596 127.115 29.8596C130.78 29.8596 133.111 32.3656 133.111 36.3538C133.111 40.3528 130.792 42.8479 127.115 42.8479C123.439 42.8479 121.12 40.3528 121.12 36.3538ZM130.468 36.3538C130.468 33.618 129.217 32.0034 127.115 32.0034C125.013 32.0034 123.762 33.6304 123.762 36.3538C123.762 39.1005 125.013 40.7028 127.115 40.7028C129.217 40.7028 130.468 39.1005 130.468 36.3538Z" fill="black"></path>
       <path d="M135.25 30.0155H137.725V32.1729H137.785C137.952 31.4991 138.346 30.9036 138.899 30.4866C139.453 30.0696 140.133 29.8564 140.825 29.8829C141.124 29.8818 141.422 29.9144 141.714 29.98V32.4135C141.336 32.2979 140.943 32.2448 140.548 32.2563C140.171 32.241 139.795 32.3076 139.447 32.4517C139.098 32.5957 138.784 32.8137 138.527 33.0908C138.271 33.3678 138.077 33.6973 137.959 34.0567C137.841 34.416 137.802 34.7967 137.845 35.1725V42.6907H135.25L135.25 30.0155Z" fill="black"></path>
       <path d="M153.676 38.9679C153.327 41.2688 151.093 42.8479 148.234 42.8479C144.557 42.8479 142.274 40.3774 142.274 36.414C142.274 32.4382 144.569 29.8597 148.125 29.8597C151.622 29.8597 153.821 32.2686 153.821 36.1118V37.0032H144.893V37.1604C144.852 37.6269 144.91 38.0969 145.064 38.539C145.218 38.9812 145.464 39.3855 145.786 39.7251C146.107 40.0646 146.497 40.3317 146.93 40.5085C147.362 40.6854 147.827 40.7679 148.294 40.7507C148.907 40.8083 149.522 40.6659 150.048 40.3447C150.574 40.0235 150.983 39.5406 151.213 38.9679L153.676 38.9679ZM144.906 35.1849H151.225C151.248 34.7654 151.185 34.3457 151.039 33.952C150.893 33.5583 150.667 33.1991 150.376 32.8971C150.085 32.595 149.734 32.3565 149.347 32.1966C148.96 32.0367 148.543 31.9588 148.125 31.9679C147.702 31.9653 147.283 32.0467 146.892 32.2074C146.501 32.368 146.146 32.6047 145.847 32.9038C145.547 33.2029 145.31 33.5584 145.149 33.95C144.987 34.3415 144.905 34.7612 144.906 35.1849Z" fill="black"></path>
       <path d="M53.7747 12.2241C54.3186 12.185 54.8645 12.2674 55.3728 12.4654C55.8811 12.6634 56.3393 12.9721 56.7143 13.3691C57.0893 13.7662 57.3717 14.2418 57.5412 14.7616C57.7107 15.2814 57.7631 15.8324 57.6945 16.3749C57.6945 19.0437 56.2561 20.5777 53.7747 20.5777H50.7656V12.2241H53.7747ZM52.0595 19.3963H53.6301C54.0188 19.4196 54.4078 19.3557 54.7688 19.2093C55.1297 19.0628 55.4536 18.8375 55.7167 18.5497C55.9799 18.2619 56.1757 17.9189 56.29 17.5456C56.4043 17.1723 56.4342 16.7782 56.3774 16.3919C56.43 16.0072 56.3972 15.6155 56.2811 15.2449C56.1651 14.8744 55.9687 14.5342 55.7062 14.2487C55.4436 13.9632 55.1213 13.7395 54.7624 13.5935C54.4035 13.4476 54.0168 13.3831 53.6301 13.4046H52.0595V19.3963Z" fill="black"></path>
       <path d="M59.1565 17.4228C59.117 17.0085 59.1643 16.5905 59.2953 16.1956C59.4263 15.8007 59.6382 15.4376 59.9173 15.1297C60.1965 14.8217 60.5367 14.5756 60.9162 14.4072C61.2958 14.2389 61.7062 14.1519 62.1213 14.1519C62.5363 14.1519 62.9467 14.2389 63.3263 14.4072C63.7058 14.5756 64.0461 14.8217 64.3252 15.1297C64.6044 15.4376 64.8162 15.8007 64.9472 16.1956C65.0783 16.5905 65.1255 17.0085 65.086 17.4228C65.1263 17.8375 65.0796 18.2561 64.9489 18.6516C64.8182 19.0472 64.6065 19.4109 64.3273 19.7195C64.0481 20.0281 63.7075 20.2746 63.3276 20.4434C62.9477 20.6121 62.5368 20.6993 62.1213 20.6993C61.7057 20.6993 61.2948 20.6121 60.9149 20.4434C60.535 20.2746 60.1945 20.0281 59.9152 19.7195C59.636 19.4109 59.4243 19.0472 59.2936 18.6516C59.163 18.2561 59.1163 17.8375 59.1565 17.4228ZM63.8098 17.4228C63.8098 16.0563 63.1977 15.2572 62.1233 15.2572C61.0448 15.2572 60.4382 16.0563 60.4382 17.4228C60.4382 18.8003 61.0449 19.5932 62.1233 19.5932C63.1977 19.5932 63.8098 18.7948 63.8098 17.4228Z" fill="black"></path>
       <path d="M72.9673 20.5775H71.6802L70.3809 15.9346H70.2827L68.9888 20.5775H67.714L65.9812 14.2734H67.2396L68.3658 19.0838H68.4585L69.751 14.2734H70.9412L72.2338 19.0838H72.3319L73.4526 14.2734H74.6933L72.9673 20.5775Z" fill="black"></path>
       <path d="M76.1503 14.2735H77.3447V15.2749H77.4374C77.5947 14.9152 77.8599 14.6137 78.1962 14.4124C78.5325 14.2111 78.9231 14.12 79.3134 14.1518C79.6193 14.1287 79.9265 14.175 80.2121 14.2871C80.4978 14.3992 80.7546 14.5744 80.9636 14.7996C81.1725 15.0247 81.3283 15.2942 81.4193 15.5879C81.5104 15.8817 81.5343 16.1922 81.4894 16.4965V20.5775H80.2487V16.8089C80.2487 15.7958 79.8097 15.292 78.8921 15.292C78.6845 15.2823 78.4771 15.3178 78.2844 15.3959C78.0916 15.4741 77.918 15.5931 77.7754 15.7449C77.6329 15.8966 77.5247 16.0775 77.4583 16.275C77.392 16.4726 77.369 16.6823 77.391 16.8896V20.5776H76.1503L76.1503 14.2735Z" fill="black"></path>
       <path d="M83.4663 11.8125H84.707V20.5775H83.4663V11.8125Z" fill="black"></path>
       <path d="M86.4323 17.4228C86.3928 17.0084 86.4401 16.5904 86.5711 16.1955C86.7022 15.8006 86.9141 15.4375 87.1933 15.1295C87.4724 14.8215 87.8127 14.5755 88.1923 14.4071C88.5718 14.2387 88.9823 14.1517 89.3974 14.1517C89.8124 14.1517 90.2229 14.2387 90.6025 14.4071C90.982 14.5755 91.3223 14.8215 91.6015 15.1295C91.8806 15.4375 92.0925 15.8006 92.2236 16.1955C92.3546 16.5904 92.4019 17.0084 92.3624 17.4228C92.4027 17.8375 92.3559 18.2561 92.2252 18.6516C92.0945 19.0471 91.8827 19.4109 91.6035 19.7194C91.3242 20.028 90.9837 20.2746 90.6038 20.4433C90.2238 20.6121 89.8129 20.6992 89.3974 20.6992C88.9818 20.6992 88.5709 20.6121 88.191 20.4433C87.811 20.2746 87.4705 20.028 87.1912 19.7194C86.912 19.4109 86.7002 19.0471 86.5695 18.6516C86.4388 18.2561 86.3921 17.8375 86.4323 17.4228ZM91.0856 17.4228C91.0856 16.0563 90.4734 15.2571 89.3991 15.2571C88.3206 15.2571 87.7139 16.0563 87.7139 17.4228C87.7139 18.8002 88.3207 19.5932 89.3991 19.5932C90.4734 19.5932 91.0856 18.7947 91.0856 17.4228Z" fill="black"></path>
       <path d="M93.6686 18.7948C93.6686 17.66 94.5112 17.0058 96.0068 16.9128L97.7097 16.8144V16.2703C97.7097 15.6044 97.2707 15.2285 96.4227 15.2285C95.7301 15.2285 95.2501 15.4834 95.1124 15.9291H93.9113C94.0381 14.8463 95.0538 14.1518 96.4799 14.1518C98.056 14.1518 98.945 14.9386 98.945 16.2703V20.5776H97.7506V19.6916H97.6525C97.4532 20.0094 97.1734 20.2685 96.8417 20.4424C96.5099 20.6163 96.1381 20.6988 95.7641 20.6814C95.5002 20.709 95.2335 20.6807 94.9811 20.5986C94.7287 20.5164 94.4964 20.3821 94.2989 20.2043C94.1015 20.0266 93.9434 19.8093 93.8348 19.5665C93.7262 19.3237 93.6696 19.0608 93.6686 18.7948ZM97.7097 18.2561V17.729L96.1745 17.8275C95.3088 17.8856 94.9161 18.1809 94.9161 18.7367C94.9161 19.304 95.4069 19.6342 96.0818 19.6342C96.2796 19.6543 96.4794 19.6343 96.6692 19.5753C96.8591 19.5164 97.0353 19.4198 97.1871 19.2912C97.339 19.1626 97.4635 19.0047 97.5533 18.8269C97.6431 18.6491 97.6963 18.4549 97.7097 18.2561Z" fill="black"></path>
       <path d="M100.576 17.4228C100.576 15.4308 101.597 14.1689 103.186 14.1689C103.579 14.1507 103.969 14.2451 104.31 14.4409C104.651 14.6368 104.93 14.926 105.114 15.2749H105.206V11.8125H106.447V20.5775H105.258V19.5815H105.16C104.962 19.928 104.674 20.2137 104.326 20.4075C103.978 20.6014 103.584 20.6961 103.186 20.6814C101.586 20.6815 100.576 19.4196 100.576 17.4228ZM101.858 17.4228C101.858 18.7599 102.486 19.5645 103.538 19.5645C104.583 19.5645 105.23 18.7483 105.23 17.4282C105.23 16.1144 104.576 15.2865 103.538 15.2865C102.493 15.2865 101.858 16.0966 101.858 17.4228Z" fill="black"></path>
       <path d="M111.58 17.4228C111.54 17.0085 111.587 16.5905 111.718 16.1956C111.849 15.8007 112.061 15.4376 112.34 15.1297C112.62 14.8217 112.96 14.5756 113.339 14.4072C113.719 14.2388 114.129 14.1519 114.544 14.1519C114.959 14.1519 115.37 14.2388 115.749 14.4072C116.129 14.5756 116.469 14.8217 116.748 15.1297C117.027 15.4376 117.239 15.8007 117.37 16.1956C117.501 16.5905 117.549 17.0085 117.509 17.4228C117.549 17.8375 117.503 18.2561 117.372 18.6516C117.241 19.0471 117.03 19.4109 116.75 19.7195C116.471 20.028 116.131 20.2746 115.751 20.4434C115.371 20.6121 114.96 20.6993 114.544 20.6993C114.129 20.6993 113.718 20.6121 113.338 20.4434C112.958 20.2746 112.618 20.028 112.338 19.7195C112.059 19.4109 111.847 19.0471 111.717 18.6516C111.586 18.2561 111.539 17.8375 111.58 17.4228ZM116.233 17.4228C116.233 16.0563 115.621 15.2572 114.546 15.2572C113.468 15.2572 112.861 16.0563 112.861 17.4228C112.861 18.8002 113.468 19.5932 114.546 19.5932C115.621 19.5932 116.233 18.7948 116.233 17.4228Z" fill="black"></path>
       <path d="M119.174 14.2735H120.368V15.2749H120.461C120.618 14.9152 120.883 14.6137 121.22 14.4124C121.556 14.211 121.947 14.1199 122.337 14.1518C122.643 14.1287 122.95 14.175 123.236 14.2871C123.521 14.3992 123.778 14.5744 123.987 14.7995C124.196 15.0247 124.352 15.2942 124.443 15.5879C124.534 15.8817 124.558 16.1922 124.513 16.4965V20.5775H123.272V16.8089C123.272 15.7958 122.833 15.292 121.916 15.292C121.708 15.2823 121.501 15.3178 121.308 15.3959C121.115 15.4741 120.942 15.5931 120.799 15.7449C120.656 15.8966 120.548 16.0774 120.482 16.275C120.416 16.4726 120.393 16.6822 120.415 16.8896V20.5776H119.174V14.2735Z" fill="black"></path>
       <path d="M131.524 12.7039V14.3021H132.886V15.3501H131.524V18.5917C131.524 19.2521 131.795 19.5412 132.413 19.5412C132.571 19.5407 132.729 19.5311 132.886 19.5125V20.5488C132.663 20.5888 132.437 20.6101 132.211 20.6124C130.831 20.6124 130.282 20.1257 130.282 18.9102V15.35H129.284V14.3021H130.282V12.7039H131.524Z" fill="black"></path>
       <path d="M134.581 11.8125H135.811V15.2865H135.909C136.074 14.9235 136.346 14.6203 136.689 14.4182C137.032 14.2161 137.429 14.125 137.826 14.1572C138.13 14.1406 138.434 14.1916 138.717 14.3064C138.999 14.4213 139.253 14.5972 139.459 14.8217C139.666 15.0462 139.821 15.3137 139.913 15.605C140.005 15.8964 140.031 16.2046 139.991 16.5074V20.5775H138.749V16.8143C138.749 15.8074 138.281 15.2975 137.405 15.2975C137.191 15.2799 136.977 15.3093 136.776 15.3836C136.575 15.4579 136.393 15.5752 136.242 15.7275C136.092 15.8797 135.976 16.0631 135.903 16.2649C135.831 16.4667 135.803 16.682 135.822 16.8957V20.5775H134.581L134.581 11.8125Z" fill="black"></path>
       <path d="M147.225 18.8754C147.056 19.4516 146.691 19.9499 146.193 20.2833C145.695 20.6168 145.096 20.764 144.501 20.6992C144.086 20.7102 143.675 20.6306 143.294 20.4661C142.914 20.3016 142.574 20.056 142.297 19.7464C142.021 19.4368 141.815 19.0706 141.694 18.6733C141.573 18.2759 141.54 17.8569 141.596 17.4453C141.541 17.0325 141.575 16.6126 141.696 16.214C141.817 15.8155 142.022 15.4476 142.296 15.1353C142.571 14.823 142.91 14.5736 143.289 14.4039C143.668 14.2342 144.08 14.1482 144.495 14.1518C146.244 14.1518 147.3 15.3502 147.3 17.3298V17.7639H142.86V17.8336C142.841 18.065 142.87 18.2978 142.946 18.5173C143.021 18.7367 143.142 18.9379 143.299 19.108C143.457 19.278 143.648 19.4131 143.861 19.5047C144.074 19.5962 144.303 19.6422 144.535 19.6396C144.831 19.6753 145.132 19.6218 145.398 19.4857C145.665 19.3496 145.885 19.1371 146.03 18.8754L147.225 18.8754ZM142.86 16.8438H146.036C146.051 16.6322 146.023 16.4197 145.952 16.2199C145.88 16.0201 145.768 15.8374 145.623 15.6836C145.477 15.5298 145.301 15.4083 145.105 15.3268C144.91 15.2454 144.7 15.2058 144.488 15.2107C144.274 15.208 144.061 15.2484 143.862 15.3295C143.663 15.4106 143.483 15.5308 143.331 15.683C143.179 15.8352 143.059 16.0163 142.979 16.2157C142.898 16.415 142.858 16.6286 142.86 16.8438Z" fill="black"></path>
     </g>
     <defs>
       <clipPath id="clip0_7904_65920">
         <rect width="167.067" height="56" fill="white" transform="translate(0.964844)"></rect>
       </clipPath>
     </defs>
   </svg>
 </a>
 <a href="javascript:;" class="transition-all duration-500 hover:scale-105">
   <svg width="190" height="56" viewBox="0 0 190 56" fill="none" xmlns="http://www.w3.org/2000/svg">
     <g clip-path="url(#clip0_7904_65989)">
       <path d="M182.031 0H7.03125C3.16526 0 0.03125 3.13401 0.03125 7V49C0.03125 52.866 3.16526 56 7.03125 56H182.031C185.897 56 189.031 52.866 189.031 49V7C189.031 3.13401 185.897 0 182.031 0Z" fill="white"></path>
       <path d="M182.031 1.12C183.591 1.12 185.086 1.7395 186.189 2.84221C187.292 3.94493 187.911 5.44053 187.911 7V49C187.911 50.5595 187.292 52.0551 186.189 53.1578C185.086 54.2605 183.591 54.88 182.031 54.88H7.03125C5.47178 54.88 3.97618 54.2605 2.87346 53.1578C1.77075 52.0551 1.15125 50.5595 1.15125 49V7C1.15125 5.44053 1.77075 3.94493 2.87346 2.84221C3.97618 1.7395 5.47178 1.12 7.03125 1.12H182.031ZM182.031 0H7.03125C5.17473 0 3.39426 0.737498 2.0815 2.05025C0.768748 3.36301 0.03125 5.14348 0.03125 7V49C0.03125 50.8565 0.768748 52.637 2.0815 53.9497C3.39426 55.2625 5.17473 56 7.03125 56H182.031C183.888 56 185.668 55.2625 186.981 53.9497C188.294 52.637 189.031 50.8565 189.031 49V7C189.031 5.14348 188.294 3.36301 186.981 2.05025C185.668 0.737498 183.888 0 182.031 0Z" fill="black"></path>
       <path d="M29.0407 27.1842L14.1307 43.0042C14.2936 43.6025 14.5918 44.1555 15.0024 44.6202C15.413 45.085 15.9249 45.4491 16.4986 45.6846C17.0723 45.92 17.6924 46.0204 18.3111 45.978C18.9298 45.9357 19.5304 45.7516 20.0667 45.4402L36.8667 35.7522L29.0407 27.1842Z" fill="#EA4335"></path>
       <path d="M44.1191 24.4962L36.8671 20.2962L28.7191 27.5622L36.8951 35.7522L44.1051 31.5522C44.746 31.2089 45.2818 30.6982 45.6553 30.0744C46.0288 29.4507 46.2261 28.7372 46.2261 28.0102C46.2261 27.2831 46.0288 26.5697 45.6553 25.9459C45.2818 25.3222 44.746 24.8114 44.1051 24.4682L44.1191 24.4962Z" fill="#FBBC04"></path>
       <path d="M14.1307 12.9882C14.0566 13.3189 14.0237 13.6574 14.0327 13.9962V41.9962C14.0351 42.3461 14.0822 42.6942 14.1727 43.0322L29.5727 27.6322L14.1307 12.9882Z" fill="#4285F4"></path>
       <path d="M29.1524 27.9962L36.8664 20.2822L20.0664 10.5662C19.4352 10.191 18.7146 9.99271 17.9804 9.99219C17.0947 9.99473 16.2343 10.2878 15.5312 10.8265C14.8282 11.3652 14.3213 12.1197 14.0884 12.9742L29.1524 27.9962Z" fill="#34A853"></path>
       <path d="M95.4278 30.4464C94.2482 30.4491 93.096 30.8016 92.1167 31.4593C91.1375 32.1169 90.3753 33.0502 89.9264 34.141C89.4776 35.2318 89.3623 36.4313 89.5951 37.5876C89.828 38.744 90.3985 39.8053 91.2345 40.6374C92.0706 41.4696 93.1346 42.0351 94.292 42.2625C95.4494 42.4899 96.6483 42.369 97.737 41.915C98.8258 41.4611 99.7554 40.6945 100.408 39.7121C101.061 38.7298 101.409 37.5759 101.406 36.3964C101.417 35.6095 101.27 34.8283 100.973 34.0995C100.677 33.3706 100.236 32.7088 99.6785 32.1537C99.1208 31.5985 98.457 31.1613 97.7267 30.8679C96.9964 30.5746 96.2146 30.4313 95.4278 30.4464ZM95.4278 40.0084C94.7048 40.0589 93.9833 39.8908 93.3571 39.5259C92.7309 39.161 92.229 38.6161 91.9166 37.9622C91.6042 37.3082 91.4957 36.5754 91.6053 35.859C91.7149 35.1426 92.0375 34.4757 92.5311 33.945C93.0248 33.4144 93.6666 33.0445 94.3733 32.8835C95.0799 32.7224 95.8186 32.7777 96.4934 33.0421C97.1682 33.3065 97.7479 33.7678 98.1571 34.366C98.5663 34.9642 98.786 35.6716 98.7878 36.3964C98.8103 36.8556 98.7407 37.3147 98.583 37.7466C98.4253 38.1785 98.1827 38.5744 97.8696 38.911C97.5564 39.2477 97.179 39.5182 96.7597 39.7067C96.3403 39.8951 95.8874 39.9977 95.4278 40.0084ZM82.3798 30.4464C81.2002 30.4491 80.048 30.8016 79.0687 31.4593C78.0895 32.1169 77.3273 33.0502 76.8784 34.141C76.4296 35.2318 76.3143 36.4313 76.5471 37.5876C76.78 38.744 77.3505 39.8053 78.1865 40.6374C79.0226 41.4696 80.0866 42.0351 81.244 42.2625C82.4014 42.4899 83.6003 42.369 84.689 41.915C85.7778 41.4611 86.7074 40.6945 87.3604 39.7121C88.0135 38.7298 88.3605 37.5759 88.3578 36.3964C88.3692 35.6095 88.2222 34.8283 87.9254 34.0995C87.6287 33.3706 87.1883 32.7088 86.6305 32.1537C86.0728 31.5985 85.409 31.1613 84.6787 30.8679C83.9484 30.5746 83.1666 30.4313 82.3798 30.4464ZM82.3798 40.0084C81.6568 40.0589 80.9353 39.8908 80.3091 39.5259C79.6829 39.161 79.181 38.6161 78.8686 37.9622C78.5562 37.3082 78.4477 36.5754 78.5573 35.859C78.6669 35.1426 78.9895 34.4757 79.4831 33.945C79.9768 33.4144 80.6186 33.0445 81.3253 32.8835C82.0319 32.7224 82.7706 32.7777 83.4454 33.0421C84.1203 33.3065 84.6999 33.7678 85.1091 34.366C85.5183 34.9642 85.738 35.6716 85.7398 36.3964C85.7623 36.8556 85.6927 37.3147 85.535 37.7466C85.3773 38.1785 85.1347 38.5744 84.8216 38.911C84.5084 39.2477 84.131 39.5182 83.7117 39.7067C83.2923 39.8951 82.8394 39.9977 82.3798 40.0084ZM66.8678 32.2804V34.8004H72.9158C72.821 35.9873 72.3276 37.1073 71.5158 37.9784C70.9091 38.5965 70.1794 39.0804 69.3739 39.3987C68.5685 39.717 67.7051 39.8627 66.8398 39.8264C65.0575 39.8264 63.3483 39.1184 62.088 37.8581C60.8278 36.5979 60.1198 34.8886 60.1198 33.1064C60.1198 31.3241 60.8278 29.6149 62.088 28.3546C63.3483 27.0944 65.0575 26.3864 66.8398 26.3864C68.5484 26.361 70.1982 27.0098 71.4318 28.1924L73.2098 26.4144C72.3754 25.5891 71.3846 24.9386 70.2956 24.5011C69.2066 24.0636 68.0412 23.8478 66.8678 23.8664C65.6232 23.8179 64.3816 24.0213 63.2175 24.4641C62.0533 24.907 60.9905 25.5804 60.0928 26.4438C59.1951 27.3072 58.481 28.343 57.9932 29.4891C57.5054 30.6351 57.2539 31.8678 57.2539 33.1134C57.2539 34.3589 57.5054 35.5917 57.9932 36.7377C58.481 37.8837 59.1951 38.9195 60.0928 39.783C60.9905 40.6464 62.0533 41.3197 63.2175 41.7626C64.3816 42.2055 65.6232 42.4088 66.8678 42.3604C68.0654 42.4082 69.2595 42.2022 70.3718 41.7558C71.4842 41.3094 72.4895 40.6328 73.3218 39.7704C74.7919 38.1554 75.5753 36.0312 75.5058 33.8484C75.5108 33.323 75.4686 32.7982 75.3798 32.2804H66.8678ZM130.302 34.2404C129.937 33.1662 129.254 32.2283 128.344 31.5508C127.434 30.8733 126.34 30.4881 125.206 30.4464C124.44 30.4449 123.682 30.6005 122.979 30.9035C122.275 31.2066 121.642 31.6507 121.117 32.2083C120.592 32.766 120.187 33.4254 119.927 34.1457C119.667 34.8661 119.558 35.6321 119.606 36.3964C119.594 37.6744 119.996 38.9219 120.751 39.9527C121.507 40.9836 122.575 41.7423 123.798 42.1156C125.02 42.4889 126.33 42.4568 127.533 42.024C128.735 41.5912 129.766 40.781 130.47 39.7144L128.44 38.3144C128.137 38.8188 127.708 39.2353 127.195 39.5226C126.681 39.8099 126.102 39.9581 125.514 39.9524C124.907 39.9774 124.307 39.8183 123.792 39.496C123.277 39.1737 122.872 38.7032 122.63 38.1464L130.596 34.8564L130.302 34.2404ZM122.182 36.2284C122.153 35.7935 122.212 35.3573 122.354 34.9454C122.497 34.5335 122.72 34.1541 123.01 33.8295C123.301 33.5049 123.654 33.2415 124.048 33.0548C124.441 32.8682 124.868 32.7619 125.304 32.7424C125.755 32.7148 126.204 32.821 126.595 33.0477C126.986 33.2743 127.301 33.6113 127.502 34.0164L122.182 36.2284ZM115.714 41.9964H118.332V24.4964H115.714V41.9964ZM111.43 31.7764H111.332C110.934 31.3437 110.449 31.0011 109.908 30.7717C109.367 30.5423 108.783 30.4314 108.196 30.4464C106.666 30.5206 105.223 31.1806 104.167 32.2896C103.11 33.3986 102.521 34.8716 102.521 36.4034C102.521 37.9351 103.11 39.4081 104.167 40.5172C105.223 41.6262 106.666 42.2862 108.196 42.3604C108.789 42.3723 109.378 42.253 109.92 42.011C110.462 41.7689 110.944 41.4102 111.332 40.9604H111.43V41.8144C111.43 44.0964 110.212 45.3144 108.252 45.3144C107.597 45.3 106.961 45.0914 106.425 44.715C105.889 44.3386 105.477 43.8114 105.242 43.2004L102.974 44.1384C103.393 45.1915 104.122 46.0926 105.065 46.7226C106.007 47.3525 107.118 47.6816 108.252 47.6664C111.318 47.6664 113.852 45.8604 113.852 41.4644V30.7964H111.43V31.7764ZM108.42 40.0084C107.503 39.9512 106.642 39.5465 106.012 38.8767C105.383 38.2069 105.033 37.3224 105.033 36.4034C105.033 35.4843 105.383 34.5998 106.012 33.93C106.642 33.2603 107.503 32.8556 108.42 32.7984C108.868 32.8177 109.308 32.9271 109.713 33.1199C110.118 33.3127 110.481 33.585 110.778 33.9207C111.076 34.2564 111.304 34.6486 111.447 35.0739C111.59 35.4992 111.646 35.9489 111.612 36.3964C111.65 36.8453 111.597 37.2974 111.455 37.7252C111.314 38.153 111.087 38.5476 110.789 38.8853C110.49 39.2229 110.126 39.4965 109.719 39.6896C109.312 39.8826 108.87 39.9911 108.42 40.0084ZM142.566 24.4964H136.294V41.9964H138.912V35.3604H142.566C143.312 35.414 144.061 35.3133 144.767 35.0646C145.472 34.8159 146.119 34.4245 146.666 33.9149C147.214 33.4052 147.651 32.7882 147.949 32.1023C148.248 31.4165 148.402 30.6764 148.402 29.9284C148.402 29.1803 148.248 28.4403 147.949 27.7544C147.651 27.0685 147.214 26.4515 146.666 25.9419C146.119 25.4322 145.472 25.0409 144.767 24.7922C144.061 24.5435 143.312 24.4428 142.566 24.4964ZM142.566 32.8964H138.912V26.9324H142.622C143.416 26.9324 144.178 27.248 144.74 27.8099C145.302 28.3717 145.618 29.1338 145.618 29.9284C145.618 30.723 145.302 31.485 144.74 32.0469C144.178 32.6087 143.416 32.9244 142.622 32.9244L142.566 32.8964ZM158.722 30.3904C157.768 30.3316 156.819 30.5535 155.99 31.0288C155.162 31.5041 154.49 32.2118 154.06 33.0644L156.37 34.0304C156.603 33.6095 156.953 33.2653 157.378 33.0392C157.803 32.8131 158.284 32.7149 158.764 32.7564C159.096 32.7176 159.433 32.7453 159.754 32.838C160.076 32.9307 160.376 33.0866 160.636 33.2964C160.897 33.5062 161.113 33.7658 161.272 34.0601C161.432 34.3544 161.531 34.6774 161.564 35.0104V35.1784C160.722 34.7359 159.785 34.5052 158.834 34.5064C156.342 34.5064 153.794 35.9064 153.794 38.4544C153.818 38.996 153.952 39.5271 154.186 40.0161C154.42 40.5052 154.749 40.9423 155.155 41.3014C155.562 41.6606 156.036 41.9344 156.55 42.1067C157.064 42.279 157.607 42.3462 158.148 42.3044C158.805 42.3407 159.46 42.2017 160.045 41.9016C160.631 41.6014 161.126 41.151 161.48 40.5964H161.564V41.9964H164.084V35.2624C164.084 32.1964 161.76 30.4184 158.778 30.4184L158.722 30.3904ZM158.4 39.9804C157.546 39.9804 156.356 39.5464 156.356 38.4964C156.356 37.0964 157.84 36.6204 159.156 36.6204C159.987 36.5999 160.809 36.8029 161.536 37.2084C161.448 37.9687 161.087 38.6713 160.521 39.1862C159.955 39.701 159.221 39.9931 158.456 40.0084L158.4 39.9804ZM173.268 30.7964L170.272 38.3844H170.188L167.08 30.7964H164.28L168.942 41.4084L166.282 47.3024H169.082L176.18 30.7964H173.268ZM149.748 41.9964H152.352V24.4964H149.748V41.9964Z" fill="black"></path>
       <path d="M64.4329 17.8501C63.6512 18.1311 62.8275 18.2778 61.9969 18.2841C61.4595 18.3136 60.9216 18.236 60.4144 18.0557C59.9073 17.8754 59.4411 17.5961 59.0429 17.2341C58.6712 16.8429 58.3818 16.3812 58.1918 15.8762C58.0018 15.3712 57.9151 14.8332 57.9369 14.2941C57.9198 13.7382 58.0196 13.1849 58.2297 12.6699C58.4398 12.155 58.7556 11.6898 59.1567 11.3046C59.5578 10.9193 60.0353 10.6225 60.5583 10.4333C61.0812 10.244 61.6381 10.1666 62.1929 10.2061C62.8684 10.1968 63.5391 10.3205 64.1669 10.5701L63.9149 11.4101C63.3623 11.1742 62.7655 11.0596 62.1649 11.0741C61.739 11.0403 61.3108 11.0994 60.9099 11.2472C60.509 11.395 60.145 11.6279 59.8429 11.93C59.5407 12.2322 59.3078 12.5962 59.16 12.9971C59.0122 13.398 58.9531 13.8261 58.9869 14.2521C58.946 14.6694 58.9957 15.0907 59.1326 15.487C59.2695 15.8834 59.4904 16.2455 59.7802 16.5486C60.07 16.8516 60.4219 17.0886 60.8117 17.2431C61.2015 17.3977 61.6201 17.4662 62.0389 17.4441C62.5166 17.4793 62.996 17.4026 63.4389 17.2201V14.8681H61.8009V14.0001H64.4329V17.8501Z" fill="black"></path>
       <path d="M70.2843 14.4901H67.2323V17.2901H70.6483V18.2001H66.1963V10.2901H70.4663V11.2001H67.2323V13.6501H70.2983L70.2843 14.4901Z" fill="black"></path>
       <path d="M73.8969 11.2001H71.4329V10.2901H77.2849V11.2001H74.9189V18.2001H73.8969V11.2001Z" fill="black"></path>
       <path d="M82.1989 10.2901V18.2001H81.2329V10.2901H82.1989Z" fill="black"></path>
       <path d="M85.7129 11.2001H83.3049V10.2901H89.1709V11.2001H86.7489V18.2001H85.7129V11.2001Z" fill="black"></path>
       <path d="M99.7549 14.1681C99.7549 16.8841 98.1029 18.3681 96.0869 18.3681C95.583 18.3611 95.0862 18.2492 94.6281 18.0395C94.1699 17.8298 93.7605 17.5269 93.4259 17.1502C93.0913 16.7735 92.8389 16.3312 92.6848 15.8514C92.5307 15.3717 92.4783 14.8652 92.5309 14.3641C92.4702 13.8425 92.5194 13.314 92.6751 12.8125C92.8308 12.311 93.0897 11.8476 93.4351 11.4521C93.7805 11.0566 94.2049 10.7377 94.6808 10.5159C95.1568 10.2941 95.6738 10.1742 96.1989 10.1641C96.704 10.1667 97.2029 10.2757 97.6632 10.484C98.1234 10.6923 98.5346 10.9951 98.8701 11.3728C99.2055 11.7505 99.4577 12.1946 99.6101 12.6762C99.7625 13.1578 99.8119 13.6661 99.7549 14.1681ZM93.6229 14.2941C93.6229 15.9881 94.5329 17.5001 96.1429 17.5001C97.7529 17.5001 98.6769 16.0021 98.6769 14.2101C98.6769 12.6421 97.8509 11.0041 96.1569 11.0041C94.4629 11.0041 93.6229 12.6001 93.6229 14.2941Z" fill="black"></path>
       <path d="M101.323 18.2001V10.2901H102.429L105.033 14.2941C105.55 15.1 106.018 15.9369 106.433 16.8001C106.349 15.7361 106.321 14.7841 106.321 13.5521V10.2901H107.287V18.2001H106.251L103.745 14.1821C103.186 13.3376 102.681 12.4585 102.233 11.5501C102.233 12.5441 102.233 13.4961 102.233 14.8121V18.2001H101.323Z" fill="black"></path>
       <path d="M64.4329 17.8501C63.6512 18.1311 62.8275 18.2778 61.9969 18.2841C61.4595 18.3136 60.9216 18.236 60.4144 18.0557C59.9073 17.8754 59.4411 17.5961 59.0429 17.2341C58.6712 16.8429 58.3818 16.3812 58.1918 15.8762C58.0018 15.3712 57.9151 14.8332 57.9369 14.2941C57.9198 13.7382 58.0196 13.1849 58.2297 12.6699C58.4398 12.155 58.7556 11.6898 59.1567 11.3046C59.5578 10.9193 60.0353 10.6225 60.5583 10.4333C61.0812 10.244 61.6381 10.1666 62.1929 10.2061C62.8684 10.1968 63.5391 10.3205 64.1669 10.5701L63.9149 11.4101C63.3623 11.1742 62.7655 11.0596 62.1649 11.0741C61.739 11.0403 61.3108 11.0994 60.9099 11.2472C60.509 11.395 60.145 11.6279 59.8429 11.93C59.5407 12.2322 59.3078 12.5962 59.16 12.9971C59.0122 13.398 58.9531 13.8261 58.9869 14.2521C58.946 14.6694 58.9957 15.0907 59.1326 15.487C59.2695 15.8834 59.4904 16.2455 59.7802 16.5486C60.07 16.8516 60.4219 17.0886 60.8117 17.2431C61.2015 17.3977 61.6201 17.4662 62.0389 17.4441C62.5166 17.4793 62.996 17.4026 63.4389 17.2201V14.8681H61.8009V14.0001H64.4329V17.8501Z" stroke="white" stroke-width="0.2" stroke-miterlimit="10"></path>
       <path d="M70.2843 14.4901H67.2323V17.2901H70.6483V18.2001H66.1963V10.2901H70.4663V11.2001H67.2323V13.6501H70.2983L70.2843 14.4901Z" stroke="white" stroke-width="0.2" stroke-miterlimit="10"></path>
       <path d="M73.8969 11.2001H71.4329V10.2901H77.2849V11.2001H74.9189V18.2001H73.8969V11.2001Z" stroke="white" stroke-width="0.2" stroke-miterlimit="10"></path>
       <path d="M82.1989 10.2901V18.2001H81.2329V10.2901H82.1989Z" stroke="white" stroke-width="0.2" stroke-miterlimit="10"></path>
       <path d="M85.7129 11.2001H83.3049V10.2901H89.1709V11.2001H86.7489V18.2001H85.7129V11.2001Z" stroke="white" stroke-width="0.2" stroke-miterlimit="10"></path>
       <path d="M99.7549 14.1681C99.7549 16.8841 98.1029 18.3681 96.0869 18.3681C95.583 18.3611 95.0862 18.2492 94.6281 18.0395C94.1699 17.8298 93.7605 17.5269 93.4259 17.1502C93.0913 16.7735 92.8389 16.3312 92.6848 15.8514C92.5307 15.3717 92.4783 14.8652 92.5309 14.3641C92.4702 13.8425 92.5194 13.314 92.6751 12.8125C92.8308 12.311 93.0897 11.8476 93.4351 11.4521C93.7805 11.0566 94.2049 10.7377 94.6808 10.5159C95.1568 10.2941 95.6738 10.1742 96.1989 10.1641C96.704 10.1667 97.2029 10.2757 97.6632 10.484C98.1234 10.6923 98.5346 10.9951 98.8701 11.3728C99.2055 11.7505 99.4577 12.1946 99.6101 12.6762C99.7625 13.1578 99.8119 13.6661 99.7549 14.1681ZM93.6229 14.2941C93.6229 15.9881 94.5329 17.5001 96.1429 17.5001C97.7529 17.5001 98.6769 16.0021 98.6769 14.2101C98.6769 12.6421 97.8509 11.0041 96.1569 11.0041C94.4629 11.0041 93.6229 12.6001 93.6229 14.2941Z" stroke="white" stroke-width="0.2" stroke-miterlimit="10"></path>
       <path d="M101.323 18.2001V10.2901H102.429L105.033 14.2941C105.55 15.1 106.018 15.9369 106.433 16.8001C106.349 15.7361 106.321 14.7841 106.321 13.5521V10.2901H107.287V18.2001H106.251L103.745 14.1821C103.186 13.3376 102.681 12.4585 102.233 11.5501C102.233 12.5441 102.233 13.4961 102.233 14.8121V18.2001H101.323Z" stroke="white" stroke-width="0.2" stroke-miterlimit="10"></path>
     </g>
     <defs>
       <clipPath id="clip0_7904_65989">
         <rect width="189" height="56" fill="white" transform="translate(0.03125)"></rect>
       </clipPath>
     </defs>
   </svg>
 </a>
</div>
</div>
</div>

Pricing Card

Following is Tailwind CSS card component of pricing plan with buy now button and list of features can be shown using a pricing card.

Free

$0 / month
  • 2 auto tracking
  • 7 Day transaction clearing
  • 24/7 Customer support
  • All widget access
Purchase Plan 
  <div class="flex flex-col  max-w-sm text-gray-900 rounded-2xl bg-indigo-50 p-6 xl:py-9 xl:px-12 transition-all duration-500 hover:bg-gray-100">
<h3 class="font-manrope text-2xl font-bold mb-3">Free</h3>
<div class="flex items-center mb-6">
<span class="font-manrope mr-2 text-6xl font-semibold">$0</span>
<span class="text-xl text-gray-500 ">/ month</span>
</div>
<!--List-->
<ul class="mb-12 space-y-6 text-left text-lg text-gray-500">
<li class="flex items-center space-x-4">
  <!-- Icon -->
  <svg class="flex-shrink-0 w-6 h-6 text-indigo-600" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
    <path d="M10 14.7875L13.0959 17.8834C13.3399 18.1274 13.7353 18.1275 13.9794 17.8838L20.625 11.25M15 27.5C8.09644 27.5 2.5 21.9036 2.5 15C2.5 8.09644 8.09644 2.5 15 2.5C21.9036 2.5 27.5 8.09644 27.5 15C27.5 21.9036 21.9036 27.5 15 27.5Z" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"></path>
  </svg>
  <span>2 auto tracking</span>
</li>
<li class="flex items-center space-x-4">
  <!-- Icon -->
  <svg class="flex-shrink-0 w-6 h-6 text-indigo-600" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
    <path d="M10 14.7875L13.0959 17.8834C13.3399 18.1274 13.7353 18.1275 13.9794 17.8838L20.625 11.25M15 27.5C8.09644 27.5 2.5 21.9036 2.5 15C2.5 8.09644 8.09644 2.5 15 2.5C21.9036 2.5 27.5 8.09644 27.5 15C27.5 21.9036 21.9036 27.5 15 27.5Z" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"></path>
  </svg>
  <span>7 Day transaction clearing </span>
</li>
<li class="flex items-center space-x-4">
  <!-- Icon -->
  <svg class="flex-shrink-0 w-6 h-6 text-indigo-600" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
    <path d="M10 14.7875L13.0959 17.8834C13.3399 18.1274 13.7353 18.1275 13.9794 17.8838L20.625 11.25M15 27.5C8.09644 27.5 2.5 21.9036 2.5 15C2.5 8.09644 8.09644 2.5 15 2.5C21.9036 2.5 27.5 8.09644 27.5 15C27.5 21.9036 21.9036 27.5 15 27.5Z" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"></path>
  </svg>
  <span>24/7 Customer support </span>
</li>
<li class="flex items-center space-x-4">
  <!-- Icon -->
  <svg class="flex-shrink-0 w-6 h-6 text-indigo-600" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
    <path d="M10 14.7875L13.0959 17.8834C13.3399 18.1274 13.7353 18.1275 13.9794 17.8838L20.625 11.25M15 27.5C8.09644 27.5 2.5 21.9036 2.5 15C2.5 8.09644 8.09644 2.5 15 2.5C21.9036 2.5 27.5 8.09644 27.5 15C27.5 21.9036 21.9036 27.5 15 27.5Z" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"></path>
  </svg>
  <span>All widget access</span>
</li>
</ul>
<a href="javascript:;" class="py-4 px-8 bg-indigo-600 shadow-sm rounded-full transition-all duration-500 text-lg text-white font-semibold text-center w-fit mx-auto hover:bg-indigo-700">Purchase Plan</a>
<!--List End-->
</div>

Testimonial Card

Reviews and testimonials can be shown using the following card carousel tailwind style splitting card into multiple sections.

Jane avatar
Jane D
CEO

The user interface of this pagedone is so intuitive, I was able to start using it without any guidance. 

  <div class="group bg-white border border-solid border-gray-300 rounded-2xl p-6 transition-all duration-500 w-96 hover:border-indigo-600">
<div class="flex items-center gap-5 mb-6">
<img src="https://pagedone.io/asset/uploads/1695365794.png" alt="Jane avatar">
<div class="grid gap-1">
 <h5 class="text-gray-900 font-medium transition-all duration-500  ">Jane D</h5>
 <span class="text-sm leading-6 text-gray-500">CEO </span>
</div>
</div>
<div class="flex items-center mb-6 gap-2 text-amber-500 transition-all duration-500  ">
<svg class="w-5 h-5" viewBox="0 0 18 17" fill="none" xmlns="http://www.w3.org/2000/svg">
 <path d="M8.10326 1.31699C8.47008 0.57374 9.52992 0.57374 9.89674 1.31699L11.7063 4.98347C11.8519 5.27862 12.1335 5.48319 12.4592 5.53051L16.5054 6.11846C17.3256 6.23765 17.6531 7.24562 17.0596 7.82416L14.1318 10.6781C13.8961 10.9079 13.7885 11.2389 13.8442 11.5632L14.5353 15.5931C14.6754 16.41 13.818 17.033 13.0844 16.6473L9.46534 14.7446C9.17402 14.5915 8.82598 14.5915 8.53466 14.7446L4.91562 16.6473C4.18199 17.033 3.32456 16.41 3.46467 15.5931L4.15585 11.5632C4.21148 11.2389 4.10393 10.9079 3.86825 10.6781L0.940384 7.82416C0.346867 7.24562 0.674378 6.23765 1.4946 6.11846L5.54081 5.53051C5.86652 5.48319 6.14808 5.27862 6.29374 4.98347L8.10326 1.31699Z" fill="currentColor"></path>
</svg>
<svg class="w-5 h-5" viewBox="0 0 18 17" fill="none" xmlns="http://www.w3.org/2000/svg">
 <path d="M8.10326 1.31699C8.47008 0.57374 9.52992 0.57374 9.89674 1.31699L11.7063 4.98347C11.8519 5.27862 12.1335 5.48319 12.4592 5.53051L16.5054 6.11846C17.3256 6.23765 17.6531 7.24562 17.0596 7.82416L14.1318 10.6781C13.8961 10.9079 13.7885 11.2389 13.8442 11.5632L14.5353 15.5931C14.6754 16.41 13.818 17.033 13.0844 16.6473L9.46534 14.7446C9.17402 14.5915 8.82598 14.5915 8.53466 14.7446L4.91562 16.6473C4.18199 17.033 3.32456 16.41 3.46467 15.5931L4.15585 11.5632C4.21148 11.2389 4.10393 10.9079 3.86825 10.6781L0.940384 7.82416C0.346867 7.24562 0.674378 6.23765 1.4946 6.11846L5.54081 5.53051C5.86652 5.48319 6.14808 5.27862 6.29374 4.98347L8.10326 1.31699Z" fill="currentColor"></path>
</svg>
<svg class="w-5 h-5" viewBox="0 0 18 17" fill="none" xmlns="http://www.w3.org/2000/svg">
 <path d="M8.10326 1.31699C8.47008 0.57374 9.52992 0.57374 9.89674 1.31699L11.7063 4.98347C11.8519 5.27862 12.1335 5.48319 12.4592 5.53051L16.5054 6.11846C17.3256 6.23765 17.6531 7.24562 17.0596 7.82416L14.1318 10.6781C13.8961 10.9079 13.7885 11.2389 13.8442 11.5632L14.5353 15.5931C14.6754 16.41 13.818 17.033 13.0844 16.6473L9.46534 14.7446C9.17402 14.5915 8.82598 14.5915 8.53466 14.7446L4.91562 16.6473C4.18199 17.033 3.32456 16.41 3.46467 15.5931L4.15585 11.5632C4.21148 11.2389 4.10393 10.9079 3.86825 10.6781L0.940384 7.82416C0.346867 7.24562 0.674378 6.23765 1.4946 6.11846L5.54081 5.53051C5.86652 5.48319 6.14808 5.27862 6.29374 4.98347L8.10326 1.31699Z" fill="currentColor"></path>
</svg>
<svg class="w-5 h-5" viewBox="0 0 18 17" fill="none" xmlns="http://www.w3.org/2000/svg">
 <path d="M8.10326 1.31699C8.47008 0.57374 9.52992 0.57374 9.89674 1.31699L11.7063 4.98347C11.8519 5.27862 12.1335 5.48319 12.4592 5.53051L16.5054 6.11846C17.3256 6.23765 17.6531 7.24562 17.0596 7.82416L14.1318 10.6781C13.8961 10.9079 13.7885 11.2389 13.8442 11.5632L14.5353 15.5931C14.6754 16.41 13.818 17.033 13.0844 16.6473L9.46534 14.7446C9.17402 14.5915 8.82598 14.5915 8.53466 14.7446L4.91562 16.6473C4.18199 17.033 3.32456 16.41 3.46467 15.5931L4.15585 11.5632C4.21148 11.2389 4.10393 10.9079 3.86825 10.6781L0.940384 7.82416C0.346867 7.24562 0.674378 6.23765 1.4946 6.11846L5.54081 5.53051C5.86652 5.48319 6.14808 5.27862 6.29374 4.98347L8.10326 1.31699Z" fill="currentColor"></path>
</svg>
<svg class="w-5 h-5" viewBox="0 0 18 17" fill="none" xmlns="http://www.w3.org/2000/svg">
 <path d="M8.10326 1.31699C8.47008 0.57374 9.52992 0.57374 9.89674 1.31699L11.7063 4.98347C11.8519 5.27862 12.1335 5.48319 12.4592 5.53051L16.5054 6.11846C17.3256 6.23765 17.6531 7.24562 17.0596 7.82416L14.1318 10.6781C13.8961 10.9079 13.7885 11.2389 13.8442 11.5632L14.5353 15.5931C14.6754 16.41 13.818 17.033 13.0844 16.6473L9.46534 14.7446C9.17402 14.5915 8.82598 14.5915 8.53466 14.7446L4.91562 16.6473C4.18199 17.033 3.32456 16.41 3.46467 15.5931L4.15585 11.5632C4.21148 11.2389 4.10393 10.9079 3.86825 10.6781L0.940384 7.82416C0.346867 7.24562 0.674378 6.23765 1.4946 6.11846L5.54081 5.53051C5.86652 5.48319 6.14808 5.27862 6.29374 4.98347L8.10326 1.31699Z" fill="currentColor"></path>
</svg>
</div>
<p class="text-sm text-gray-500 leading-6 transition-all duration-500  group-hover:text-gray-800"> The user interface of this pagedone is so intuitive, I was able to start using it without any guidance. </p>
</div>

1000+ Tailwind Blocks

Access over 1,000 ready-made Tailwind blocks with modern designs to accelerate your design process.

Explore More

Card With social links

Here, instead of a button a link can be used inside the card to make it work as call to action (CTA). Following are tailwind card design with social links cta.

image

Patricia Angely

CEo / Co-Founder

<div class="w-full relative flex items-center justify-center h-auto">
<div class="group bg-white shadow-lg shadow-gray-200 rounded-xl p-2.5 transition-all duration-500 w-96 hover:shadow-gray-300">
<div class="rounded-3xl ">
<img src="https://pagedone.io/asset/uploads/1695365240.png" alt="image" class="rounded-xl w-full h-auto">
</div>
<div class="flex flex-col items-center justify-center py-6 gap-4 text-center">
<h4 class="font-manrope font-bold text-xl text-gray-900 text-center">Patricia Angely</h4>
<p class="text-base font-medium text-gray-500 mb-4 text-center">CEo / Co-Founder</p>
<div class="flex items-center justify-center w-full gap-4">
  <a href="#" class="group">
    <svg class="transition-all duration-500 hover:scale-[1.2]" xmlns="http://www.w3.org/2000/svg" width="26" height="26" 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"></path>
    </svg>
  </a>
  <a href="#">
    <svg class="transition-all duration-500 hover:scale-[1.2]" xmlns="http://www.w3.org/2000/svg" width="20" height="20" 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_54404)"></path>
      <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_54404)"></path>
      <defs>
        <radialGradient id="paint0_radial_7092_54404" 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>
          <stop offset="0.78" stop-color="#D82D7E"></stop>
        </radialGradient>
        <radialGradient id="paint1_radial_7092_54404" 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>
          <stop offset="1" stop-color="#8C3AAA"></stop>
        </radialGradient>
      </defs>
    </svg>
  </a>
  <a href="#">
    <svg class="transition-all duration-500 hover:scale-[1.2]" xmlns="http://www.w3.org/2000/svg" width="24" height="24" 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"></path>
    </svg>
  </a>
</div>
</div>
</div>
</div>

Card With rating, links and button

Here, Tailwind Card shows image, description with ratings and some icons with CTA Button.

image

Patricia Angely

5.0

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Aperiam deserunt iusto quos autem dolorum possimus, laborum ad impedit, error, neque ducimus tenetur ea veniam perferendis numquam illum.

+20 
<div class="w-full relative flex items-center justify-center h-auto">
<div class="group bg-white shadow-lg shadow-gray-200 rounded-xl p-2.5 transition-all duration-500 w-1/2 hover:shadow-gray-300">
<div class="rounded-3xl ">
<img src="https://pagedone.io/asset/uploads/1695365240.png" alt="image" class="rounded-xl w-full h-auto relative z-10 shadow-lg shadow-stone-300">
</div>
<div class="flex flex-col items-center justify-center py-6 px-4 gap-4 text-center">
<div class="flex items-center justify-between w-full mb-2">
  <h4 class="font-manrope font-bold text-xl text-gray-900 ">Patricia Angely</h4>
  <div class="flex items-center justify-end gap-3">
    <svg width="20" height="20" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
      <g clip-path="url(#clip0_13866_9712)">
        <path d="M14.1033 2.56698C14.4701 1.82374 15.5299 1.82374 15.8967 2.56699L19.1757 9.21093C19.3214 9.50607 19.6029 9.71064 19.9287 9.75797L27.2607 10.8234C28.0809 10.9426 28.4084 11.9505 27.8149 12.5291L22.5094 17.7007C22.2737 17.9304 22.1662 18.2614 22.2218 18.5858L23.4743 25.8882C23.6144 26.7051 22.7569 27.3281 22.0233 26.9424L15.4653 23.4946C15.174 23.3415 14.826 23.3415 14.5347 23.4946L7.9767 26.9424C7.24307 27.3281 6.38563 26.7051 6.52574 25.8882L7.7782 18.5858C7.83384 18.2614 7.72629 17.9304 7.49061 17.7007L2.1851 12.5291C1.59159 11.9505 1.91909 10.9426 2.73931 10.8234L10.0713 9.75797C10.3971 9.71064 10.6786 9.50607 10.8243 9.21093L14.1033 2.56698Z" fill="#F3F4F6"></path>
        <g clip-path="url(#clip1_13866_9712)">
          <path d="M14.1033 2.56698C14.4701 1.82374 15.5299 1.82374 15.8967 2.56699L19.1757 9.21093C19.3214 9.50607 19.6029 9.71064 19.9287 9.75797L27.2607 10.8234C28.0809 10.9426 28.4084 11.9505 27.8149 12.5291L22.5094 17.7007C22.2737 17.9304 22.1662 18.2614 22.2218 18.5858L23.4743 25.8882C23.6144 26.7051 22.7569 27.3281 22.0233 26.9424L15.4653 23.4946C15.174 23.3415 14.826 23.3415 14.5347 23.4946L7.9767 26.9424C7.24307 27.3281 6.38563 26.7051 6.52574 25.8882L7.7782 18.5858C7.83384 18.2614 7.72629 17.9304 7.49061 17.7007L2.1851 12.5291C1.59159 11.9505 1.91909 10.9426 2.73931 10.8234L10.0713 9.75797C10.3971 9.71064 10.6786 9.50607 10.8243 9.21093L14.1033 2.56698Z" fill="#FBBF24"></path>
        </g>
      </g>
      <defs>
        <clipPath id="clip0_13866_9712">
          <rect width="30" height="30" fill="white"></rect>
        </clipPath>
        <clipPath id="clip1_13866_9712">
          <rect width="30" height="30" fill="white"></rect>
        </clipPath>
      </defs>
    </svg>
    <span class="text-sm font-medium text-gray-800">5.0</span>
  </div>
</div>
<p class="text-base font-medium text-gray-500 mb-4 text-left">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Aperiam deserunt iusto quos autem dolorum possimus, laborum ad impedit, error, neque ducimus tenetur ea veniam perferendis numquam illum.</p>
<div class="flex items-center justify-start w-full gap-4 mb-4">
  <a href="#" class="w-10 aspect-square rounded-full bg-gray-50 border-gray-600 border flex items-center justify-center transition-all duration-500 hover:bg-gray-100 hover:border-gray-900">
    <svg class="stroke-gray-700 hover:stroke-gray-900" xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 20 20" fill="none">
      <path d="M13 14.9082L7 14.9082M1 8.91454V14.9082C1 16.8371 1 17.8015 1.58579 18.4008C2.17157 19 3.11438 19 5 19H15C16.8856 19 17.8284 19 18.4142 18.4008C19 17.8015 19 16.8371 19 14.9082V11.1044C19 8.96044 19 7.88847 18.5267 6.98381C18.0534 6.07914 17.1815 5.48452 15.4376 4.29527L12.2188 2.10017C11.1433 1.36672 10.6056 1 10 1C9.39445 1 8.8567 1.36673 7.7812 2.10017L2.7812 5.50998C1.90927 6.10461 1.4733 6.40192 1.23665 6.85425C1 7.30658 1 7.84257 1 8.91454Z" stroke="" stroke-width="1.6" stroke-linecap="round"></path>
    </svg>
  </a>
  <a href="#" class="w-10 aspect-square rounded-full bg-gray-50 border-gray-600 border flex items-center justify-center transition-all duration-500 hover:bg-gray-100 hover:border-gray-900">
    <svg class="stroke-gray-700 hover:stroke-gray-900" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
      <path d="M8 15C8.84757 14.4022 10.3969 14 12 14C13.6031 14 15.1524 14.4022 16 15M5 11C6.48324 9.8044 9.19456 9 12 9C14.8054 9 17.5168 9.8044 19 11M3 7C4.90703 5.2066 8.39301 4 12 4C15.607 4 19.093 5.2066 21 7M13 19C13 19.5523 12.5523 20 12 20C11.4477 20 11 19.5523 11 19C11 18.4477 11.4477 18 12 18C12.5523 18 13 18.4477 13 19Z" stroke="" stroke-width="1.6" stroke-linecap="round"></path>
    </svg>
  </a>
  <a href="#" class="w-10 aspect-square rounded-full bg-gray-50 border-gray-600 border flex items-center justify-center transition-all duration-500 hover:bg-gray-100 hover:border-gray-900">
    <svg class="stroke-gray-700 hover:stroke-gray-900" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
      <path d="M5 15V9M5 15C5 15.9428 5 16.4142 5.29289 16.7071C5.58579 17 6.05719 17 7 17C7.94281 17 8.41421 17 8.70711 16.7071C9 16.4142 9 15.9428 9 15V9C9 8.05719 9 7.58579 8.70711 7.29289C8.41421 7 7.94281 7 7 7C6.05719 7 5.58579 7 5.29289 7.29289C5 7.58579 5 8.05719 5 9M5 15C4.06812 15 3.60218 15 3.23463 14.8478C2.74458 14.6448 2.35523 14.2554 2.15224 13.7654C2 13.3978 2 12.9319 2 12C2 11.0681 2 10.6022 2.15224 10.2346C2.35523 9.74458 2.74458 9.35523 3.23463 9.15224C3.60218 9 4.06812 9 5 9M19 15V9M19 15C19 15.9428 19 16.4142 18.7071 16.7071C18.4142 17 17.9428 17 17 17C16.0572 17 15.5858 17 15.2929 16.7071C15 16.4142 15 15.9428 15 15V9C15 8.05719 15 7.58579 15.2929 7.29289C15.5858 7 16.0572 7 17 7C17.9428 7 18.4142 7 18.7071 7.29289C19 7.58579 19 8.05719 19 9M19 15C19.9319 15 20.3978 15 20.7654 14.8478C21.2554 14.6448 21.6448 14.2554 21.8478 13.7654C22 13.3978 22 12.9319 22 12C22 11.0681 22 10.6022 21.8478 10.2346C21.6448 9.74458 21.2554 9.35523 20.7654 9.15224C20.3978 9 19.9319 9 19 9M9 12L15 12" stroke="" stroke-width="1.6" stroke-linecap="round"></path>
    </svg>
  </a>
  <a href="#" class="w-10 aspect-square rounded-full bg-gray-50 border-gray-600 border flex items-center justify-center transition-all duration-500 hover:bg-gray-100 hover:border-gray-900">
    <svg class="stroke-gray-700 hover:stroke-gray-900" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
      <path d="M6 5C6 5.75493 7.51556 7.27799 9.50667 7.27799C10.1704 7.27799 11 8.04173 11 8.79666C11 9.55158 10.1704 10.3153 9.50667 10.3153C8.84296 10.3153 7.78519 10.5864 7.78519 11.7943C7.5 13.5 5.65482 13.302 3 13M18 19C18 18.2451 16.4844 16.9238 14.4933 16.9238C13.8296 16.9238 13 16.16 13 15.4051C13 14.6502 13.8296 13.8865 14.4933 13.8865C15.157 13.8865 16.2148 13.6153 16.2148 12.4075C16.5 10.7018 18.3452 10.8998 21 11.2018M21 12C21 16.9706 16.9706 21 12 21C7.02944 21 3 16.9706 3 12C3 7.02944 7.02944 3 12 3C16.9706 3 21 7.02944 21 12Z" stroke="" stroke-width="1.6"></path>
    </svg>
  </a>
  <a href="#" class="w-10 aspect-square rounded-full bg-gray-50 border-gray-600 border flex items-center justify-center transition-all duration-500 hover:bg-gray-100 hover:border-gray-900">
    <svg class="stroke-gray-700 hover:stroke-gray-900" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
      <path d="M16 14C14.8954 14 14 14.8954 14 16C14 17.1046 14.8954 18 16 18C17.1046 18 18 17.1046 18 16C18 14.8954 17.1046 14 16 14ZM16 14V7M9 4L3 4M9 12H3M9 8H5M21 16C21 18.7614 18.7614 21 16 21C13.2386 21 11 18.7614 11 16C11 14.3643 11.7857 12.9122 13 12V6C13 4.34315 14.3431 3 16 3C17.6569 3 19 4.34315 19 6L19.0005 12C20.2147 12.9122 21 14.3644 21 16Z" stroke="" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"></path>
    </svg>
  </a>
  <a href="#" class="w-10 aspect-square rounded-full bg-gray-50 border-gray-600 border flex items-center justify-center transition-all duration-500 hover:bg-gray-100 hover:border-gray-900">
    <svg class="stroke-gray-700 hover:stroke-gray-900" xmlns="http://www.w3.org/2000/svg" width="18" height="20" viewBox="0 0 18 20" fill="none">
      <path d="M17 8C17 9.65685 13.4183 11 9 11C4.58172 11 1 9.65685 1 8M17 12C17 13.6569 13.4183 15 9 15C4.58172 15 1 13.6569 1 12M17 16C17 17.6569 13.4183 19 9 19C4.58172 19 1 17.6569 1 16M17 4C17 5.65685 13.4183 7 9 7C4.58172 7 1 5.65685 1 4C1 2.34315 4.58172 1 9 1C13.4183 1 17 2.34315 17 4Z" stroke="" stroke-width="1.6" stroke-linecap="round"></path>
    </svg>
  </a>
  <a href="#" class="w-10 aspect-square rounded-full bg-gray-50 border-gray-600 border flex items-center justify-center transition-all duration-500 hover:bg-gray-100 hover:border-gray-900"> +20 </a>
</div>
<button class="rounded-lg py-2.5 px-6 text-center w-full text-white bg-indigo-600 font-semibold text-lg transition-all duration-500 hover:bg-indigo-700">contact us</button>
</div>
</div>
</div>

Card With Background Image

In this card image can be used as a card background to provide immense look of card with description inside.

How We Made
Best Sport Shoes

Rounded Avatar
Antonio Roberto
 <div class="w-full relative flex items-center justify-center h-[500px]">
<div class="group bg-white shadow-lg shadow-gray-200 rounded-xl relative transition-all duration-500 w-2/3 h-96 flex items-center justify-center hover:shadow-gray-300" style="background-image: url(https://pagedone.io/asset/uploads/1688029384.png);">
<div class="flex flex-col items-center justify-between w-full h-full py-6 gap-4 text-center relative z-10">
<h4 class="font-manrope font-bold text-3xl text-white text-center leading-snug">How We Made <br>Best Sport Shoes </h4>
<div class="flex items-center justify-center w-full gap-4">
  <img class="w-10 h-10 rounded-full" src="https://pagedone.io/asset/uploads/1704275541.png" alt="Rounded Avatar">
  <h6 class="text-xl font-medium text-white ">Antonio Roberto</h6>
</div>
</div>
</div>
</div>

Cards Grid

Use the tailwind grid class and its grid-cols-* classes to control how many grid columns (wrapped around your cards) you show per row. For example, here's .grid-cols-1 laying out the cards on one column, and .md:grid-cols-2 splitting four cards to equal width across multiple rows, from the medium breakpoint up.

image
Hand made bottles

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Temporibus eveniet ipsa maiores dolores corporis adipisci labore accusamus dicta quasi unde!

image
Sport bicycle

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Temporibus eveniet ipsa maiores dolores corporis adipisci labore accusamus dicta quasi unde!

image
Leather Bag

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Temporibus eveniet ipsa maiores dolores corporis adipisci labore accusamus dicta quasi unde!

image
Sport shoes

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Temporibus eveniet ipsa maiores dolores corporis adipisci labore accusamus dicta quasi unde! 

<div class="w-full relative flex items-center justify-center h-auto">
<div class="grid grid-cols-1 md:grid-cols-2 gap-5">
<div class="rounded-xl bg-white shadow-lg shadow-gray-300 overflow-hidden">
<img src="https://pagedone.io/asset/uploads/1688025668.png" alt="image">
<div class="w-full p-6 ">
  <h5 class="text-xl font-semibold font-manrope text-gray-900 mb-4">Hand made bottles</h5>
  <p class="text-sm font-medium text-gray-600"> Lorem ipsum dolor sit amet consectetur, adipisicing elit. Temporibus eveniet ipsa maiores dolores corporis adipisci labore accusamus dicta quasi unde! </p>
</div>
</div>
<div class="rounded-xl bg-white shadow-lg shadow-gray-300 overflow-hidden">
<img src="https://pagedone.io/asset/uploads/1688029344.png" alt="image">
<div class="w-full p-6 ">
  <h5 class="text-xl font-semibold font-manrope text-gray-900 mb-4">Sport bicycle</h5>
  <p class="text-sm font-medium text-gray-600"> Lorem ipsum dolor sit amet consectetur, adipisicing elit. Temporibus eveniet ipsa maiores dolores corporis adipisci labore accusamus dicta quasi unde! </p>
</div>
</div>
<div class="rounded-xl bg-white shadow-lg shadow-gray-300 overflow-hidden">
<img src="https://pagedone.io/asset/uploads/1688029370.png" alt="image">
<div class="w-full p-6 ">
  <h5 class="text-xl font-semibold font-manrope text-gray-900 mb-4">Leather Bag</h5>
  <p class="text-sm font-medium text-gray-600"> Lorem ipsum dolor sit amet consectetur, adipisicing elit. Temporibus eveniet ipsa maiores dolores corporis adipisci labore accusamus dicta quasi unde! </p>
</div>
</div>
<div class="rounded-xl bg-white shadow-lg shadow-gray-300 overflow-hidden">
<img src="https://pagedone.io/asset/uploads/1688029384.png" alt="image">
<div class="w-full p-6 ">
  <h5 class="text-xl font-semibold font-manrope text-gray-900 mb-4">Sport shoes</h5>
  <p class="text-sm font-medium text-gray-600"> Lorem ipsum dolor sit amet consectetur, adipisicing elit. Temporibus eveniet ipsa maiores dolores corporis adipisci labore accusamus dicta quasi unde! </p>
</div>
</div>
</div>
</div>

Figma

You can also find this component in Figma. Check the Pagedone Figma Design System.

Preview Buy Now
image

1000+ Tailwind Blocks

Access over 1,000 ready-made Tailwind blocks with modern designs to accelerate your design process.

Explore More