Home
Maxim
Logos cards

Logos cards

This tailwind example is contributed by Maxim, on 02-Jan-2025. Component is made with Tailwind CSS v3. It is responsive.

Card

Author Maxim

915

Fork Fullscreen

<div class="grid grid-cols-2 sm:grid-cols-2 lg:grid-cols-4 sm:gap-2 gap-4 auto-cols-fr my-2">
    <a
        href="https://lqrs.com/brands/heineken/?utm_source=q&amp;utm_medium=cpc&amp;utm_campaign=brand&amp;utm_term=Heineken"
        class="flex flex-col items-center justify-center p-4 bg-white border border-2 border-gray-200 hover:border-rose-600 rounded-2xl group transition-colors min-h-[120px] transition-all duration-300"
    >
        <div class="mb-2 w-32 aspect-square flex items-center justify-center">
            <img class="max-w-full max-h-full object-contain" src="https://lqrs.com/site/assets/files/62390/heineken-logo.320x0.png" alt="Heineken logo" />
        </div>
        <h5 class="text-center text-lg sm:text-base font-medium text-gray-900 group-hover:text-rose-600">
            Heineken
        </h5>
    </a>
    <a
        href="https://lqrs.com/brands/budweiser/?utm_source=q&amp;utm_medium=cpc&amp;utm_campaign=brand&amp;utm_term=Budweiser"
        class="flex flex-col items-center justify-center p-4 bg-white border border-2 border-gray-200 hover:border-rose-600 rounded-2xl group transition-colors min-h-[120px] transition-all duration-300"
    >
        <div class="mb-2 w-32 aspect-square flex items-center justify-center">
            <img class="max-w-full max-h-full object-contain" src="https://lqrs.com/site/assets/files/62391/budweiser-logo.320x0.png" alt="Budweiser logo" />
        </div>
        <h5 class="text-center text-lg sm:text-base font-medium text-gray-900 group-hover:text-rose-600">
            Budweiser
        </h5>
    </a>
    <a
        href="https://lqrs.com/brands/carlsberg/?utm_source=q&amp;utm_medium=cpc&amp;utm_campaign=brand&amp;utm_term=Carlsberg"
        class="flex flex-col items-center justify-center p-4 bg-white border border-2 border-gray-200 hover:border-rose-600 rounded-2xl group transition-colors min-h-[120px] transition-all duration-300"
    >
        <div class="mb-2 w-32 aspect-square flex items-center justify-center">
            <img class="max-w-full max-h-full object-contain" src="https://lqrs.com/site/assets/files/15605/carlsberg-logo.320x0.png" alt="Carlsberg logo" />
        </div>
        <h5 class="text-center text-lg sm:text-base font-medium text-gray-900 group-hover:text-rose-600">
            Carlsberg
        </h5>
    </a>
    <a
        href="https://lqrs.com/brands/stella-artois/?utm_source=q&amp;utm_medium=cpc&amp;utm_campaign=brand&amp;utm_term=Stella Artois"
        class="flex flex-col items-center justify-center p-4 bg-white border border-2 border-gray-200 hover:border-rose-600 rounded-2xl group transition-colors min-h-[120px] transition-all duration-300"
    >
        <div class="mb-2 w-32 aspect-square flex items-center justify-center">
            <img class="max-w-full max-h-full object-contain" src="https://lqrs.com/site/assets/files/62394/stella-artois-logo.320x0.png" alt="Stella Artois logo" />
        </div>
        <h5 class="text-center text-lg sm:text-base font-medium text-gray-900 group-hover:text-rose-600">
            Stella Artois
        </h5>
    </a>
</div>

Related Examples

Material 3 Cards [Light]
Cards that conform to Google's Material 3 design guidelines and themes

Author:
Nick Girga

2 months ago

323
Animated Ripple Avatar
Ripple Effect Avatar (Tailwind CSS Component) A visually striking animated component that displays a centered avatar or image surrounded by expanding ripple circles. Built with Tailwind CSS and custom animations, this effect simulates a pulsing or water ripple reaction, drawing attention to the central image. Ideal for user profile sections, hero banners, landing pages, or highlighted features in modern web interfaces. The ripples gradually fade and expand, creating a soft, calming motion that enhances interactivity and depth.

Author:
Code Master(Mfuranziza Dusabe Hamza)

2 months ago

479
component

Author:
pablitodgb

1 month ago

124
profile2

Author:
pablitodgb

1 month ago

13
cards order
odering samethng

Author:
Uwase Alliance

2 months ago

174
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

7 months ago

972
Profile Card
Responsive modern profile card

Author:
Rajesh Maheshwari

5 months ago

524
3D Modern Pricing Card
Here's a modern, reusable Pricing Card component that's highly popular on platforms like TailwindFlex. It's clean, responsive, and designed for conversions.

Author:
dev-fab250

2 months ago

299
Card for user contact

Author:
achelton pambo

1 year ago

2k
medical care
It will help us get medical care quickly using a card and make it possible for all of us, Rwandans and other people in other countries, to have a better life.

Author:
Nishimwe Jeanine

2 months ago

62
Simple Profile Card.
Profile page with basic informations

Author:
Sedat Kumcu

9 months ago

2.2k
Active Beauty Main Page

Author:
Maxim

4 months ago

639

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components