Home
Rafferty Kim
Minimal tag cloud design with heading text

Minimal tag cloud design with heading text

This tailwind example is contributed by Rafferty Kim, on 25-Feb-2023. Component is made with Tailwind CSS v3. It is responsive.

Tag Cloud

Author Rafferty Kim

8.9k

Fork Fullscreen

<div>
    <h2 class="flex flex-row flex-nowrap items-center mt-24">
        <span class="flex-grow block border-t border-black"></span>
        <span class="flex-none block mx-4 px-4 py-2.5 text-md rounded leading-none font-medium bg-black text-white">
        Popular Tags
    </span>
        <span class="flex-grow block border-t border-black"></span>
    </h2>

<div class="flex justify-center flex-wrap gap-2 p-4 max-w-sm mx-auto my-4 text-sm">
        <button class="px-2 py-1 rounded bg-gray-200/50 text-gray-700 hover:bg-gray-300">Travel</button>
        <button class="px-2 py-1 rounded bg-gray-200/50 text-gray-700 hover:bg-gray-300">Food</button>
        <button class="px-2 py-1 rounded bg-gray-200/50 text-gray-700 hover:bg-gray-300">Art</button>
        <button class="px-2 py-1 rounded bg-gray-200/50 text-gray-700 hover:bg-gray-300">Music</button>
        <button class="px-2 py-1 rounded bg-gray-200/50 text-gray-700 hover:bg-gray-300">Technology</button>
        <button class="px-2 py-1 rounded bg-gray-200/50 text-gray-700 hover:bg-gray-300">Photography</button>
        <button class="px-2 py-1 rounded bg-gray-200/50 text-gray-700 hover:bg-gray-300">Sports</button>
        <button class="px-2 py-1 rounded bg-gray-200/50 text-gray-700 hover:bg-gray-300">Fashion</button>
        <button class="px-2 py-1 rounded bg-gray-200/50 text-gray-700 hover:bg-gray-300">History</button>
        <button class="px-2 py-1 rounded bg-gray-200/50 text-gray-700 hover:bg-gray-300">Nature</button>
        <button class="px-2 py-1 rounded bg-gray-200/50 text-gray-700 hover:bg-gray-300">Health</button>
        <button class="px-2 py-1 rounded bg-gray-200/50 text-gray-700 hover:bg-gray-300">Nurition</button>
        <button class="px-2 py-1 rounded bg-gray-200/50 text-gray-700 hover:bg-gray-300">Education</button>
        <button class="px-2 py-1 rounded bg-gray-200/50 text-gray-700 hover:bg-gray-300">Fitness</button>
        <button class="px-2 py-1 rounded bg-gray-200/50 text-gray-700 hover:bg-gray-300">Business</button>
    </div>
</div>

Related Examples