Home
TailwindFlex
Tag/Button Cloud

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 CSS v3. It is responsive. It supports dark mode.

Tag Cloud

Author TailwindFlex

11.7k

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

Author:
Prajwal Hallale

2 years ago

12.9k
Minimal tag cloud design with heading text

Author:
Rafferty Kim

2 years ago

10k
Button cloud for categories,tags etc

Author:
Kris Showen

2 years ago

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

Author:
Anonymous

1 year ago

8.2k
Hashtag Pills
Minimal hastag cloud

Author:
TailwindFlex

3 years ago

12.7k
Tag Cloud
Word/Tag cloud

Author:
Prajwal Hallale

2 years ago

10.8k
Button Group

Author:
TailwindFlex

3 years ago

9k
Tag links component

Author:
Arya

2 years ago

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

Author:
Krishna Gudpalle

2 years ago

9.2k
Category tags
Monocolor tag cloud

Author:
Piet Vriend

2 years ago

10.4k
Tag cloud with Javascript

Author:
Charlotte Dupont

2 years ago

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

Author:
Anonymous

6 months ago

1.4k

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components