Trending Creators

This tailwind example is contributed by Omer fils ELENGA, on 04-Oct-2026. Component is made with Tailwind v3.4. It is responsive.

Card

Author Omer fils ELENGA

Tailwind v3.4 3

Fork Fullscreen

<section class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-10">
  
  <div class="mb-8 flex flex-col sm:flex-row sm:items-end justify-between gap-4 border-b border-gray-100 dark:border-gray-800/80 pb-6">
    <div>
      <div class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-primary-50 dark:bg-primary-950/50 text-primary-600 dark:text-primary-400 text-xs font-semibold tracking-wide uppercase mb-3">
        <span class="w-1.5 h-1.5 rounded-full bg-primary-500 animate-pulse"></span>
        Top creators · Last 30 days
      </div>
      <h2 class="font-display text-3xl font-extrabold tracking-tight text-gray-900 dark:text-white sm:text-4xl">
        Trending Creators
      </h2>
    </div>

<a href="https://tailwindflex.com/trending/users" class="inline-flex items-center gap-2 text-sm font-semibold text-gray-700 dark:text-gray-300 hover:text-primary-600 dark:hover:text-primary-400 transition-colors group">
      View all creators
      <svg class="w-4 h-4 transition-transform duration-200 group-hover:translate-x-1" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
        <path stroke-linecap="round" stroke-linejoin="round" d="M17 8l4 4m0 0l-4 4m4-4H3" />
      </svg>
    </a>
  </div>

<ul class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
    
    
    <li class="group relative bg-white dark:bg-gray-900/60 rounded-2xl p-5 border border-amber-200/60 dark:border-amber-500/30 shadow-sm hover:shadow-xl hover:shadow-amber-500/5 hover:-translate-y-1 transition-all duration-300 flex gap-4 items-start">
      <div class="relative shrink-0">
        <a href="https://tailwindflex.com/@omer-fils-elenga" class="block overflow-hidden rounded-xl ring-2 ring-amber-400/50 dark:ring-amber-400/30">
          <img class="h-20 w-20 object-cover group-hover:scale-105 transition-transform duration-300" width="200" height="200" loading="lazy" src="https://lh3.googleusercontent.com/a/ACg8ocKtpueB00ZdmmbwHuEtYEPdrXJPJfNiBWQk1dOtCeuvGkNyEfyz=s96-c" alt="Omer fils ELENGA">
        </a>
        <span class="absolute -bottom-2 -right-2 flex h-7 w-7 items-center justify-center rounded-lg bg-amber-500 text-white font-display text-xs font-black shadow-md">
          #1
        </span>
      </div>

<div class="flex min-w-0 flex-1 flex-col justify-between self-stretch">
        <div>
          <a href="https://tailwindflex.com/@omer-fils-elenga" class="block truncate font-display text-base font-bold text-gray-900 dark:text-white group-hover:text-primary-600 dark:group-hover:text-primary-400 transition-colors">
            Omer fils ELENGA
          </a>
          <span class="inline-block mt-0.5 text-xs font-medium text-amber-600 dark:text-amber-400">★ Top Contributor</span>
        </div>

<div class="flex items-center justify-between gap-2 pt-3 border-t border-gray-100 dark:border-gray-800">
          <span class="text-xs font-medium text-gray-500 dark:text-gray-400">
            <strong class="text-gray-900 dark:text-gray-200">82</strong> components
          </span>
          <span class="inline-flex items-center gap-1 px-2.5 py-1 rounded-full text-xs font-semibold bg-amber-50 dark:bg-amber-950/40 text-amber-700 dark:text-amber-300 border border-amber-200/50 dark:border-amber-800/40">
            <svg class="h-3.5 w-3.5 text-amber-500" fill="currentColor" viewBox="0 0 20 20"><path d="M11.3 1.046A1 1 0 0112 2v5h4a1 1 0 01.82 1.57l-7 10A1 1 0 018 18v-5H4a1 1 0 01-.82-1.57l7-10a1 1 0 011.12-.384z"/></svg>
            1.7k pts
          </span>
        </div>
      </div>
    </li>

<li class="group relative bg-white dark:bg-gray-900/60 rounded-2xl p-5 border border-gray-200/70 dark:border-gray-800/80 shadow-sm hover:shadow-xl hover:-translate-y-1 transition-all duration-300 flex gap-4 items-start">
      <div class="relative shrink-0">
        <a href="https://tailwindflex.com/@jugendra-gangwar" class="block overflow-hidden rounded-xl">
          <img class="h-20 w-20 object-cover group-hover:scale-105 transition-transform duration-300" width="200" height="200" loading="lazy" src="https://lh3.googleusercontent.com/a/ACg8ocITatn1cnYva1c39UKTjYWFLLXk0VXTYoYeP3lYn-9wnCV-m8uQ=s96-c" alt="JUGENDRA GANGWAR">
        </a>
        <span class="absolute -bottom-2 -right-2 flex h-7 w-7 items-center justify-center rounded-lg bg-slate-700 text-white font-display text-xs font-black shadow-md">
          #2
        </span>
      </div>

<div class="flex min-w-0 flex-1 flex-col justify-between self-stretch">
        <div>
          <a href="https://tailwindflex.com/@jugendra-gangwar" class="block truncate font-display text-base font-bold text-gray-900 dark:text-white group-hover:text-primary-600 dark:group-hover:text-primary-400 transition-colors">
            JUGENDRA GANGWAR
          </a>
        </div>

<div class="flex items-center justify-between gap-2 pt-3 border-t border-gray-100 dark:border-gray-800">
          <span class="text-xs font-medium text-gray-500 dark:text-gray-400">
            <strong class="text-gray-900 dark:text-gray-200">39</strong> components
          </span>
          <span class="inline-flex items-center gap-1 px-2.5 py-1 rounded-full text-xs font-semibold bg-gray-100 dark:bg-gray-800 text-gray-700 dark:text-gray-300">
            <svg class="h-3.5 w-3.5 text-amber-500" fill="currentColor" viewBox="0 0 20 20"><path d="M11.3 1.046A1 1 0 0112 2v5h4a1 1 0 01.82 1.57l-7 10A1 1 0 018 18v-5H4a1 1 0 01-.82-1.57l7-10a1 1 0 011.12-.384z"/></svg>
            1.7k pts
          </span>
        </div>
      </div>
    </li>

<li class="group relative bg-white dark:bg-gray-900/60 rounded-2xl p-5 border border-gray-200/70 dark:border-gray-800/80 shadow-sm hover:shadow-xl hover:-translate-y-1 transition-all duration-300 flex gap-4 items-start">
      <div class="relative shrink-0">
        <a href="https://tailwindflex.com/@sammytg7" class="block overflow-hidden rounded-xl">
          <img class="h-20 w-20 object-cover group-hover:scale-105 transition-transform duration-300" width="200" height="200" loading="lazy" src="https://tailwindflex.com/storage/avatars/1066.webp?ver=3" alt="$@(\/)(\/)¥">
        </a>
        <span class="absolute -bottom-2 -right-2 flex h-7 w-7 items-center justify-center rounded-lg bg-amber-700 text-white font-display text-xs font-black shadow-md">
          #3
        </span>
      </div>

<div class="flex min-w-0 flex-1 flex-col justify-between self-stretch">
        <div>
          <a href="https://tailwindflex.com/@sammytg7" class="block truncate font-display text-base font-bold text-gray-900 dark:text-white group-hover:text-primary-600 dark:group-hover:text-primary-400 transition-colors">
            $@(\/)(\/)¥
          </a>
          <p class="mt-1 text-xs text-gray-500 dark:text-gray-400 line-clamp-2 leading-relaxed">
            Bringing web ideas to life! Full-stack developer with 5+ years of experience.
          </p>
        </div>

<div class="flex items-center justify-between gap-2 pt-3 border-t border-gray-100 dark:border-gray-800 mt-2">
          <span class="text-xs font-medium text-gray-500 dark:text-gray-400">
            <strong class="text-gray-900 dark:text-gray-200">61</strong> components
          </span>
          <span class="inline-flex items-center gap-1 px-2.5 py-1 rounded-full text-xs font-semibold bg-gray-100 dark:bg-gray-800 text-gray-700 dark:text-gray-300">
            <svg class="h-3.5 w-3.5 text-amber-500" fill="currentColor" viewBox="0 0 20 20"><path d="M11.3 1.046A1 1 0 0112 2v5h4a1 1 0 01.82 1.57l-7 10A1 1 0 018 18v-5H4a1 1 0 01-.82-1.57l7-10a1 1 0 011.12-.384z"/></svg>
            606 pts
          </span>
        </div>
      </div>
    </li>

<li class="group relative bg-white dark:bg-gray-900/60 rounded-2xl p-5 border border-gray-200/70 dark:border-gray-800/80 shadow-sm hover:shadow-xl hover:-translate-y-1 transition-all duration-300 flex gap-4 items-start">
      <div class="relative shrink-0">
        <a href="https://tailwindflex.com/@alif-bima-pradana" class="block overflow-hidden rounded-xl">
          <img class="h-20 w-20 object-cover group-hover:scale-105 transition-transform duration-300" width="200" height="200" loading="lazy" src="https://tailwindflex.com/storage/avatars/38209.webp?ver=2" alt="Alif Bima Pradana">
        </a>
        <span class="absolute -bottom-2 -right-2 flex h-7 w-7 items-center justify-center rounded-lg bg-gray-200 dark:bg-gray-800 text-gray-700 dark:text-gray-300 font-display text-xs font-bold">
          #4
        </span>
      </div>

<div class="flex min-w-0 flex-1 flex-col justify-between self-stretch">
        <div>
          <a href="https://tailwindflex.com/@alif-bima-pradana" class="block truncate font-display text-base font-bold text-gray-900 dark:text-white group-hover:text-primary-600 dark:group-hover:text-primary-400 transition-colors">
            Alif Bima Pradana
          </a>
          <p class="mt-1 text-xs text-gray-500 dark:text-gray-400 line-clamp-2 leading-relaxed">
            I'm fullstack Web Developer and Mobile developer
          </p>
        </div>

<div class="flex items-center justify-between gap-2 pt-3 border-t border-gray-100 dark:border-gray-800 mt-2">
          <span class="text-xs font-medium text-gray-500 dark:text-gray-400">
            <strong class="text-gray-900 dark:text-gray-200">32</strong> components
          </span>
          <span class="inline-flex items-center gap-1 px-2.5 py-1 rounded-full text-xs font-semibold bg-gray-100 dark:bg-gray-800 text-gray-700 dark:text-gray-300">
            <svg class="h-3.5 w-3.5 text-amber-500" fill="currentColor" viewBox="0 0 20 20"><path d="M11.3 1.046A1 1 0 0112 2v5h4a1 1 0 01.82 1.57l-7 10A1 1 0 018 18v-5H4a1 1 0 01-.82-1.57l7-10a1 1 0 011.12-.384z"/></svg>
            602 pts
          </span>
        </div>
      </div>
    </li>

</ul>
</section>