Home
Anonymous
Our services component

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 CSS v3. It is responsive. similar terms for this example are Services,Why choose us

Feature showcase

Author Anonymous

1.7k

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

Features section

Author:
ariaw

1 month ago

33
Key Features
Showcase Key Features of your app

Author:
Anonymous

1 year ago

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

Author:
Mike Varen

1 year ago

4.1k
Warb feature
Here another idea... [update] - mobile device fixed (curr iPh, Smg)

Author:
Matti

11 months ago

2.2k
Simple Features section

Author:
Odessa Young

2 years ago

16.8k
Feature cards for company website
Each card provides a brief description of a specific feature, making it easy for users to understand the benefits and capabilities of our services

Author:
Anonymous

2 years ago

7.3k
Why Us section with hover animation
Why to choose us section, responsive and hove animation

Author:
Amit Pachange

1 year ago

4.8k
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

9 months ago

1.7k
Responsive Features Section

Author:
Abdul Baset Bappy

5 months ago

816
Feature section - Htmlwind
Three columns with icons

Author:
Htmlwind

5 months ago

354
Feature Card
Elevated card

Author:
Prajwal Hallale

3 years ago

10.5k
Highlights - Speakers Section

Author:
ABDO-SY

7 months ago

698

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components