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

3 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

10k
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
Africa Solex Ltd
Description (ibisobanuro bya website) ni text ngufi isobanura neza icyo urubuga cyangwa sosiyete yawe ikora, ikaba ifasha no mu byerekeye SEO (Search Engine Optimization). Mu nyandiko za HTML, description ishyirwa muri meta tag muri <head>.

Ele Eriksen

1 year ago

1.3k