Home
ABDO-SY
Cards Seaction - Services block

Cards Seaction - Services block

This tailwind example is contributed by ABDO-SY, on 24-Mar-2025. Component is made with Tailwind CSS v3. It is responsive. similar terms for this example are Frequently asked questions, QnA

Card FAQ

Author ABDO-SY

912

Fork Fullscreen

<section class="mx-auto max-w-[1440px] pt-12">
  <div class="mx-auto grid grid-cols-[550px] justify-center gap-10 md:gap-6 lg:gap-8 xl:grid-cols-[550px_550px] xl:gap-10">
    <div class="inline-flex w-[500px] items-center justify-between overflow-hidden rounded-[45px] bg-[#f3f3f3] p-8 shadow-[0px_5px_0px_0px_rgba(25,26,35,1.00)] outline outline-1 outline-offset-[-1px] outline-[#191a23] sm:ml-[50px] sm:w-[550px] sm:p-12 lg:p-8 xl:m-0 xl:p-12">
      <div class="inline-flex flex-col items-start justify-center gap-[90px]">
        <h2 class="flex flex-col items-start justify-start text-3xl font-medium text-black"><span class="rounded-lg bg-[#b9ff66] px-2">Search engine</span><span class="rounded-lg bg-[#b9ff66] px-2">optimization</span></h2>
        <div class="inline-flex items-center justify-start gap-[15px] font-['Space_Grotesk']">
          <svg width="41" height="41" viewBox="0 0 41 41" fill="none" xmlns="http://www.w3.org/2000/svg">
            <circle cx="20.5" cy="20.5" r="20.5" fill="black"></circle>
            <path d="M11.25 24.701C10.5326 25.1152 10.2867 26.0326 10.701 26.75C11.1152 27.4674 12.0326 27.7133 12.75 27.299L11.25 24.701ZM30.7694 16.3882C30.9838 15.588 30.5089 14.7655 29.7087 14.5511L16.6687 11.0571C15.8685 10.8426 15.046 11.3175 14.8316 12.1177C14.6172 12.9179 15.0921 13.7404 15.8923 13.9548L27.4834 17.0607L24.3776 28.6518C24.1631 29.452 24.638 30.2745 25.4382 30.4889C26.2384 30.7033 27.0609 30.2284 27.2753 29.4282L30.7694 16.3882ZM12.75 27.299L30.0705 17.299L28.5705 14.701L11.25 24.701L12.75 27.299Z" fill="#B9FF66"></path></svg
          ><span class="text-xl leading-7 font-normal text-black">Learn more</span>
        </div>
      </div>
      <img class="w-[210px]" src="https://iili.io/3IZ2HuI.png" />
    </div>
    <div class="inline-flex w-[500px] items-center justify-between overflow-hidden rounded-[45px] bg-[#b9ff66] p-8 shadow-[0px_5px_0px_0px_rgba(25,26,35,1.00)] outline outline-1 outline-offset-[-1px] outline-[#191a23] sm:ml-[-50px] sm:w-[550px] sm:p-12 lg:p-8 xl:m-0 xl:p-12">
      <div class="inline-flex flex-col items-start justify-center gap-[90px]">
        <h2 class="flex flex-col items-start justify-start text-3xl font-medium text-black"><span class="rounded-lg bg-[#f3f3f3] px-2">Pay-per-click</span><span class="rounded-lg bg-[#f3f3f3] px-2">advertising</span></h2>
        <div class="inline-flex items-center justify-start gap-[15px] font-['Space_Grotesk']">
          <svg width="41" height="41" viewBox="0 0 41 41" fill="none" xmlns="http://www.w3.org/2000/svg">
            <circle cx="20.5" cy="20.5" r="20.5" fill="black"></circle>
            <path d="M11.25 24.701C10.5326 25.1152 10.2867 26.0326 10.701 26.75C11.1152 27.4674 12.0326 27.7133 12.75 27.299L11.25 24.701ZM30.7694 16.3882C30.9838 15.588 30.5089 14.7655 29.7087 14.5511L16.6687 11.0571C15.8685 10.8426 15.046 11.3175 14.8316 12.1177C14.6172 12.9179 15.0921 13.7404 15.8923 13.9548L27.4834 17.0607L24.3776 28.6518C24.1631 29.452 24.638 30.2745 25.4382 30.4889C26.2384 30.7033 27.0609 30.2284 27.2753 29.4282L30.7694 16.3882ZM12.75 27.299L30.0705 17.299L28.5705 14.701L11.25 24.701L12.75 27.299Z" fill="#B9FF66"></path></svg
          ><span class="text-xl leading-7 font-normal text-black">Learn more</span>
        </div>
      </div>
      <img class="w-[210px]" src="https://iili.io/3IZdmaR.png" />
    </div>
    <div class="inline-flex w-[500px] items-center justify-between overflow-hidden rounded-[45px] bg-[#191A23] p-8 shadow-[0px_5px_0px_0px_rgba(25,26,35,1.00)] outline outline-1 outline-offset-[-1px] outline-[#191a23] sm:ml-[50px] sm:w-[550px] sm:p-12 lg:p-8 xl:m-0 xl:p-12">
      <div class="inline-flex flex-col items-start justify-center gap-[90px]">
        <h2 class="flex flex-col items-start justify-start text-3xl font-medium text-black"><span class="rounded-lg bg-[#f3f3f3] px-2">Social Media</span><span class="rounded-lg bg-[#f3f3f3] px-2">Marketing</span></h2>
        <div class="inline-flex items-center justify-start gap-[15px] font-['Space_Grotesk']">
          <svg width="41" height="41" viewBox="0 0 41 41" fill="none" xmlns="http://www.w3.org/2000/svg">
            <circle cx="20.5" cy="20.5" r="20.5" fill="white"></circle>
            <path d="M11.25 24.701C10.5326 25.1152 10.2867 26.0326 10.701 26.75C11.1152 27.4674 12.0326 27.7133 12.75 27.299L11.25 24.701ZM30.7694 16.3882C30.9838 15.588 30.5089 14.7655 29.7087 14.5511L16.6687 11.0571C15.8685 10.8426 15.046 11.3175 14.8316 12.1177C14.6172 12.9179 15.0921 13.7404 15.8923 13.9548L27.4834 17.0607L24.3776 28.6518C24.1631 29.452 24.638 30.2745 25.4382 30.4889C26.2384 30.7033 27.0609 30.2284 27.2753 29.4282L30.7694 16.3882ZM12.75 27.299L30.0705 17.299L28.5705 14.701L11.25 24.701L12.75 27.299Z" fill="#000"></path></svg
          ><span class="text-xl leading-7 font-normal text-white">Learn more</span>
        </div>
      </div>
      <img class="w-[210px]" src="https://iili.io/3IZdyyN.png" />
    </div>
    <div class="inline-flex w-[500px] items-center justify-between overflow-hidden rounded-[45px] bg-[#f3f3f3] p-8 shadow-[0px_5px_0px_0px_rgba(25,26,35,1.00)] outline outline-1 outline-offset-[-1px] outline-[#191a23] sm:ml-[-50px] sm:w-[550px] sm:p-12 lg:p-8 xl:m-0 xl:p-12">
      <div class="inline-flex flex-col items-start justify-center gap-[90px]">
        <h2 class="flex flex-col items-start justify-start text-3xl font-medium text-black"><span class="rounded-lg bg-[#b9ff66] px-2">Email</span><span class="rounded-lg bg-[#b9ff66] px-2">Marketing</span></h2>
        <div class="inline-flex items-center justify-start gap-[15px] font-['Space_Grotesk']">
          <svg width="41" height="41" viewBox="0 0 41 41" fill="none" xmlns="http://www.w3.org/2000/svg">
            <circle cx="20.5" cy="20.5" r="20.5" fill="black"></circle>
            <path d="M11.25 24.701C10.5326 25.1152 10.2867 26.0326 10.701 26.75C11.1152 27.4674 12.0326 27.7133 12.75 27.299L11.25 24.701ZM30.7694 16.3882C30.9838 15.588 30.5089 14.7655 29.7087 14.5511L16.6687 11.0571C15.8685 10.8426 15.046 11.3175 14.8316 12.1177C14.6172 12.9179 15.0921 13.7404 15.8923 13.9548L27.4834 17.0607L24.3776 28.6518C24.1631 29.452 24.638 30.2745 25.4382 30.4889C26.2384 30.7033 27.0609 30.2284 27.2753 29.4282L30.7694 16.3882ZM12.75 27.299L30.0705 17.299L28.5705 14.701L11.25 24.701L12.75 27.299Z" fill="#B9FF66"></path></svg
          ><span class="text-xl leading-7 font-normal text-black">Learn more</span>
        </div>
      </div>
      <img class="w-[210px]" src="https://iili.io/3IZ2dZX.png" />
    </div>
    <div class="inline-flex w-[500px] items-center justify-between overflow-hidden rounded-[45px] bg-[#b9ff66] p-8 shadow-[0px_5px_0px_0px_rgba(25,26,35,1.00)] outline outline-1 outline-offset-[-1px] outline-[#191a23] sm:ml-[50px] sm:w-[550px] sm:p-12 lg:p-8 xl:m-0 xl:p-12">
      <div class="inline-flex flex-col items-start justify-center gap-[90px]">
        <h2 class="flex flex-col items-start justify-start text-3xl font-medium text-black"><span class="rounded-lg bg-[#f3f3f3] px-2">Content</span><span class="rounded-lg bg-[#f3f3f3] px-2">Creation</span></h2>
        <div class="inline-flex items-center justify-start gap-[15px] font-['Space_Grotesk']">
          <svg width="41" height="41" viewBox="0 0 41 41" fill="none" xmlns="http://www.w3.org/2000/svg">
            <circle cx="20.5" cy="20.5" r="20.5" fill="black"></circle>
            <path d="M11.25 24.701C10.5326 25.1152 10.2867 26.0326 10.701 26.75C11.1152 27.4674 12.0326 27.7133 12.75 27.299L11.25 24.701ZM30.7694 16.3882C30.9838 15.588 30.5089 14.7655 29.7087 14.5511L16.6687 11.0571C15.8685 10.8426 15.046 11.3175 14.8316 12.1177C14.6172 12.9179 15.0921 13.7404 15.8923 13.9548L27.4834 17.0607L24.3776 28.6518C24.1631 29.452 24.638 30.2745 25.4382 30.4889C26.2384 30.7033 27.0609 30.2284 27.2753 29.4282L30.7694 16.3882ZM12.75 27.299L30.0705 17.299L28.5705 14.701L11.25 24.701L12.75 27.299Z" fill="#B9FF66"></path></svg
          ><span class="text-xl leading-7 font-normal text-black">Learn more</span>
        </div>
      </div>
      <img class="w-[210px]" src="https://iili.io/3IZ2Jjt.png" />
    </div>
    <div class="inline-flex w-[500px] items-center justify-between overflow-hidden rounded-[45px] bg-[#191A23] p-8 shadow-[0px_5px_0px_0px_rgba(25,26,35,1.00)] outline outline-1 outline-offset-[-1px] outline-[#191a23] sm:ml-[-50px] sm:w-[550px] sm:p-12 lg:p-8 xl:m-0 xl:p-12">
      <div class="inline-flex flex-col items-start justify-center gap-[90px]">
        <h2 class="flex flex-col items-start justify-start text-3xl font-medium text-black"><span class="rounded-lg bg-[#f3f3f3] px-2">Analytics and </span><span class="rounded-lg bg-[#f3f3f3] px-2">Tracking</span></h2>
        <div class="inline-flex items-center justify-start gap-[15px] font-['Space_Grotesk']">
          <svg width="41" height="41" viewBox="0 0 41 41" fill="none" xmlns="http://www.w3.org/2000/svg">
            <circle cx="20.5" cy="20.5" r="20.5" fill="white"></circle>
            <path d="M11.25 24.701C10.5326 25.1152 10.2867 26.0326 10.701 26.75C11.1152 27.4674 12.0326 27.7133 12.75 27.299L11.25 24.701ZM30.7694 16.3882C30.9838 15.588 30.5089 14.7655 29.7087 14.5511L16.6687 11.0571C15.8685 10.8426 15.046 11.3175 14.8316 12.1177C14.6172 12.9179 15.0921 13.7404 15.8923 13.9548L27.4834 17.0607L24.3776 28.6518C24.1631 29.452 24.638 30.2745 25.4382 30.4889C26.2384 30.7033 27.0609 30.2284 27.2753 29.4282L30.7694 16.3882ZM12.75 27.299L30.0705 17.299L28.5705 14.701L11.25 24.701L12.75 27.299Z" fill="#000"></path></svg
          ><span class="text-xl leading-7 font-normal text-white">Learn more</span>
        </div>
      </div>
      <img class="w-[210px]" src="https://iili.io/3IZ23nn.png" />
    </div>
  </div>
</section>

Related Examples

Website Pricing List Card Component
Website Pricing List Card Component with Package Names: Basic Package → Starter Website Premium Package → Business Website Professional Package → E-Commerce Solution Pricing Structure: Increased prices significantly to reflect web development services one-time payment model FAQ Content.

Author:
Ayyamperumal S

5 months ago

825
Information card

Author:
Samuel Dawson

2 years ago

11.8k
Attractive Feature Section
With Gradient Color 6 Features

Author:
KULDEEP

1 month ago

256
Card
Card with Likes and download Button

Author:
Mrunal Solkar

2 years ago

10.1k
Card-Product
Product card for vertical windows, if you need a more complete version to show more information, you have other options in my profile

Author:
Ameth Galarcio

1 year ago

2.2k
Card
Jobs recommended for you LinkedIn Clone

$$@(\/)(\/)Y$ Author:
$@(\/)(\/)Y

4 months ago

658
Hover effect card with background image
Beautiful card with background image, hover effect and gradient

Author:
Walid Ahmad

1 year ago

3.2k
animated blog cards with Tailwind CSS

Author:
Michael Andreuzza

1 year ago

4.8k
Card section
Card section. find it makecomponents.com

Author:
makecomponents

11 months ago

1.4k
Labs card
Lab item list card

Author:
Sedat Kumcu

10 months ago

1.6k
Play Music - Reproductor
Multimedia music player, with its respective dark mode

Author:
Ameth Galarcio

1 year ago

2.1k
Image cards

Author:
Reuben Enahoro

9 months ago

1.5k

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components