Home
Ron Hicks
Team section with cards

Team section with cards

This tailwind example is contributed by Ron Hicks, on 01-Jan-2023. Component is made with Tailwind CSS v3. It is responsive.

Team

Author Ron Hicks

11.3k

Fork Fullscreen

<div class="max-w-sm w-full lg:max-w-full lg:flex mx-auto my-10">
            <div class="h-48 lg:h-auto lg:w-48 flex-none bg-cover rounded-t lg:rounded-t-none lg:rounded-l text-center overflow-hidden"
                style="background-image: url('https://images.pexels.com/photos/3785084/pexels-photo-3785084.jpeg?auto=compress&amp;cs=tinysrgb&amp;dpr=1&amp;w=500')"
                title="Woman holding a mug">
            </div>
            <div
                class="border-r border-b border-l border-gray-400 lg:border-l-0 lg:border-t lg:border-gray-400 bg-white rounded-b lg:rounded-b-none lg:rounded-r p-4">
                <div class="">
                    <a href="#"
                        class="text-gray-900 font-bold text-xl mb-2 hover:text-indigo-600 transition duration-500 ease-in-out">Yahya
                        R. Makarim</a>
                    <p class="text-sm text-gray-600">
                        CEO &amp; President
                    </p>
                    <p class="text-gray-500 text-base mt-4">Lorem ipsum dolor sit amet, consectetur adipisicing elit.
                    </p>

</div>

<div class="max-w-sm w-full lg:max-w-full lg:flex mx-auto my-10">
            <div class="h-48 lg:h-auto lg:w-48 flex-none bg-cover rounded-t lg:rounded-t-none lg:rounded-l text-center overflow-hidden"
                style="background-image: url('https://images.pexels.com/photos/1043474/pexels-photo-1043474.jpeg?auto=compress&amp;cs=tinysrgb&amp;dpr=1&amp;w=500')"
                title="Woman holding a mug">
            </div>
            <div
                class="border-r border-b border-l border-gray-400 lg:border-l-0 lg:border-t lg:border-gray-400 bg-white rounded-b lg:rounded-b-none lg:rounded-r p-4">
                <div class="">
                    <a href="#"
                        class="text-gray-900 font-bold text-xl mb-2 hover:text-indigo-600 transition duration-500 ease-in-out">Zakir
                        Hussain Rezai</a>
                    <p class="text-sm text-gray-600">
                        VueJS Developer
                    </p>
                    <p class="text-gray-500 text-base mt-4">Lorem ipsum dolor sit amet, consectetur adipisicing elit.
                    </p>

</div>

</div>
        </div>

</div>
</div>

Related Examples

Team section
with team member's social accounts

Author:
Ron Hicks

3 years ago

11.9k
Team section
responsive project team section

Author:
Ron Hicks

3 years ago

10.4k
Meet the team section

Author:
Sienna

3 years ago

12.7k
Our Team section

Author:
Ron Hicks

3 years ago

9.9k
Tailwind Team section

Author:
Leon Bachmann

3 years ago

10.2k
Team section
beautiful responsive our team section

Author:
Rajesh Maheshwari

11 months ago

1.2k
Responsive portfolio with dark mode
responsive and support dark mode .portfolio website

Author:
ABDESLAMI ACHRAF

1 year ago

3.7k
Table
Table with image and status with pagination buttons

Author:
Abhiraj

1 year ago

2.5k
canvas fully covers
canvas fully covers

Author:
Balogun David Olajuwon

9 months ago

834
canvas fully covers
canvas fully covers

Author:
ABDESLAMI ACHRAF

1 year ago

4k
Profile, Team or Testimonial
Profile, Team or Testimonial

$$@(\/)(\/)¥$ Author:
$@(\/)(\/)¥

1 year ago

3.7k
Team Members Showcase with Portfolio Backlink
Showcase your team's talent with this beautifully designed and responsive team members grid. Each card includes the member's photo, name, role, and social links. A special portfolio backlink is included to highlight your personal contributions as a developer. Supports light and dark modes.

Author:
Abhiraj

1 year ago

1.9k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components