Home
OmKar Mehta
Tag cloud

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

Tag Cloud

Author OmKar Mehta

1.7k

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

Category tags
Monocolor tag cloud

Author:
Piet Vriend

2 years ago

10.5k
User list
User list

Author:
Anonymous

4 months ago

277
Info chips with icon

Author:
Bunny

2 years ago

9.8k
purchase
buy car online

Author:
Nishimwe Jeanine

4 months ago

726
visit
to known any thin

Author:
Nishimwe Jeanine

4 months ago

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

Author:
Ele Eriksen

4 months ago

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

Author:
Code Master(Mfuranziza Dusabe Hamza)

4 months ago

366
Tag Cloud
Word/Tag cloud

Author:
Prajwal Hallale

2 years ago

10.8k
Tag Cloud - simple and clean

Author:
Prajwal Hallale

1 year ago

1.1k
shopping
easy way to get pizza

Author:
Nishimwe Jeanine

4 months ago

739
Category filter section
Neatly organized clickable rectangular elements with category names

Author:
Anonymous

1 year ago

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

Author:
Márcio Bortolini

1 year ago

2.1k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components