Tag cloud

Tag cloud with hover effect it also has support for dark mode

This tailwind example is contributed by OmKar Mehta, on 04-Apr-2024. Component is made with Tailwind v3.4. It is responsive. It supports dark mode.

Tag Cloud

Author OmKar Mehta

Tailwind v3.4 2.9k 11

Fork Fullscreen

<div class="h-screen flex justify-center items-center dark:bg-gray-800">
  <ul class="flex flex-wrap justify-center max-w-xl gap-2 px-2 py-2 md:gap-3 md:py-6 md:px-8 dark:bg-gray-800">
    <li
      class="text-center border border-teal-500/50 dark:border-gray-600 px-2 py-1 md:text-lg relative md:min-w-[100px] flex justify-center items-center bg-gray-100/50 dark:bg-gray-700 rounded-lg select-none cursor-pointer hover:shadow hover:shadow-teal-500 dark:hover:shadow-teal-500">
      <a href="/category/business" class="dark:text-white">
        Business
      </a>
    </li>
    <li
      class="text-center border border-teal-500/50 dark:border-gray-600 px-2 py-1 md:text-lg relative md:min-w-[100px] flex justify-center items-center bg-gray-100/50 dark:bg-gray-700 rounded-lg select-none cursor-pointer hover:shadow hover:shadow-teal-500 dark:hover:shadow-teal-500">
      <a href="/category/productivity" class="dark:text-white">
        Productivity
      </a>
    </li>
    <li
      class="text-center border border-teal-500/50 dark:border-gray-600 px-2 py-1 md:text-lg relative md:min-w-[100px] flex justify-center items-center bg-gray-100/50 dark:bg-gray-700 rounded-lg select-none cursor-pointer hover:shadow hover:shadow-teal-500 dark:hover:shadow-teal-500">
      <a href="/category/marketing" class="dark:text-white">
        Marketing
      </a>
    </li>
    <li
      class="text-center border border-teal-500/50 dark:border-gray-600 px-2 py-1 md:text-lg relative md:min-w-[100px] flex justify-center items-center bg-gray-100/50 dark:bg-gray-700 rounded-lg select-none cursor-pointer hover:shadow hover:shadow-teal-500 dark:hover:shadow-teal-500">
      <a href="/category/design" class="dark:text-white">
        Design
      </a>
    </li>
    <li
      class="text-center border border-teal-500/50 dark:border-gray-600 px-2 py-1 md:text-lg relative md:min-w-[100px] flex justify-center items-center bg-gray-100/50 dark:bg-gray-700 rounded-lg select-none cursor-pointer hover:shadow hover:shadow-teal-500 dark:hover:shadow-teal-500">
      <a href="/category/data-analysis" class="dark:text-white">
        Data Analysis
      </a>
    </li>
    <li
      class="text-center border border-teal-500/50 dark:border-gray-600 px-2 py-1 md:text-lg relative md:min-w-[100px] flex justify-center items-center bg-gray-100/50 dark:bg-gray-700 rounded-lg select-none cursor-pointer hover:shadow hover:shadow-teal-500 dark:hover:shadow-teal-500">
      <a href="/category/education" class="dark:text-white">
        Education
      </a>
    </li>
    <li
      class="text-center border border-teal-500/50 dark:border-gray-600 px-2 py-1 md:text-lg relative md:min-w-[100px] flex justify-center items-center bg-gray-100/50 dark:bg-gray-700 rounded-lg select-none cursor-pointer hover:shadow hover:shadow-teal-500 dark:hover:shadow-teal-500">
      <a href="/category/development" class="dark:text-white">
        Development
      </a>
    </li>
    <li
      class="text-center border border-teal-500/50 dark:border-gray-600 px-2 py-1 md:text-lg relative md:min-w-[100px] flex justify-center items-center bg-gray-100/50 dark:bg-gray-700 rounded-lg select-none cursor-pointer hover:shadow hover:shadow-teal-500 dark:hover:shadow-teal-500">
      <a href="/category/content-generation" class="dark:text-white">
        Content Generation
      </a>
    </li>
    <li
      class="text-center border border-teal-500/50 dark:border-gray-600 px-2 py-1 md:text-lg relative md:min-w-[100px] flex justify-center items-center bg-gray-100/50 dark:bg-gray-700 rounded-lg select-none cursor-pointer hover:shadow hover:shadow-teal-500 dark:hover:shadow-teal-500">
      <a href="/category/developer-tools" class="dark:text-white">
        Developer Tools
      </a>
    </li>
    <li
      class="text-center border border-teal-500/50 dark:border-gray-600 px-2 py-1 md:text-lg relative md:min-w-[100px] flex justify-center items-center bg-gray-100/50 dark:bg-gray-700 rounded-lg select-none cursor-pointer hover:shadow hover:shadow-teal-500 dark:hover:shadow-teal-500">
      <a href="/category/social-media" class="dark:text-white">
        Social Media
      </a>
    </li>
    <li
      class="text-center border border-teal-500/50 dark:border-gray-600 px-2 py-1 md:text-lg relative md:min-w-[100px] flex justify-center items-center bg-gray-100/50 dark:bg-gray-700 rounded-lg select-none cursor-pointer hover:shadow hover:shadow-teal-500 dark:hover:shadow-teal-500">
      <a href="/category/customer-support" class="dark:text-white">
        Customer Support
      </a>
    </li>
    <li
      class="text-center border border-teal-500/50 dark:border-gray-600 px-2 py-1 md:text-lg relative md:min-w-[100px] flex justify-center items-center bg-gray-100/50 dark:bg-gray-700 rounded-lg select-none cursor-pointer hover:shadow hover:shadow-teal-500 dark:hover:shadow-teal-500">
      <a href="/category/sales" class="dark:text-white">
        Sales
      </a>
    </li>
  </ul>

</div>

Related Examples

Tag Input field
This code creates a dynamic tag input field using HTML, JavaScript, and TailwindCSS. Users can type tags into the input field and press "Enter" to add them. Each tag is displayed inside the input field as a styled container with a remove button. The tag input is limited to a maximum of 5 tags, and an error message is shown if the limit is exceeded. Users can remove tags to free up space for new ones. The input field and tags are styled using TailwindCSS, ensuring a clean and responsive design.

Anonymous

2 weeks ago

68
Tag Cloud
Word/Tag cloud

Prajwal Hallale

3 years ago

11k
Tag/Button Cloud
Responsive tag cloud. Made with Flex-Box

TailwindFlex

4 years ago

12.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.

Anonymous

1 year ago

1.8k
Responsive list
Horizontal list of items

Sophia Baker

3 years ago

10.9k
Tag cloud with Javascript

Charlotte Dupont

3 years ago

11.3k
Category tags
Monocolor tag cloud

Piet Vriend

3 years ago

11.4k
Content Discovery Platform with Search & Filter
A modern, responsive web application built with Tailwind CSS that showcases content cards with search and filter functionality.

Sufyan jutt

10 months ago

829
Tag links component

Arya

3 years ago

10.2k
GitHub

МОЙДОЫР

11 months ago

1k
Tag Cloud
Tag cloud with sub-sections

Prajwal Hallale

3 years ago

13.1k
Hashtag Pills
Minimal hastag cloud

TailwindFlex

4 years ago

13.6k