Cards Seaction - Services block

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

Card FAQ

Author ABDO-SY

Tailwind v3.4 2.4k 5

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.

Ayyamperumal S

1 year ago

1.7k
Free SEO Audit & Analysis Tool
Instant SEO analysis of your website. Check 50+ ranking factors including on-page SEO, technical issues, and mobile performance.

MD Mostafa Niloy

11 months ago

759
Modern Responsive Pricing Section with Toggle
A sleek, responsive pricing section built with HTML and Tailwind CSS, showcasing three distinct plans (e.g., Free, Pro, Expert) in a card layout. It features a clean monthly/yearly toggle switch with savings indication, highlights a recommended plan with distinct styling and a badge, and uses checkmarks for clear feature comparison. The layout stacks vertically on smaller screens and transitions to a 3-column grid on large screens (lg breakpoint). Includes generic content for easy adaptation and a final "Compare Plans" button.

Hamza Atig

1 year ago

1.8k
Elevated feature card

magersa

2 years ago

5k
Tailwind card with gradient border

Elijah Davis

3 years ago

16.2k
Responsive Projects Section

ariaw

1 year ago

1.4k
Product Card for eCommerce
Here is a Product Card with discount badge, price with discount and price normally. On other hand, buttons for up or down quantity and add to cart button. This is create for Grid Columns, wich can 4 or 5 depend for desktop

Andrés Abarzúa

1 year ago

1.3k
Pokemon!
Cool Pokemon card!

Crimson

1 year ago

2.1k
masonary grids effect for cards using columns
As part of the redesign I was trying to think of ways to lay out testimonials from students, which may have varying length/content, I stumbled onto the idea of using a masonry layout (think bricks, think Pinterest).

rohit whyphy

1 year ago

1.6k
card
simple card for begin

Omer fils ELENGA

1 year ago

2.7k
Features

Michael Andreuzza

2 years ago

5.7k
Holiday package card
Responsive card

Aman kumar

2 years ago

7.2k