Our services component

Forked from @kris-showen/our-services-component

This tailwind example is contributed by Anonymous, on 12-Jul-2024. Component is made with Tailwind v3.4. It is responsive. similar terms for this example are Services,Why choose us

Feature showcase

Author Anonymous

Tailwind v3.4 2.6k 10

Fork Fullscreen

<div class="max-w-xl mb-10 md:mx-auto sm:text-center lg:max-w-2xl md:mb-12">
        <div>
            <p
                class="inline-block px-3 py-px mb-4 text-xs font-semibold tracking-wider text-teal-900 uppercase rounded-full bg-sky-500 text-white">
                Brand new
            </p>
        </div>
        <h2
            class="max-w-lg mb-6 font-sans text-3xl font-bold leading-none tracking-tight text-gray-900 sm:text-4xl md:mx-auto">
            <span class="relative inline-block">

<span class="relative">The</span>
            </span>
            quick, brown fox jumps over a lazy dog
        </h2>
        <p class="text-base text-gray-700 md:text-lg">Sed ut perspiciatis unde omnis iste natus error sit voluptatem
            accusantium doloremque rem aperiam, eaque ipsa quae.
        </p>
    </div>

<div class="grid max-w-md gap-8 row-gap-10 sm:mx-auto lg:max-w-full lg:grid-cols-3">
        <div class="flex flex-col sm:flex-row">
            <div class="sm:mr-4">
                <div class="flex items-center justify-center w-16 h-16 mb-4 rounded-full bg-green-50">
                    <svg class="w-12 h-12 text-green-400" stroke="currentColor" viewBox="0 0 52 52">
                        <polygon stroke-width="3" stroke-linecap="round" stroke-linejoin="round" fill="none"
                            points="29 13 14 29 25 29 23 39 38 23 27 23"></polygon>
                    </svg>
                </div>
            </div>
            <div>
                <h6 class="mb-2 font-semibold leading-5">Website Development:</h6>
                <p class="mb-3 text-sm text-gray-900">
                    Our website development service offers end-to-end solutions for creating and launching professional
                    and visually appealing websites.
                </p>
                <ul class="mb-4 -ml-1 space-y-2">
                    <li class="flex items-start">
                        <span class="mr-1">
                            <svg class="w-5 h-5 mt-px text-green-400" stroke="currentColor" viewBox="0 0 52 52">
                                <polygon stroke-width="4" stroke-linecap="round" stroke-linejoin="round" fill="none"
                                    points="29 13 14 29 25 29 23 39 38 23 27 23"></polygon>
                            </svg>
                        </span>
                        Computers
                    </li>
                    <li class="flex items-start">
                        <span class="mr-1">
                            <svg class="w-5 h-5 mt-px text-green-400" stroke="currentColor" viewBox="0 0 52 52">
                                <polygon stroke-width="4" stroke-linecap="round" stroke-linejoin="round" fill="none"
                                    points="29 13 14 29 25 29 23 39 38 23 27 23"></polygon>
                            </svg>
                        </span>
                        Health
                    </li>
                    <li class="flex items-start">
                        <span class="mr-1">
                            <svg class="w-5 h-5 mt-px text-green-400" stroke="currentColor" viewBox="0 0 52 52">
                                <polygon stroke-width="4" stroke-linecap="round" stroke-linejoin="round" fill="none"
                                    points="29 13 14 29 25 29 23 39 38 23 27 23"></polygon>
                            </svg>
                        </span>
                        Reference
                    </li>
                </ul>
                <a href="/" aria-label=""
                    class="inline-flex items-center font-semibold transition-colors duration-200 text-green-400 hover:text-green-800">Learn
                    more
                </a>
            </div>
        </div>
        <div class="flex flex-col sm:flex-row">
            <div class="sm:mr-4">
                <div class="flex items-center justify-center w-16 h-16 mb-4 rounded-full bg-green-50">
                    <svg class="w-12 h-12 text-green-400" stroke="currentColor" viewBox="0 0 52 52">
                        <polygon stroke-width="3" stroke-linecap="round" stroke-linejoin="round" fill="none"
                            points="29 13 14 29 25 29 23 39 38 23 27 23"></polygon>
                    </svg>
                </div>
            </div>
            <div>
                <h6 class="mb-2 font-semibold leading-5">Social Media Marketing:</h6>
                <p class="mb-3 text-sm text-gray-900">
                    Our social media marketing service helps businesses establish a
                    strong online presence and engage with their target audience effectively.
                </p>
                <ul class="mb-4 -ml-1 space-y-2">
                    <li class="flex items-start">
                        <span class="mr-1">
                            <svg class="w-5 h-5 mt-px text-green-400" stroke="currentColor" viewBox="0 0 52 52">
                                <polygon stroke-width="4" stroke-linecap="round" stroke-linejoin="round"
                                    fill="none" points="29 13 14 29 25 29 23 39 38 23 27 23"></polygon>
                            </svg>
                        </span>
                        Computers
                    </li>
                    <li class="flex items-start">
                        <span class="mr-1">
                            <svg class="w-5 h-5 mt-px text-green-400" stroke="currentColor" viewBox="0 0 52 52">
                                <polygon stroke-width="4" stroke-linecap="round" stroke-linejoin="round"
                                    fill="none" points="29 13 14 29 25 29 23 39 38 23 27 23"></polygon>
                            </svg>
                        </span>
                        Health
                    </li>
                    <li class="flex items-start">
                        <span class="mr-1">
                            <svg class="w-5 h-5 mt-px text-green-400" stroke="currentColor" viewBox="0 0 52 52">
                                <polygon stroke-width="4" stroke-linecap="round" stroke-linejoin="round"
                                    fill="none" points="29 13 14 29 25 29 23 39 38 23 27 23"></polygon>
                            </svg>
                        </span>
                        Reference
                    </li>
                </ul>
                <a href="/" aria-label=""
                    class="inline-flex items-center font-semibold transition-colors duration-200 text-green-400 hover:text-green-800">Learn
                    more
                </a>
            </div>
        </div>
        <div class="flex flex-col sm:flex-row">
            <div class="sm:mr-4">
                <div class="flex items-center justify-center w-16 h-16 mb-4 rounded-full bg-green-50">
                    <svg class="w-12 h-12 text-green-400" stroke="currentColor" viewBox="0 0 52 52">
                        <polygon stroke-width="3" stroke-linecap="round" stroke-linejoin="round" fill="none"
                            points="29 13 14 29 25 29 23 39 38 23 27 23"></polygon>
                    </svg>
                </div>
            </div>
            <div>
                <h6 class="mb-2 font-semibold leading-5">Content Writing and Copywriting:</h6>
                <p class="mb-3 text-sm text-gray-900">
                    Our content writing and copywriting service offers high-quality and engaging content that captivates
                    your audience and drives conversions.
                </p>
                <ul class="mb-4 -ml-1 space-y-2">
                    <li class="flex items-start">
                        <span class="mr-1">
                            <svg class="w-5 h-5 mt-px text-green-400" stroke="currentColor" viewBox="0 0 52 52">
                                <polygon stroke-width="4" stroke-linecap="round" stroke-linejoin="round"
                                    fill="none" points="29 13 14 29 25 29 23 39 38 23 27 23"></polygon>
                            </svg>
                        </span>
                        Computers
                    </li>
                    <li class="flex items-start">
                        <span class="mr-1">
                            <svg class="w-5 h-5 mt-px text-green-400" stroke="currentColor" viewBox="0 0 52 52">
                                <polygon stroke-width="4" stroke-linecap="round" stroke-linejoin="round"
                                    fill="none" points="29 13 14 29 25 29 23 39 38 23 27 23"></polygon>
                            </svg>
                        </span>
                        Health
                    </li>
                    <li class="flex items-start">
                        <span class="mr-1">
                            <svg class="w-5 h-5 mt-px text-green-400" stroke="currentColor" viewBox="0 0 52 52">
                                <polygon stroke-width="4" stroke-linecap="round" stroke-linejoin="round"
                                    fill="none" points="29 13 14 29 25 29 23 39 38 23 27 23"></polygon>
                            </svg>
                        </span>
                        Reference
                    </li>
                </ul>
                <a href="/" aria-label=""
                    class="inline-flex items-center font-semibold transition-colors duration-200 text-green-400 hover:text-green-800">Learn
                    more
                </a>
            </div>
        </div>
    </div>

</div>

Related Examples

Hotel rooms
A simple room overview

Matti

1 year ago

2.1k
SaaS Feature Section
It has a Gradient text headline and CTA buttons

Junclarkaizen Pagu

2 years ago

10.1k
Meet the Team Section with Team Member Cards
Meet the Team Section with Team Member Cards

Mike Varen

2 years ago

5.2k
Features grid with icon

Freja Jensen

3 years ago

11.7k
Showcase
A version of an showcase.

Matti

1 year ago

1.9k
Responsive Features Section
It's a Handy Ready to Use Responsive Features or Services Component with Dark Mode

Ragnar lodbrok

2 years ago

6k
free tailwind personal portfolio template
free tailwind personal portfolio template

Geoffrey Callaghan

2 years ago

5.9k
Responsive Card Grid
Tailwind CSS responsive grid for feature listing. The cards have a teal background, rounded corners, and a concise display of feature titles, descriptions, and a "Learn More" link.

Amit Pachange

4 years ago

53.8k
Feature Showcase Section with Font Awesome Icons
showcase the features of a product or service. The features are presented in a grid.

Kavita Joshi

2 years ago

7.4k
Feature cards with icons on top

Manon Daniel

3 years ago

18.2k
Products Layout
An ecommerce store front product list layout

Developer Kwame

1 year ago

1.1k
Feature overview cards
The component is designed to be responsive, featuring a title, a brief description, and a set of cards presenting key metrics.

Nikita

2 years ago

5.8k