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

138

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

3 weeks ago

153
LinkedIn Post UI Mockup
A static HTML and Tailwind CSS component designed to replicate the user interface of a LinkedIn post. This mockup accurately represents the post structure including the header (avatar, name, headline, timestamp), content area (text, optional media), engagement statistics (likes, comments, reposts), and the action bar (Like, Comment, Repost, Send). It's fully responsive, supports light and dark themes, and uses appropriate iconography and styling to closely mimic the LinkedIn feed experience.

Author:
Hamza Atig

6 days ago

65
Feature card

Author:
Matti

3 months ago

680
FAQ with Tailwind CSS and Alpine.js

Author:
ᴀʀ!ᴀ

1 month ago

130
card Alert - icons - glass

Author:
ABDO-SY

1 month ago

204
Feature Card

Author:
Md. Tofayel islam

6 months ago

1.1k
FAQ page

Author:
R Thapa

1 year ago

14.6k
Card

Author:
Samuel Abera

3 months ago

744
FAQ.
Super simple animated FAQ with tailwind group hoverable accordion open and close.

Author:
inbarajan P

7 months ago

1.2k
Responsive Portfolio Webpage with Tailwind CSS
This is a reusable and responsive portfolio webpage template created with HTML and Tailwind CSS. Designed for developers or creatives, the template includes essential sections like Header, Hero, About, Skills, Experience, Projects, Testimonials, Contact Form, and Footer. It features a clean, modern design and is fully customizable without requiring JavaScript. Perfect for showcasing personal or professional work on the web.

Author:
Ayyamperumal S

2 months ago

902
Beautiful card design with image

Author:
Brandon D

2 years ago

12.2k
Food delivery ecommerce Card

Author:
Samuel Abera

3 months ago

697

Explore components by Tags

Didn't find component you were looking for?

Search from 2100+ components