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

516

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

Food delivery ecommerce Card

Author:
Samuel Abera

3 months ago

681
Profile card
Profile card with social icons

Author:
Krishna Gudpalle

2 years ago

12.2k
Cards - Users Card
This Users Card design includes: 1. Responsive layout using Flexbox 2. Indigo-800 and Blue-900 color scheme 3. Dark mode support 4. User list with avatars, names, and roles 5. Hover effects on user items 6. "Add Member" button 7. Card footer with team member count 8. Subtle animations and transitions 9. Accessibility considerations (proper heading structure, color contrast) Key features: - The background uses a gradient from Indigo-800 to Blue-900 - The card has a white background in light mode and dark gray in dark mode - Text colors are adjusted for readability in both light and dark modes - User avatars have a border color that changes in dark mode - User items have a hover effect that scales them slightly - The "Add Member" button uses Indigo-800 with a Blue-900 hover state - Dark mode is automatically applied based on system preferences - The entire card fades in on load for a smooth entrance - The card has a hover effect that enhances its shadow This design provides a clean, professional look for displaying team members while incorporating the requested color scheme and maintaining good usability across different devices and color modes.

Author:
nejaa badr

5 months ago

1.3k
Hotel rooms
A simple room overview

Author:
Matti

3 months ago

515
Card Component Simple
This is a Card Component for simple use &full responsive

Author:
Shariar Hasan

1 year ago

1.8k
Modern E-commerce Product Card with TailwindCSS
This product card is designed for e-commerce platforms using TailwindCSS. It features a discount badge, product image carousel, quick view and quick order buttons, ratings, product name, brand details, dynamic pricing with a strike-through original price, and a prominent add-to-cart button. The clean and professional layout is perfect for showcasing products on online stores.

Author:
SHARIFUL ISLAM

2 months ago

715
Battery and signal
Battery and signal bar component

Author:
ardianhu

3 months ago

357
Chat Bot
Simulation of a chat bot that can be used for conversations as a sketch idea

Author:
Ameth Galarcio

8 months ago

2.3k
Info cards

Author:
Samuel Dawson

2 years ago

9.9k
Card Slider

Author:
Maxim

3 weeks ago

269
Experience Card
Experience card section you can use for portfolio or other profiles.

Author:
Khalid

1 year ago

2.5k
Fancy blog post card

Author:
Mr Robot

2 years ago

11.4k

Explore components by Tags

Didn't find component you were looking for?

Search from 2100+ components