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.8k

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.5k
Team section
responsive project team section

Author:
Ron Hicks

2 years ago

9.9k
Meet the team section

Author:
Sienna

2 years ago

12.3k
Our Team section

Author:
Ron Hicks

2 years ago

9.4k
Tailwind Team section

Author:
Leon Bachmann

2 years ago

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

Author:
ABDESLAMI ACHRAF

11 months ago

3.2k
Team Showcase

Author:
KULDEEP

3 months ago

338
Avatar
Avatar

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

1 year ago

4.5k
Profile, Team or Testimonial
Profile, Team or Testimonial

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

1 year ago

3.5k
Heading
Subtle Script Background - Large, very light script font in the background ("Amazing") Light-to-Dark Gradient Heading - Main heading fades from light gray to dark gray Layered Typography - Secondary heading in medium weight for contrast Elegant Divider - With centered italic text Minimalist Border Accents - Thin borders in corners for sophistication Responsive Design - Scales beautifully on all devices

Author:
KULDEEP

2 months ago

176
Responsive Portfolio Webpage with Tailwind CSS
This is a reusable and responsive portfolio webpage template created with HTML and Tailwind CSS. Designed for developers or creatives, the template includes essential sections like Header, Hero, About, Skills, Experience, Projects, Testimonials, Contact Form, and Footer. It features a clean, modern design and is fully customizable without requiring JavaScript. Perfect for showcasing personal or professional work on the web.

Author:
Ayyamperumal S

7 months ago

1.5k
team section

Author:
Hale Holman

10 months ago

1.4k

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components