Our services component

This tailwind example is contributed by Kris Showen, on 08-Jun-2023. Component is made with Tailwind v3.4. It is responsive. similar terms for this example are Services,Why choose us

Feature showcase

Author Kris Showen

Tailwind v3.4 10.6k 19

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>