Logos cards

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

Tailwind v3.4 2.3k 2

<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

Modern Retail Analytics Dashboard UI with Interactive Charts
Dashboard built with HTML, Tailwind CSS, and vanilla JavaScript.

JUGENDRA GANGWAR

3 months ago

361
User Profile Card
Useful for testimonials and reviews section

Abhijit Sen

3 years ago

11.3k
Card KPI
Targetas

Raul antonio de la cruz hernandez

11 months ago

1k
payment card
A payment card is a type of card issued by a financial institution (like a bank) that allows the cardholder to make financial transactions. These transactions can include purchasing goods and services, withdrawing cash, or transferring money. Here’s a description based on the main types of payment cards:

dev-fab250

1 year ago

1.6k
Blog post cards
responsive blog post cards

Mr Robot

3 years ago

13.5k
Weather card
Component was one shot generated using https://inspi.me

yogourt

9 months ago

1.2k
Simple Profile Card.
Profile page with basic informations

Sedat Kumcu

2 years ago

3.6k
carte visa black

Omer fils ELENGA

5 months ago

271
Info card

Samuel Dawson

3 years ago

10.8k
Card grid for posts

Mr Robot

3 years ago

24.2k
Form package

Hunter Guru

2 years ago

3k
Card Slider

Maxim

1 year ago

2.4k