Info chips with icon

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

Tag Cloud Chip

Author Bunny

Tailwind v3.4 10.6k 14

Fork Fullscreen

<div class="p-20">
    <div class="flex flex-row flex-wrap">
        <div class="flex flex-row items-center my-2 mr-4 bg-gray-100 rounded py-1 px-2">
            <div class="mt-1 fill-current">
                <svg width="24" height="24" viewBox="0 0 24 24" fill="current" xmlns="http://www.w3.org/2000/svg">
                    <path fill-rule="evenodd" clip-rule="evenodd"
                        d="M18 2H6C4.9 2 4 2.9 4 4V20C4 21.1 4.9 22 6 22H18C19.1 22 20 21.1 20 20V4C20 2.9 19.1 2 18 2ZM9 4H11V9L10 8.25L9 9V4ZM6 20H18V4H13V13L10 10.75L7 13V4H6V20Z"
                        fill="current"></path>
                </svg>
            </div>
            <div class="text-center pl-2">
                <span class="">318 Lessons </span>
            </div>
        </div>
        <div class="flex flex-row items-center my-2 mr-4 bg-gray-100 rounded py-1 px-2">
            <div class="mt-1 fill-current">
                <svg width="24" height="24" viewBox="0 0 24 24" fill="current" xmlns="http://www.w3.org/2000/svg">
                    <path fill-rule="evenodd" clip-rule="evenodd"
                        d="M14.82 4H19C20.1 4 21 4.9 21 6V20C21 21.1 20.1 22 19 22H5C4.86 22 4.73 21.99 4.6 21.97C4.21 21.89 3.86 21.69 3.59 21.42C3.41 21.23 3.26 21.02 3.16 20.78C3.06 20.54 3 20.27 3 20V6C3 5.72 3.06 5.46 3.16 5.23C3.26 4.99 3.41 4.77 3.59 4.59C3.86 4.32 4.21 4.12 4.6 4.04C4.73 4.01 4.86 4 5 4H9.18C9.6 2.84 10.7 2 12 2C13.3 2 14.4 2.84 14.82 4ZM7 10V8H17V10H7ZM17 14V12H7V14H17ZM14 16H7V18H14V16ZM12 3.75C12.41 3.75 12.75 4.09 12.75 4.5C12.75 4.91 12.41 5.25 12 5.25C11.59 5.25 11.25 4.91 11.25 4.5C11.25 4.09 11.59 3.75 12 3.75ZM5 20H19V6H5V20Z"
                        fill="current"></path>
                </svg>
            </div>
            <div class="text-center pl-2">
                <span class="">175 Quizzes </span>
            </div>
        </div>
        <div class="flex flex-row items-center my-2 mr-4 bg-gray-100 rounded py-1 px-2">
            <div class="mt-1 fill-current">
                <svg width="20" height="20" viewBox="0 0 20 20" fill="current" xmlns="http://www.w3.org/2000/svg">
                    <path fill-rule="evenodd" clip-rule="evenodd"
                        d="M18 1.5H2c-.3 0-.5.2-.5.5v16c0 .3.2.5.5.5h16c.3 0 .5-.2.5-.5V2c0-.3-.2-.5-.5-.5ZM2 0a2 2 0 0 0-2 2v16c0 1.1.9 2 2 2h16a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2Z"
                        fill="current"></path>
                    <path
                        d="M8.7 13.8a.7.7 0 1 0 0-1.4c-.4 0-.9-.2-.9-1.2v-1c0-.6-.1-1-.4-1.3.3-.3.4-.7.4-1.3v-1c0-1 .5-1.2 1-1.2a.7.7 0 1 0 0-1.4c-1.2 0-2.4.8-2.4 2.6v1c0 .4 0 .4-.4.6h-.2a.7.7 0 0 0-.1 1.3l.3.2c.3 0 .4.1.4.5v1c0 1.8 1.2 2.6 2.3 2.6ZM12 11.2c0 1-.4 1.2-.8 1.2a.7.7 0 1 0 0 1.4c1.1 0 2.3-.8 2.3-2.6v-1c0-.4 0-.4.4-.5a3.4 3.4 0 0 0 .3-.2l.3-.3c.1-.4 0-.8-.4-1H14c-.3-.2-.4-.2-.4-.6v-1c0-1.8-1.2-2.6-2.3-2.6a.7.7 0 1 0 0 1.4c.4 0 .8.2.8 1.2v1c0 .6.2 1 .4 1.3a2 2 0 0 0-.4 1.3v1ZM5 15.4c0-.4.3-.6.6-.6h8.7a.6.6 0 0 1 0 1.2H5.6a.6.6 0 0 1-.6-.6Z"
                        fill="current"></path>
                </svg>
            </div>
            <div class="text-center pl-2">
                <span class="">245 Playgrounds </span>
            </div>
        </div>
        <div class="flex flex-row items-center my-2 mr-4 bg-gray-100 rounded py-1 px-2">
            <div class="mt-1 fill-current">
                <svg width="22" height="22" viewBox="0 0 22 22" fill="current" xmlns="http://www.w3.org/2000/svg">
                    <path d="m11 16.3-4.6-2.7V8.4L11 5.7l4.6 2.7v5.2L11 16.3Zm-4-3 4 2.2 4-2.2V8.7l-4-2.2-4 2.2v4.6Z"
                        fill="current"></path>
                    <path fill-rule="evenodd" clip-rule="evenodd"
                        d="M11 5.3 16 8V14l-5 2.8L6 14V8l5-2.8ZM7.5 9v4l3.5 2 3.5-2V9L11 7 7.5 9Z" fill="current">
                    </path>
                    <path d="M11 11.4 6.6 8.8l.3-.5 4.1 2.3 4-2.3.4.5-4.4 2.6Z" fill="current"></path>
                    <path fill-rule="evenodd" clip-rule="evenodd" d="m6.8 7.7 4.2 2.5 4.2-2.5L16 9 11 11.8 6 9l.8-1.3Z"
                        fill="current"></path>
                    <path d="M11.3 11h-.6v4.9h.6V11Z" fill="current"></path>
                    <path fill-rule="evenodd" clip-rule="evenodd" d="M10.3 10.6h1.4v5.7h-1.4v-5.7Z" fill="current">
                    </path>
                    <path d="m6.6 8.8-1.1-.6H4v-.7h1.5l1.3.8-.3.5Z" fill="current"></path>
                    <path fill-rule="evenodd" clip-rule="evenodd" d="M3.7 7.1h2l1.8 1-.7 1.3-1.4-.8H3.7V7Z"
                        fill="current"></path>
                    <path d="m15.4 8.8-.3-.5 1.3-.8h1.5v.7h-1.4l-1.1.6Z" fill="current"></path>
                    <path fill-rule="evenodd" clip-rule="evenodd" d="M16.3 7.1h2v1.5h-1.7l-1.4.8-.7-1.3 1.8-1Z"
                        fill="current"></path>
                    <path d="M17.9 14.5h-1.5l-1.3-.8.3-.5 1.1.6H18v.7Z" fill="current"></path>
                    <path fill-rule="evenodd" clip-rule="evenodd" d="m15.2 12.6 1.4.8h1.7V15h-2l-1.8-1 .7-1.3Z"
                        fill="current"></path>
                    <path d="M5.6 14.5H4.1v-.7h1.4l1.1-.6.3.5-1.3.8Z" fill="current"></path>
                    <path fill-rule="evenodd" clip-rule="evenodd" d="m6.8 12.6.7 1.3-1.8 1h-2v-1.5h1.7l1.4-.8Z"
                        fill="current"></path>
                    <path d="M11.3 4.1h-.6v2h.6v-2Z" fill="current"></path>
                    <path fill-rule="evenodd" clip-rule="evenodd" d="M10.3 3.7h1.4v2.8h-1.4V3.7Z" fill="current"></path>
                    <path d="M11.3 15.9h-.6v2h.6v-2Z" fill="current"></path>
                    <path fill-rule="evenodd" clip-rule="evenodd" d="M10.3 15.5h1.4v2.8h-1.4v-2.8Z" fill="current">
                    </path>
                    <path d="M4.9 3.5H4V4H5v-.6Z" fill="current"></path>
                    <path fill-rule="evenodd" clip-rule="evenodd" d="M3.7 3h1.6v1.5H3.7V3.1Z" fill="current"></path>
                    <path d="M17.9 3.5H17V4h.8v-.6Z" fill="current"></path>
                    <path fill-rule="evenodd" clip-rule="evenodd" d="M16.7 3h1.6v1.5h-1.6V3.1Z" fill="current"></path>
                    <path d="M4.9 17.9H4v.6H5V18Z" fill="current"></path>
                    <path fill-rule="evenodd" clip-rule="evenodd" d="M3.7 17.5h1.6v1.4H3.7v-1.4Z" fill="current"></path>
                    <path d="M17.9 17.9H17v.6h.8V18Z" fill="current"></path>
                    <path fill-rule="evenodd" clip-rule="evenodd" d="M16.7 17.5h1.6v1.4h-1.6v-1.4Z" fill="current">
                    </path>
                    <path d="M12.7 4.5H9.3V1h3.4v3.5ZM10 3.8h2.2V1.6H9.9v2.2Z" fill="current"></path>
                    <path fill-rule="evenodd" clip-rule="evenodd" d="M8.9.6H13v4.3H9V.6ZM10.3 2v1.4h1.4V2h-1.4Z"
                        fill="current"></path>
                    <path d="M12.7 21H9.3v-3.5h3.4V21Zm-2.8-.6h2.2v-2.2H9.9v2.2Z" fill="current"></path>
                    <path fill-rule="evenodd" clip-rule="evenodd" d="M8.9 17.1H13v4.3H9v-4.3Zm1.4 1.5V20h1.4v-1.4h-1.4Z"
                        fill="current"></path>
                    <path d="M4.5 9.6H1V6h3.5v3.5Zm-2.9-.7h2.2V6.7H1.6V9Z" fill="current"></path>
                    <path fill-rule="evenodd" clip-rule="evenodd" d="M.6 5.7h4.3V10H.6V5.7ZM2 7v1.4h1.4V7.1H2Z"
                        fill="current"></path>
                    <path d="M4.5 16H1v-3.6h3.5V16Zm-2.9-.7h2.2V13H1.6v2.2Z" fill="current"></path>
                    <path fill-rule="evenodd" clip-rule="evenodd" d="M.6 12h4.3v4.3H.6V12ZM2 13.5v1.4h1.4v-1.4H2Z"
                        fill="current"></path>
                    <path d="M21 9.6h-3.5V6H21v3.5Zm-2.8-.7h2.2V6.7h-2.2V9Z" fill="current"></path>
                    <path fill-rule="evenodd" clip-rule="evenodd" d="M17.1 5.7h4.3V10h-4.3V5.7ZM18.6 7v1.4H20V7.1h-1.4Z"
                        fill="current"></path>
                    <path d="M21 16h-3.5v-3.6H21V16Zm-2.8-.7h2.2V13h-2.2v2.2Z" fill="current"></path>
                    <path fill-rule="evenodd" clip-rule="evenodd"
                        d="M17.1 12h4.3v4.3h-4.3V12Zm1.5 1.5v1.4H20v-1.4h-1.4Z" fill="current"></path>
                </svg>
            </div>
            <div class="text-center pl-2">
                <span class="">2346 Illustrations </span>
            </div>
        </div>
    </div>
</div>

Related Examples

Chip with logo

Fagundo67

3 years ago

13.5k
Company icons chips

Steven Kuhn

3 years ago

10.2k
Tag Cloud
Tag cloud with sub-sections

Prajwal Hallale

3 years ago

13.2k
Tag Cloud
Display Trending Topics, Tags, etc.

Krishna Gudpalle

3 years ago

10.5k
Hashtag Pills
Minimal hastag cloud

TailwindFlex

4 years ago

13.6k
Button Group

TailwindFlex

4 years ago

10k
Tag Cloud
Word/Tag cloud

Prajwal Hallale

3 years ago

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

Nick Girga

1 year ago

1.3k
Tags list
click to remove the tag from list

Asher Wilde

3 years ago

12.1k
Minimal tag cloud design with heading text

Rafferty Kim

3 years ago

10.9k
Category filter section
Neatly organized clickable rectangular elements with category names

Anonymous

3 years ago

8.9k
Multi-Select Dropdown Filter with search
Interactive filtering component built with Alpine.js and Tailwind CSS, featuring searchable multi-select dropdowns with dynamic URL parameters. The system includes responsive design, real-time search functionality, and visual feedback through selected item tags that can be easily removed.

Anonymous

1 year ago

2.5k