Home
Ron Hicks
Our Team section

Our Team section

This tailwind example is contributed by Ron Hicks, on 24-Dec-2022. Component is made with Tailwind CSS v3. It is responsive.

Team

Author Ron Hicks

8.4k

Fork Fullscreen

<li class="bg-gray-100 p-5 py-10 text-center">
                    <div class="flex flex-col items-center">
                        <div class="flex-shrink-0">
                            <a
                                href="#"><img class="mb-3 rounded-full mx-auto h-24 w-24" src="https://i.pravatar.cc/150?img=32"></a>
                        </div>
                        <div class="text-center">
                            <h4
                                class="text-lg leading-6 font-semibold text-gray-900 transition duration-500 ease-in-out">
                                <a href="#" class="hover:text-indigo-600 transition duration-500 ease-in-out">jane
                                    doe</a>
                            </h4>
                            <p class="text-sm leading-6 text-gray-500 uppercase">
                                web developer
                            </p>
                        </div>
                    </div>
                </li>
                <li class="bg-gray-100 p-5 py-10 text-center">
                    <div class="flex flex-col items-center">
                        <div class="flex-shrink-0">
                            <a
                                href="#"><img class="mb-3 rounded-full mx-auto h-24 w-24" src="https://i.pravatar.cc/150?img=32"></a>
                        </div>
                        <div class="text-center">
                            <h4
                                class="text-lg leading-6 font-semibold text-gray-900 transition duration-500 ease-in-out">
                                <a href="#" class="hover:text-indigo-600 transition duration-500 ease-in-out">jane
                                    doe</a>
                            </h4>
                            <p class="text-sm leading-6 text-gray-500 uppercase">
                                web developer
                            </p>
                        </div>
                    </div>
                </li>
                <li class="bg-gray-100 p-5 py-10 text-center">
                    <div class="flex flex-col items-center">
                        <div class="flex-shrink-0">
                            <a
                                href="#"><img class="mb-3 rounded-full mx-auto h-24 w-24" src="https://i.pravatar.cc/150?img=32"></a>
                        </div>
                        <div class="text-center">
                            <h4
                                class="text-lg leading-6 font-semibold text-gray-900 transition duration-500 ease-in-out">
                                <a href="#" class="hover:text-indigo-600 transition duration-500 ease-in-out">jane
                                    doe</a>
                            </h4>
                            <p class="text-sm leading-6 text-gray-500 uppercase">
                                web developer
                            </p>
                        </div>
                    </div>
                </li>
                <li class="bg-gray-100 p-5 py-10 text-center">
                    <div class="flex flex-col items-center">
                        <div class="flex-shrink-0">
                            <a
                                href="#"><img class="mb-3 rounded-full mx-auto h-24 w-24" src="https://i.pravatar.cc/150?img=32"></a>
                        </div>
                        <div class="text-center">
                            <h4
                                class="text-lg leading-6 font-semibold text-gray-900 transition duration-500 ease-in-out">
                                <a href="#" class="hover:text-indigo-600 transition duration-500 ease-in-out">jane
                                    doe</a>
                            </h4>
                            <p class="text-sm leading-6 text-gray-500 uppercase">
                                web developer
                            </p>
                        </div>
                    </div>
                </li>

</ul>
        </div>

<div class="text-left mb-10 sm:ml-10 md:ml-24 sm:w-6/12 order-first sm:order-last">
            <p class="mt-4 text-sm leading-7 text-gray-500 font-regular">
                THE TEAM
            </p>
            <h3 class="text-3xl sm:text-5xl leading-normal font-extrabold tracking-tight text-gray-900">
                Meet Our <span class="text-indigo-600">Team</span>
            </h3>
            <p class="mt-4 text-md leading-7 text-gray-500 font-light">
                Lorem ipsum, dolor sit amet consectetur adipisicing elit. Maiores impedit perferendis suscipit eaque,
                iste dolor cupiditate blanditiis ratione.
                <br><br> Lorem ipsum, dolor sit amet consectetur adipisicing elit.
            </p>

</div>

</div>
</div>

Related Examples