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

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

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 weeks ago

107
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:
Maxim

6 months ago

3.1k
Tag links component

Author:
Arya

2 years ago

8.7k
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:
SANJAY SINGH GARIYA

1 week ago

125
Minimal tag cloud design with heading text

Author:
Rafferty Kim

2 years ago

9.7k
Info chips with icon

Author:
Bunny

2 years ago

9.3k
shopping
easy way to get pizza

Author:
Nishimwe Jeanine

3 weeks ago

125
Hashtag Pills
Minimal hastag cloud

Author:
TailwindFlex

2 years ago

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

Author:
Anonymous

3 months ago

661
Category tags
Monocolor tag cloud

Author:
Piet Vriend

2 years ago

10.2k
visit
to known any thin

Author:
Nishimwe Jeanine

3 weeks ago

13
Tag cloud with Javascript

Author:
Charlotte Dupont

2 years ago

10.2k

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components