Tag/Button Cloud

Responsive tag cloud. Made with Flex-Box

This tailwind example is contributed by TailwindFlex, on 16-Aug-2022. Component is made with Tailwind v3.4. It is responsive. It supports dark mode.

Tag Cloud

Author TailwindFlex

Tailwind v3.4 12.5k 11

Fork Fullscreen

<div class="flex flex-wrap items-start justify-center p-5 py-10">
 <a class=" relative px-3 py-1 m-2 rounded-md shadow-sm sm:py-2 sm:text-base ring ring-transparent group md:px-4 hover:ring hover:ring-opacity-50 focus:ring-opacity-50 hover:ring-violet-600 text-gray-900 bg-gray-200 dark:bg-gray-400 dark:text-gray-200 " href="https://tailwindflex.com/tag/card">
 Card
 </a>
 <a class=" relative px-3 py-1 m-2 rounded-md shadow-sm sm:py-2 sm:text-base ring ring-transparent group md:px-4 hover:ring hover:ring-opacity-50 focus:ring-opacity-50 hover:ring-violet-600 text-gray-900 bg-gray-200 dark:bg-gray-400 dark:text-gray-200 " href="https://tailwindflex.com/tag/call-to-action">
 Call to Action
 </a>
 <a class=" relative px-3 py-1 m-2 rounded-md shadow-sm sm:py-2 sm:text-base ring ring-transparent group md:px-4 hover:ring hover:ring-opacity-50 focus:ring-opacity-50 hover:ring-violet-600 text-gray-900 bg-gray-200 dark:bg-gray-400 dark:text-gray-200 " href="https://tailwindflex.com/tag/carousel">
 Carousel
 </a>
 <a class=" relative px-3 py-1 m-2 rounded-md shadow-sm sm:py-2 sm:text-base ring ring-transparent group md:px-4 hover:ring hover:ring-opacity-50 focus:ring-opacity-50 hover:ring-violet-600 text-gray-900 bg-gray-200 dark:bg-gray-400 dark:text-gray-200 " href="https://tailwindflex.com/tag/banner">
 Banner
 </a>
 <a class=" relative px-3 py-1 m-2 rounded-md shadow-sm sm:py-2 sm:text-base ring ring-transparent group md:px-4 hover:ring hover:ring-opacity-50 focus:ring-opacity-50 hover:ring-violet-600 text-gray-900 bg-gray-200 dark:bg-gray-400 dark:text-gray-200 " href="https://tailwindflex.com/tag/breadcrumb">
 Breadcrumb
 </a>
 <a class=" relative px-3 py-1 m-2 rounded-md shadow-sm sm:py-2 sm:text-base ring ring-transparent group md:px-4 hover:ring hover:ring-opacity-50 focus:ring-opacity-50 hover:ring-violet-600 text-gray-900 bg-gray-200 dark:bg-gray-400 dark:text-gray-200 " href="https://tailwindflex.com/tag/avatar">
 Avatar
 </a>
 <a class=" relative px-3 py-1 m-2 rounded-md shadow-sm sm:py-2 sm:text-base ring ring-transparent group md:px-4 hover:ring hover:ring-opacity-50 focus:ring-opacity-50 hover:ring-violet-600 text-gray-900 bg-gray-200 dark:bg-gray-400 dark:text-gray-200 " href="https://tailwindflex.com/tag/blog">
 Blog
 </a>
 <a class=" relative px-3 py-1 m-2 rounded-md shadow-sm sm:py-2 sm:text-base ring ring-transparent group md:px-4 hover:ring hover:ring-opacity-50 focus:ring-opacity-50 hover:ring-violet-600 text-gray-900 bg-gray-200 dark:bg-gray-400 dark:text-gray-200 " href="https://tailwindflex.com/tag/button">
 Button
 </a>
 <a class=" relative px-3 py-1 m-2 rounded-md shadow-sm sm:py-2 sm:text-base ring ring-transparent group md:px-4 hover:ring hover:ring-opacity-50 focus:ring-opacity-50 hover:ring-violet-600 text-gray-900 bg-gray-200 dark:bg-gray-400 dark:text-gray-200 " href="https://tailwindflex.com/tag/contact-us-page">
 Contact us Page
 </a>
</div>

Related Examples

Tag Cloud
Tag cloud with sub-sections

Prajwal Hallale

3 years ago

13.1k
Minimal tag cloud design with heading text

Rafferty Kim

3 years ago

10.9k
Button cloud for categories,tags etc

Kris Showen

3 years ago

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

Anonymous

2 years ago

8.9k
Hashtag Pills
Minimal hastag cloud

TailwindFlex

4 years ago

13.6k
Tag Cloud
Word/Tag cloud

Prajwal Hallale

3 years ago

11k
Button Group

TailwindFlex

4 years ago

9.9k
Tag links component

Arya

3 years ago

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

Krishna Gudpalle

3 years ago

10.5k
Category tags
Monocolor tag cloud

Piet Vriend

3 years ago

11.4k
Tag cloud with Javascript

Charlotte Dupont

3 years ago

11.3k
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.

SANJAY SINGH GARIYA

1 year ago

2.3k