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

756

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

4 months ago

653
Info cards for admin panel

Author:
Sophia Baker

2 years ago

11.3k
component

Author:
pablitodgb

1 month ago

124
Modern E-commerce Product Card with TailwindCSS
This product card is designed for e-commerce platforms using TailwindCSS. It features a discount badge, product image carousel, quick view and quick order buttons, ratings, product name, brand details, dynamic pricing with a strike-through original price, and a prominent add-to-cart button. The clean and professional layout is perfect for showcasing products on online stores.

Author:
SHARIFUL ISLAM

5 months ago

1.3k
Group hover card
article card

Author:
Sienna

2 years ago

11k
Author card
Author card for giving credit to the author of the Blog/Article. It has social media icons and user image

Author:
Prajwal Hallale

1 year ago

7.2k
Tailwind image card with text above it

Author:
I.P. Leroy

2 years ago

23.4k
Stats card with icons
Improved Code quality and added support for dark mode

Author:
Dika Rahman

10 months ago

1.4k
grid card

Author:
Md. Tofayel islam

9 months ago

1.2k
Profile Card

Author:
Crimson

6 months ago

595
Responsive Cards

Author:
Anonymous

1 year ago

1.3k
email card
email card

Author:
Rushikesh Latpate

3 weeks ago

77

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components