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

10.5k

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

2 years ago

11.2k
Team section
responsive project team section

Author:
Ron Hicks

2 years ago

9.5k
Meet the team section

Author:
Sienna

2 years ago

12k
Our Team section

Author:
Ron Hicks

2 years ago

9.1k
Tailwind Team section

Author:
Leon Bachmann

2 years ago

9.6k
Jobs recommended for you
This HTML page is a responsive, dark-mode-friendly job recommendation interface designed using Tailwind CSS. It displays job listings in a card format, each showing: A colorful header background. A company logo/profile image styled as a rounded thumbnail. A job title (e.g., Senior Product Designer). A company name. A location with an icon. Job type (e.g., Full-time). Time since posting (e.g., 2d ago).

Author:
Acode Master(Mfuranziza Dusabe Hamza)

1 week ago

43
Meet the Team Section with Team Member Cards
Meet the Team Section with Team Member Cards

Author:
Mike Varen

1 year ago

3.5k
Team section
beautiful responsive our team section

Author:
Rajesh Maheshwari

3 months ago

306
Hotel management
dashboard used in hotel management system

Author:
Frederick250

6 days ago

64
team section

Author:
Hale Holman

7 months ago

1.1k
Timeline
timeline with journey

Author:
Abhiraj

4 months ago

503
Ai clone, chat ui
Chat interface for ai builder, dont toomuch focused on designing responsive

Author:
Abhiraj

4 months ago

808

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components