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

1.5k

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

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

8 months ago

401
Stats card with icons
Improved Code quality and added support for dark mode

Author:
Dika Rahman

1 year ago

1.8k
Elevated feature card

Author:
magersa

2 years ago

4.3k
Responsive Card

Author:
ariaw

11 months ago

659
Profile Card
Modern Profile card with Subtle overlay on image, minimal and clean approach with emphasis on readability and hierarchy.

Author:
UI-Templates

4 months ago

550
Spinner with card
Use this animated loading indicator when content inside of a card is still loading.

Author:
Md. Tofayel islam

1 year ago

3.1k
Simple Card section

Author:
Akram Khan

1 year ago

2.4k
Invoice
Invoice

Author:
Ameth Galarcio

1 year ago

2.7k
split bg

Author:
Anonymous

8 months ago

527
Brand Grid with Hover Effect

Author:
ariaw

10 months ago

1.5k
Beautiful Info card
Info card with info type section on the corner.

Author:
TailwindFlex

3 years ago

10.3k
card profie
profile card

Author:
Aman kumar

2 years ago

4.2k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components