Company icons chips

This tailwind example is contributed by Steven Kuhn, on 14-Jan-2023. Component is made with Tailwind v3.4. It is responsive. similar terms for this example is tags

Chip

Author Steven Kuhn

Tailwind v3.4 10.2k 15

Fork Fullscreen

<button type="button">
            <span
                class="bg-white inline-flex text-primary py-0.5 px-3 items-center justify-between text-xs capitalize border border-gray-400 rounded-full hover:bg-gray-gray1 mb-2 mr-2">
                <img
                    alt=" " src="https://d26c7l40gvbbg2.cloudfront.net/tool_icons/laravel.svg" decoding="async"
                    data-nimg="1" class="object-cover w-4 h-4 mr-1" loading="lazy" style="color: transparent;"
                    width="16" height="16">
                <span class="capitalize lg:inline leading-5">Laravel</span></span>
        </button>
        <button type="button">
            <span
                class="bg-white inline-flex text-primary py-0.5 px-3 items-center justify-between text-xs capitalize border border-gray-400 rounded-full hover:bg-gray-gray1 mb-2 mr-2">
                <img
                    alt=" " src="https://d26c7l40gvbbg2.cloudfront.net/tool_icons/javascript.svg"
                    decoding="async" data-nimg="1" class="object-cover w-4 h-4 mr-1" loading="lazy"
                    style="color: transparent;" width="16" height="16">
                <span class="capitalize lg:inline leading-5">JavaScript</span></span>
        </button>
        <button type="button">
            <span
                class="bg-white inline-flex text-primary py-0.5 px-3 items-center justify-between text-xs capitalize border border-gray-400 rounded-full hover:bg-gray-gray1 mb-2 mr-2">
                <img
                    alt=" " src="https://d26c7l40gvbbg2.cloudfront.net/tool_icons/php.svg" decoding="async"
                    data-nimg="1" class="object-cover w-4 h-4 mr-1" loading="lazy" style="color: transparent;"
                    width="16" height="16">
                <span class="capitalize lg:inline leading-5">PHP</span></span>
        </button>
        <button type="button">
            <span
                class="bg-white inline-flex text-primary py-0.5 px-3 items-center justify-between text-xs capitalize border border-gray-400 rounded-full hover:bg-gray-gray1 mb-2 mr-2">
                <img
                    alt=" " src="https://d26c7l40gvbbg2.cloudfront.net/tool_icons/mysql.svg" decoding="async"
                    data-nimg="1" class="object-cover w-4 h-4 mr-1" loading="lazy" style="color: transparent;"
                    width="16" height="16">
                <span class="capitalize lg:inline leading-5">MySQL</span></span>
        </button>
        <button type="button">
            <span
                class="bg-white inline-flex text-primary py-0.5 px-3 items-center justify-between text-xs capitalize border border-gray-400 rounded-full hover:bg-gray-gray1 mb-2 mr-2">
                <img
                    alt=" " src="https://d26c7l40gvbbg2.cloudfront.net/tool_icons/tailwindcss.svg"
                    decoding="async" data-nimg="1" class="object-cover w-4 h-4 mr-1" loading="lazy"
                    style="color: transparent;" width="16" height="16">
                <span class="capitalize lg:inline leading-5">TailwindCSS</span></span>
        </button>
    </div>
</div>

Related Examples

Chip with logo

Fagundo67

3 years ago

13.5k
Info chips with icon

Bunny

3 years ago

10.6k
Tags list
click to remove the tag from list

Asher Wilde

3 years ago

12.1k
chip
Interactive and customizable chips or tags to display labels, categories, or filters. Includes options for removable chips with icons and different styles.

Abhiraj

1 year ago

2.4k
Material 3 Chips [Light]
Chips that conform to Google's Material 3 design guidelines

Nick Girga

1 year ago

1.3k
tinderclone By omerlinks
tinderclone By omerlinks

Omer fils ELENGA

9 months ago

666
Underline Gradient
underlined gradient using background color

Nikolai

2 years ago

3.5k
Footer with social media icons
If you want to use colorful social media icons with address location, sitemap links and newsletter.

Pagedone

2 years ago

4.3k
FAQ - Htmlwind
Offset intro faq section

Htmlwind

1 year ago

1.2k
Animated underline hover navbar
Simple animated underline hover effect navbar.

inbarajan P

2 years ago

3.6k
Clean AI Workspace Dashboard
A pristine, light-mode SaaS interface designed for AI chat applications. It features a structured three-column layout: a navigation sidebar with a theme toggle, a central workspace showcasing a "Welcome" state with colorful quick-action entry cards and a floating input bar, and a right-hand sidebar for project context. The design relies on soft grays, subtle borders (border-gray-200), and ample whitespace to create a focused, professional productivity environment.

Hamza Atig

10 months ago

968
Notifications
Toast Notifications are lightweight and customizable components for displaying short messages or alerts. They are perfect for feedback on user actions, such as form submissions or system updates. Supports different types of notifications (success, error, warning, info). Automatically hides after a specified timeout. Option to include action buttons or close icons. Customizable styles, animation, and position on the screen.

Abhiraj

1 year ago

2.2k