User Team Cards Using Tailwind UI

<!-- Component Inspired design by Ildiko Gaspar from dribbble https://dribbble.com/shots/8003180-User-Cards-UI-Design -->

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link
    href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;0,800;1,200;1,300;1,400;1,500;1,600;1,700;1,800&display=swap"
    rel="stylesheet">

<style>
    body {
        font-family: 'Plus Jakarta Sans', sans-serif;
    }
</style>

<div class="bg-[#EFF1F7]">
    <main class="max-w-6xl px-8 pt-10 mx-auto pb-36">
        <div class="mb-16">
            <h1 class="mb-4 text-lg font-semibold text-gray-500 sm:text-xl">Our Team</h1>
            <p class="text-2xl font-semibold sm:text-3xl">Choose a plan that works best for you and your team.</p>
        </div>

        <div class="flex flex-col items-center justify-between lg:flex-row lg:items-start">

            <div
                class="w-full flex-1 mt-8 p-8 order-2 bg-[#FEFEFF] opacity-80 shadow-xl rounded-3xl sm:w-96 lg:w-full lg:order-1 lg:rounded-r-none">
                <img src="https://images.unsplash.com/photo-1637766652059-af65a50715eb?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1521&q=80"
                    class="object-cover w-32 h-32 mx-auto rounded-full" alt="Avatar" />

                <div class="py-8 text-center">
                    <h2 class="mb-4 text-2xl font-semibold text-gray-800">Suzanne N. Daniels</h2>
                    <p class="text-base text-gray-600">Head of Global Product</p>
                </div>

                <a href="#/"
                    class="flex items-center justify-center px-4 py-3 text-xl text-center text-white bg-green-600 rounded-xl">
                    Connect
                </a>
            </div>

            <div
                class="items-center flex-1 order-1 w-full px-8 py-8 text-gray-400 bg-white shadow-2xl sm:py-16 rounded-3xl sm:w-96 lg:w-full lg:order-2 lg:mt-0">

                <img src="https://images.unsplash.com/photo-1641311280728-bec9ba3f221f?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80"
                    class="object-cover w-32 h-32 mx-auto rounded-full" alt="Avatar" />

                <div class="py-8 text-center">
                    <h2 class="mb-4 text-2xl font-semibold text-gray-800">Dorothy W. Killgore</h2>
                    <p class="text-base text-gray-600">Sales Manager</p>
                </div>

                <a href="#/"
                    class="flex items-center justify-center px-4 py-4 text-2xl text-center text-white bg-green-600 rounded-xl">
                    Connect
                </a>
            </div>

            <div
                class="w-full flex-1 mt-8 p-8 order-3 bg-[#FEFEFF] opacity-80 shadow-xl rounded-3xl sm:w-96 lg:w-full lg:order-3 lg:rounded-l-none">
                <img src="https://images.unsplash.com/photo-1607746882042-944635dfe10e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80"
                    class="object-cover w-32 h-32 mx-auto rounded-full" alt="Avatar" />

                <div class="py-8 text-center">
                    <h2 class="mb-4 text-2xl font-semibold text-gray-800">Linda J. Silva</h2>
                    <p class="text-base text-gray-600">External Consultant</p>
                </div>

                <a href="#/"
                    class="flex items-center justify-center px-4 py-3 text-xl text-center text-white bg-green-600 rounded-xl">
                    Connect
                </a>
            </div>
        </div>
    </main>
</div>