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

680

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