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

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.

Maxim

1 year ago

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

Anonymous

2 years ago

8.9k
Tag links component

Arya

3 years ago

10.2k
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.7k
Minimal tag cloud design with heading text

Rafferty Kim

3 years ago

10.9k
Category Filter
Neatly organized clickable rectangular elements with category names

Márcio Bortolini

2 years ago

2.6k
Info chips with icon

Bunny

3 years ago

10.5k
User list
User list

Anonymous

1 year ago

944
Tag cloud with Javascript

Charlotte Dupont

3 years ago

11.3k
Tag Cloud - simple and clean

Prajwal Hallale

2 years ago

1.1k
visit
to known any thin

Nishimwe Jeanine

1 year ago

917
Acode master
Welcome to Hamza's official portfolio — a creative developer blending modern design with powerful code. Explore animations, projects, and innovations crafted with HTML, Tailwind CSS, and passion.

Code Master(Mfuranziza Dusabe Hamza)

1 year ago

1.3k