Home
makecomponents
Services

Services

Card Services Section. find it makecomponents.com

This tailwind example is contributed by makecomponents, on 20-Aug-2024. Component is made with Tailwind CSS v3. It is responsive. similar terms for this example are Services,Why choose us

Card Feature showcase

Author makecomponents

1.3k

Fork Fullscreen

<div class="py-40 px-4 container mx-auto">
        <section>
          <div class=" grid lg:grid-cols-4 lge:grid-cols-3 md:grid-cols-3 mdsm:grid-cols-2 sm:grid-cols-1 gap-10 ">
            <div class=" group bg-[#5700c9] w-56  mx-auto  p-8 px-4 rounded-lg">
              <div class=" flex justify-end ">
                <svg
                  stroke="currentColor"
                  fill="currentColor"
                  stroke-width="0"
                  viewBox="0 0 24 24"
                  class="group-hover:-translate-y-6 duration-700  text-[60px] text-[#7812ff]"
                  height="1em"
                  width="1em"
                  xmlns="http://www.w3.org/2000/svg"
                >
                  <path d="M13.0003 21H18.0003V23H6.00032V21H11.0003V19.9506C7.70689 19.6236 4.88351 17.6987 3.31641 14.9622L5.05319 13.9697C6.43208 16.3776 9.02674 18 12.0003 18C16.4186 18 20.0003 14.4182 20.0003 9.99995C20.0003 7.02637 18.378 4.43171 15.9701 3.05282L16.9626 1.31604C19.9724 3.03965 22.0003 6.28297 22.0003 9.99995C22.0003 15.1853 18.0536 19.4489 13.0003 19.9506V21ZM12.0003 17C8.13433 17 5.00032 13.8659 5.00032 9.99995C5.00032 6.13396 8.13433 2.99995 12.0003 2.99995C15.8663 2.99995 19.0003 6.13396 19.0003 9.99995C19.0003 13.8659 15.8663 17 12.0003 17ZM12.0003 15C14.7617 15 17.0003 12.7614 17.0003 9.99995C17.0003 7.23853 14.7617 4.99995 12.0003 4.99995C9.2389 4.99995 7.00032 7.23853 7.00032 9.99995C7.00032 12.7614 9.2389 15 12.0003 15Z"></path>
                </svg>
              </div>
              <p class="pt-16 group-hover:-translate-y-6 duration-700  text-2xl text-[#f2f2f2]">
                Lorem Ipsum is simply dummy text of the printing.
              </p>
            </div>
            <div class="group bg-[#6C0345] w-56 mx-auto  p-8 px-4 rounded-lg">
              <div class=" flex justify-end">
                <svg
                  stroke="currentColor"
                  fill="currentColor"
                  stroke-width="0"
                  viewBox="0 0 24 24"
                  class="group-hover:-translate-y-6 duration-700  text-[60px] text-[#ffedc57a]"
                  height="1em"
                  width="1em"
                  xmlns="http://www.w3.org/2000/svg"
                >
                  <path fill="none" d="M0 0h24v24H0z"></path>
                  <path d="M12 1 3 5v6c0 5.55 3.84 10.74 9 12 5.16-1.26 9-6.45 9-12V5l-9-4zm0 10.99h7c-.53 4.12-3.28 7.79-7 8.94V12H5V6.3l7-3.11v8.8z"></path>
                </svg>
              </div>
              <p class="pt-16 group-hover:-translate-y-6 duration-700   text-2xl text-[#f2f2f2]">
                Lorem Ipsum is simply dummy text of the printing.
              </p>
            </div>
            <div class="group bg-[#cf021a] w-56  mx-auto  p-8 px-4 rounded-lg">
              <div class=" flex justify-end">
                <svg
                  stroke="currentColor"
                  fill="currentColor"
                  stroke-width="0"
                  viewBox="0 0 24 24"
                  class="group-hover:-translate-y-6 duration-700  text-[60px] text-[#f569797a]"
                  height="1em"
                  width="1em"
                  xmlns="http://www.w3.org/2000/svg"
                >
                  <path d="m19.707 4.293-1.414 1.414c2.733 2.733 2.733 7.353 0 10.086l1.414 1.414c3.5-3.5 3.5-9.414 0-12.914zm-4.414 4.414c.566.566.879 1.292.879 2.043s-.313 1.477-.879 2.043l1.414 1.414c.944-.943 1.465-2.172 1.465-3.457s-.521-2.514-1.465-3.457l-1.414 1.414zm-9.086-3L4.793 4.293c-3.5 3.5-3.5 9.414 0 12.914l1.414-1.414c-2.733-2.733-2.733-7.353 0-10.086z"></path>
                  <path d="M7.293 7.293c-.944.943-1.465 2.172-1.465 3.457s.521 2.514 1.465 3.457l1.414-1.414c-.566-.566-.879-1.292-.879-2.043s.313-1.477.879-2.043L7.293 7.293zM14 10.5a2 2 0 0 0-4 0 1.993 1.993 0 0 0 .895 1.666L10.002 22h3.996l-.893-9.835c.54-.358.895-.97.895-1.665z"></path>
                </svg>
              </div>
              <p class="pt-16 group-hover:-translate-y-6 duration-700   text-2xl text-[#f2f2f2]">
                Lorem Ipsum is simply dummy text of the printing.
              </p>
            </div>
            <div class="group bg-[#5a5a5a] w-56 mx-auto  p-8 px-4 rounded-lg">
              <div class=" flex justify-end">
                <svg
                  stroke="currentColor"
                  fill="currentColor"
                  stroke-width="0"
                  viewBox="0 0 16 16"
                  class="group-hover:-translate-y-6 duration-700  text-[60px] text-[#a9a8a857]"
                  height="1em"
                  width="1em"
                  xmlns="http://www.w3.org/2000/svg"
                >
                  <path d="M3 2.5A1.5 1.5 0 0 1 4.5 1h1A1.5 1.5 0 0 1 7 2.5V5h2V2.5A1.5 1.5 0 0 1 10.5 1h1A1.5 1.5 0 0 1 13 2.5v2.382a.5.5 0 0 0 .276.447l.895.447A1.5 1.5 0 0 1 15 7.118V14.5a1.5 1.5 0 0 1-1.5 1.5h-3A1.5 1.5 0 0 1 9 14.5v-3a.5.5 0 0 1 .146-.354l.854-.853V9.5a.5.5 0 0 0-.5-.5h-3a.5.5 0 0 0-.5.5v.793l.854.853A.5.5 0 0 1 7 11.5v3A1.5 1.5 0 0 1 5.5 16h-3A1.5 1.5 0 0 1 1 14.5V7.118a1.5 1.5 0 0 1 .83-1.342l.894-.447A.5.5 0 0 0 3 4.882zM4.5 2a.5.5 0 0 0-.5.5V3h2v-.5a.5.5 0 0 0-.5-.5zM6 4H4v.882a1.5 1.5 0 0 1-.83 1.342l-.894.447A.5.5 0 0 0 2 7.118V13h4v-1.293l-.854-.853A.5.5 0 0 1 5 10.5v-1A1.5 1.5 0 0 1 6.5 8h3A1.5 1.5 0 0 1 11 9.5v1a.5.5 0 0 1-.146.354l-.854.853V13h4V7.118a.5.5 0 0 0-.276-.447l-.895-.447A1.5 1.5 0 0 1 12 4.882V4h-2v1.5a.5.5 0 0 1-.5.5h-3a.5.5 0 0 1-.5-.5zm4-1h2v-.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5zm4 11h-4v.5a.5.5 0 0 0 .5.5h3a.5.5 0 0 0 .5-.5zm-8 0H2v.5a.5.5 0 0 0 .5.5h3a.5.5 0 0 0 .5-.5z"></path>
                </svg>
              </div>
              <p class="pt-16 group-hover:-translate-y-6 duration-700   text-2xl text-[#f2f2f2]">
                Lorem Ipsum is simply dummy text of the printing.
              </p>
            </div>
          </div>
        </section>
      </div>

Related Examples