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

885

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 list with icons

Author:
L.J. Weber

1 year ago

12.6k
Services showcase Section
With hover effect on cards

Author:
Anonymous

8 months ago

1.4k
countdown with Tailwind CSS and Alpinejs

Author:
Michael Andreuzza

9 months ago

1.3k
Showcase Your Services with Interactive Animations: A Modern HTML and Tailwind CSS Example
Discover how to create an eye-catching services section using plain HTML and Tailwind CSS. This modern example features interactive animations that bring your services to life. With smooth hover effects and responsive design, this section is perfect for enhancing your website's user experience. Easily customize the content to fit your needs, and let Tailwind CSS handle the styling and transitions for a polished, professional look.

Author:
Hezron Okoko

5 months ago

1.1k
Feature card

Author:
Matti

3 weeks ago

113
Tailwind css feature cards

Author:
Kofi Osei

2 years ago

10.2k
Feature showcase with images

Author:
Amit Pachange

2 years ago

12.4k
Applications Showcase
This is a stylish and interactive application showcase component designed for web use. It features the following elements: Background Styling: The main container has a rounded-rectangle shape (rounded-3xl) with a subtle white base overlaying a high-resolution background image, styled with background-size: 600px for an artistic touch. The image itself dynamically serves as a backdrop, giving the component a layered appearance. Main Icon: A small circular icon, located at the top-right corner, appears with smooth hover effects: Enlarges to double its size (scale-[2]). Rotates (rotate-[410deg]). Moves diagonally upwards-right (translate-x-3, -translate-y-3). These transitions occur over a duration of 1 second (transition duration-1000). Overlay Gradient: A transparent gradient overlay (bg-gradient-to-l) adds a polished depth effect, transitioning from black (from-black/80) to lighter shades. App Icon and Info: Icon: The app icon is a smaller, bordered square image (rounded-2xl) with hover shrink animations (group-hover:scale-95). Text: A bold application title (text-md font-semibold) with hover-animated underline effects that gradually expand from left to right. A short app description styled as secondary text. Call-to-Action Button: Below the card is a subtle, rounded button (rounded-full) encouraging interaction. It features: A hover effect with color inversion (gray to black). A lift effect (hover:-translate-y-1) when hovered. This component is perfect for modern app showcases, offering a dynamic, user-friendly visual experience. It ensures a professional look while engaging users through smooth animations and clear calls to action.

Author:
Banshee

1 month ago

598
Meet the Team Section with Team Member Cards
Meet the Team Section with Team Member Cards

Author:
Mike Varen

8 months ago

2.6k
Key Features
Showcase Key Features of your app

Author:
Anonymous

7 months ago

626
Animated cards

Author:
Michael Andreuzza

9 months ago

4.1k
Features

Author:
Michael Andreuzza

9 months ago

3.3k

Explore components by Tags

Didn't find component you were looking for?

Search from 1900+ components