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

12.3k

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