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

274

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

2 months ago

387
Responsive Testimonial Card with stars ratings

Author:
Quentin Rivers

7 months ago

1.3k
Product review card

Author:
Moriba Traore

2 years ago

14.6k
Profile card

Author:
Mr Robot

2 years ago

12k
YouTube Community Post UI Mockup
A static HTML and Tailwind CSS component mimicking the user interface of a YouTube Community Post. This mockup features the channel header (avatar, name, verified badge, timestamp), post content (text and optional media), engagement actions (Like, Dislike, Comment, Share with counts), and the 'Add a comment' section. It's designed to be responsive, supports YouTube's light and dark themes via custom styling, and uses accurate iconography.

Author:
Hamza Atig

1 month ago

289
FAQ cards
FAQ section with cards

Author:
Moriba Traore

2 years ago

13.7k
PLAN SECTION

Author:
ABDO-SY

1 month ago

61
Features

Author:
Michael Andreuzza

1 year ago

3.9k
Info Card
Information card with image

Author:
Brandon D

2 years ago

8.8k
animated blog cards with Tailwind CSS

Author:
Michael Andreuzza

1 year ago

4.3k
Feature Card

Author:
Md. Tofayel islam

7 months ago

1.3k
Hover effect card with background image
Beautiful card with background image, hover effect and gradient

Author:
Walid Ahmad

9 months ago

2.8k

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components