Tailwind CSS Ranking Cards Blocks

Ranking Cards

Tailwind CSS ranking cards for top countries, browser usage, editorial leaderboards, and compact ranked breakdowns.

Country Ranking Card with Bars Pro

Country rows pair flags, horizontal bars, and percentage labels in one compact ranking card.

<div class="size-full flex flex-col bg-card border border-card-line shadow-2xs rounded-xl">
                    
                    <div class="p-5 pb-3 flex justify-between items-center">
                      <h2 class="ms-1 inline-block font-semibold text-foreground">
                        Top countries
                      </h2>

<a class="text-sm text-primary decoration-2 hover:underline font-medium focus:outline-hidden focus:underline" href="#">
                        Reports
                      </a>
                    </div>

<div class="flex flex-col justify-between h-full pb-5 px-5">
                      
                      <div class="pt-3 grid grid-cols-3 items-end gap-4">
                        
                        <div class="text-center">
                          <img class="mb-3 shrink-0 size-8 rounded-full mx-auto" src="../../../assets/vendor/svg-country-flags/png250px/us.png" alt="United States">

<p class="mt-1.5 text-sm text-foreground">
                            United States
                          </p>
                        </div>

<div class="text-center">
                          <img class="mb-3 shrink-0 size-8 rounded-full mx-auto" src="../../../assets/vendor/svg-country-flags/png250px/de.png" alt="Germany">

<p class="mt-1.5 text-sm text-foreground">
                            Germany
                          </p>
                        </div>

<div class="text-center">
                          <img class="mb-3 shrink-0 size-8 rounded-full mx-auto" src="../../../assets/vendor/svg-country-flags/png250px/gb.png" alt="United Kingdom">

<div class="mt-4 py-3 flex items-center text-sm text-foreground before:flex-1 before:border-t before:border-line-2 before:me-3 after:flex-1 after:border-t after:border-line-2 after:ms-3">
                        <span class="py-1 ps-1.5 pe-2.5 inline-flex items-center gap-x-1.5 text-xs font-medium bg-teal-100 text-teal-800 rounded-full dark:bg-teal-500/10 dark:text-teal-500">
                          <svg class="shrink-0 size-3" width="16" height="16" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                            <path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zm-3.97-3.03a.75.75 0 0 0-1.08.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-.01-1.05z"/>
                          </svg>
                          Good
                        </span>
                      </div>
    
                      <p class="mt-1 text-sm text-muted-foreground-1">Your overall performance is 98% higher than average.</p>
                    </div>
                    
                  </div>

Open related referrals page

Browser Ranking Card with Trend View Pro

Browser rows combine share values, delta markers, and a small trend view in one ranked panel.

<div class="h-full flex flex-col bg-card border border-card-line shadow-2xs rounded-xl">
                      
                      <div class="p-5 pb-3 flex justify-between items-center">
                        <h2 class="ms-1 inline-block text-lg font-semibold text-foreground">
                          Browsers
                        </h2>

<div class="flex flex-col justify-between h-full pb-5 px-5">
                        <div>
                          <p class="text-5xl md:text-6xl font-medium text-primary">
                            <span class="bg-clip-text bg-linear-to-tl from-chart-5 to-chart-primary text-transparent">
                               85%
                            </span>
                          </p>

<p class="mt-5 text-muted-foreground-1">
                            Visitors are viewing website from the desktop device. 57% of all users are using MacOS
                          </p>
                        </div>

<div class="mt-5">
                          
                          <div class="grid grid-cols-3 gap-3">
                            
                            <div class="p-3  bg-surface rounded-xl">
                              <img class="shrink-0 size-6 mb-4" src="../../../assets/svg/brands/chrome.svg" alt="Chrome Logo">
                              <p class="text-sm text-foreground">
                                Chrome
                              </p>
                              <p class="font-semibold text-lg text-foreground">
                                 56%
                              </p>
                            </div>

<div class="p-3  bg-surface rounded-xl">
                              <img class="shrink-0 size-6 mb-4" src="../../../assets/svg/brands/firefox.svg" alt="Firefox Logo">
                              <p class="text-sm text-foreground">
                                Firefox
                              </p>
                              <p class="font-semibold text-lg text-foreground">
                                 24%
                              </p>
                            </div>

<div class="p-3  bg-surface rounded-xl">
                              <img class="shrink-0 size-6 mb-4" src="../../../assets/svg/brands/safari.svg" alt="Safari Logo">
                              <p class="text-sm text-foreground">
                                Safari
                              </p>
                              <p class="font-semibold text-lg text-foreground">
                                 17%
                              </p>
                            </div>
                            
                          </div>
                          
                        </div>

<div class="mt-5">
                          
                          <div class="bg-layer border border-layer-line rounded-xl shadow-xs py-2 px-3" role="alert" tabindex="-1" aria-labelledby="hs-pro-dpna-label">
                            <div class="flex items-center gap-x-3">
                              <svg class="shrink-0 size-5 text-foreground" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9"/><path d="M10.3 21a1.94 1.94 0 0 0 3.4 0"/></svg>
                              <div class="grow">
                                <h3 id="hs-pro-dpna-label" class="text-sm text-foreground font-semibold">
                                  Push notifications
                                </h3>
                                <p class="text-sm text-muted-foreground-2">
                                  Automatically send me notifications
                                </p>
                              </div>

Open related admin dashboard page

Leaderboard Card with Side Chart Free

A tall leaderboard card stacks ranked rows, score markers, and a side chart in one view.

<div class="relative z-1 ">
                      
                      <div class="p-4 pb-0">
                        <div class="pb-2 flex flex-wrap justify-between items-center gap-2 border-b border-dashed border-line-2">
                          <h2 class="font-medium text-sm text-foreground">
                            Top authors
                          </h2>

<button type="button" class="group inline-flex items-center text-[13px] text-start text-muted-foreground-1">
                            <span class="block me-1">
                              Next:
                            </span>
                            <span class="inline-flex items-center text-primary underline-offset-2 decoration-2 group-hover:underline group-hover:text-primary-hover group-focus:underline group-focus:text-primary-focus">
                              Niki Kray
                              <svg class="shrink-0 size-4 ms-0.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m9 18 6-6-6-6"></path></svg>
                            </span>
                          </button>
                          
                        </div>
                      </div>

<div class="p-4">
                        
                        <div class="flex items-center gap-x-3">
                          <span class="relative size-14 shrink-0 bg-secondary rounded-full">
                            <img class="absolute inset-0 size-full object-cover rounded-full" src="https://images.unsplash.com/photo-1719937206140-c4b208c78aa7?q=80&w=160&h=160&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="Post Image">
                          </span>
                          <div class="grow">
                            <p class="font-medium text-lg text-foreground">
                              Brian Williams
                            </p>
                          </div>
                        </div>

<div class="mt-5 grid grid-cols-1 sm:grid-cols-2 gap-y-4 gap-x-2">
                          
                          <div class="flex flex-col gap-y-1">
                            <span class="text-[13px] text-muted-foreground-1">
                              Published posts:
                            </span>

<div class="flex flex-col gap-y-1">
                            <span class="text-[13px] text-muted-foreground-1">
                              Avg. post views:
                            </span>

<span class="font-medium text-sm text-foreground">
                                285
                              </span>
                            </div>
                          </div>
                          
      
                          
                          <div class="flex flex-col gap-y-1">
                            <span class="text-[13px] text-muted-foreground-1">
                              Total comments:
                            </span>
        
                            <div class="flex items-center gap-x-1.5">
                              <svg class="shrink-0 size-4 text-foreground" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M7.9 20A9 9 0 1 0 4 16.1L2 22Z"/></svg>
  
                              <span class="font-medium text-sm text-foreground">
                                18
                              </span>
                            </div>
                          </div>

<div class="flex flex-col gap-y-1">
                            <span class="text-[13px] text-muted-foreground-1">
                              Posts referred:
                            </span>

<div class="pt-5 mt-5 border-t border-line-2">
                          
                          <div class="grid grid-cols-2 gap-2">
                            <div class="flex flex-col">
                              
                              <div class="my-3 flex -space-x-3">
                                <img class="shrink-0 size-6 relative z-2 ring-2 ring-layer rounded-full" src="https://images.unsplash.com/photo-1708443683276-8a3eb30faef2?q=80&w=160&h=160&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="Avatar">
                                <img class="shrink-0 size-6 relative z-1 -mt-3 ring-2 ring-layer rounded-full" src="https://images.unsplash.com/photo-1659482633369-9fe69af50bfb?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=facearea&facepad=3&w=320&h=320&q=80" alt="Avatar">
                                <img class="shrink-0 size-6 relative ring-2 ring-layer rounded-full" src="https://images.unsplash.com/photo-1541101767792-f9b2b1c4f127?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=facearea&facepad=3&w=320&h=320&q=80" alt="Avatar">
                              </div>

<h3 class="text-sm text-muted-foreground-1">
                                Total views
                              </h3>

<div id="hs-pro-atatpvch" class="min-h-22.5"></div>
                          </div>

<div class="pt-5 mt-5 border-t border-line-2">
                          
                          <div class="relative flex items-center gap-1">
                            
                            <svg class="shrink-0 size-12" width="64" height="64" viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg">
                              <g transform="translate(32,32)">
                                <g>
                                  <rect x="-3" y="-28" width="6" height="14" rx="3" fill="currentColor" transform="rotate(0)" class="text-primary"></rect>
                                  <rect x="-3" y="-28" width="6" height="14" rx="3" fill="currentColor" transform="rotate(30)" class="text-primary"></rect>
                                  <rect x="-3" y="-28" width="6" height="14" rx="3" fill="currentColor" transform="rotate(60)" class="text-primary"></rect>
                                  <rect x="-3" y="-28" width="6" height="14" rx="3" fill="currentColor" transform="rotate(90)" class="text-primary"></rect>
                                  <rect x="-3" y="-28" width="6" height="14" rx="3" fill="currentColor" transform="rotate(120)" class="text-primary"></rect>
                                  <rect x="-3" y="-28" width="6" height="14" rx="3" fill="currentColor" transform="rotate(150)" class="text-primary"></rect>
                                  <rect x="-3" y="-28" width="6" height="14" rx="3" fill="currentColor" transform="rotate(180)" class="text-primary"></rect>
                                  <rect x="-3" y="-28" width="6" height="14" rx="3" fill="currentColor" transform="rotate(210)" class="text-primary"></rect>
                                  <rect x="-3" y="-28" width="6" height="14" rx="3" fill="currentColor" transform="rotate(240)" class="text-primary"></rect>
                                  <rect x="-3" y="-28" width="6" height="14" rx="3" fill="currentColor" transform="rotate(270)" class="text-primary"></rect>
                                  <rect x="-3" y="-28" width="6" height="14" rx="3" fill="currentColor" transform="rotate(300)" class="text-layer"></rect>
                                  <rect x="-3" y="-28" width="6" height="14" rx="3" fill="currentColor" transform="rotate(330)" class="text-layer"></rect>
                                </g>
                              </g>
                            </svg>

<div class="grow pe-20">
                              <div class="flex flex-col">
                                <span class="block text-[13px] text-muted-foreground-1">
                                  Content quality score
                                </span>
                                <div class="flex items-center gap-2">
                                  <span class="block font-medium text-sm text-foreground">
                                    76%
                                  </span>
                                  <span class="flex justify-center items-center gap-x-1 text-sm text-green-600 dark:text-green-500">
                                    <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m5 12 7-7 7 7"></path><path d="M12 19V5"></path></svg>
                                    3.4%
                                  </span>
                                </div>
                              </div>
                            </div>

<div class="absolute top-1/2 inset-e-0 -translate-y-1/2">
                              <button type="button" class="group size-7 lg:size-auto lg:py-1.5 lg:px-2 flex items-center justify-center border border-layer-line text-layer-foreground text-xs rounded-full py-1 hover:bg-primary-50 hover:border-primary-100 hover:text-primary-700 focus:outline-none focus:bg-primary-50 focus:border-primary-100 focus:text-primary-700 dark:hover:bg-primary-500/20 dark:hover:border-primary-500/20 dark:hover:text-primary-400 dark:focus:bg-primary-500/20 dark:focus:border-primary-500/20 dark:focus:text-primary-400">
                                <span class="lg:block hidden max-w-0 overflow-hidden whitespace-nowrap opacity-0 transition-all duration-300 group-hover:me-1 group-hover:max-w-25 group-hover:opacity-100 group-focus:me-1 group-focus:max-w-25 group-focus:opacity-100">
                                  View all
                                </span>
                                <svg class="shrink-0 size-3" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M15 3h6v6"/><path d="m21 3-7 7"/><path d="m3 21 7-7"/><path d="M9 21H3v-6"/></svg>
                              </button>
                            </div>
                            
                          </div>

<ul class="mt-5 flex flex-col gap-y-3">
                            
                            <li class="flex justify-between items-center gap-x-2">
                              <div class="flex flex-col gap-y-1">
                                <span class="block text-[13px] text-muted-foreground-1">
                                  Title/subject length
                                </span>
                                <span class="block font-medium text-sm text-foreground">
                                  50-60
                                </span>
                              </div>

<li class="flex justify-between items-center gap-x-2">
                              <div class="flex flex-col gap-y-1">
                                <span class="block text-[13px] text-muted-foreground-1">
                                  Body word count
                                </span>
                                <span class="block font-medium text-sm text-foreground">
                                  300–800
                                </span>
                              </div>

<li class="flex justify-between items-center gap-x-2">
                              <div class="flex flex-col gap-y-1">
                                <span class="block text-[13px] text-muted-foreground-1">
                                  Tags/keywords
                                </span>
                                <span class="block font-medium text-sm text-foreground">
                                  3-8
                                </span>
                              </div>

<li class="flex justify-between items-center gap-x-2">
                              <div class="flex flex-col gap-y-1">
                                <span class="block text-[13px] text-muted-foreground-1">
                                  Broken links
                                </span>
                                <span class="block font-medium text-sm text-foreground">
                                  2
                                </span>
                              </div>

<li class="flex justify-between items-center gap-x-2">
                              <div class="flex flex-col gap-y-1">
                                <span class="block text-[13px] text-muted-foreground-1">
                                  Spelling & grammar
                                </span>
                                <span class="block font-medium text-sm text-foreground">
                                  100%
                                </span>
                              </div>

html.classList.toggle("dark", resolvedAppearance === "dark");
                        html.setAttribute("data-theme", `theme-${colorTheme}`);
                        if (brand) html.setAttribute("data-brand", brand);
                        if (font) html.setAttribute("data-font", font);
                      })();
                    </script>

if (!data.type) return false;
                        if (data.type === "hs:color-theme-change") {
                          window.dispatchEvent(new CustomEvent("on-hs-color-theme-change", {
                            detail: {
                              target: document.documentElement,
                              value: data.value
                            }
                          }));
                        }
                      });
                    </script>
                    <script>
                    	window.addEventListener('load', () => {
                    	  // Apex Area Chart
                    	  (function () {
                    	    buildChart('#hs-pro-atatpvch', (mode) => ({
                    	      chart: {
                    	        height: 90,
                    	        type: 'area',
                    	        toolbar: {
                    	          show: false
                    	        },
                    	        sparkline: {
                    	          enabled: true
                    	        },
                    	        zoom: {
                    	          enabled: false
                    	        }
                    	      },
                    	      series: [
                              {
                    						name: 'Total views',
                    						data: [780, 770, 760, 790, 775, 765, 755, 870, 880, 890, 875, 870, 860, 975, 990, 965, 960, 970, 975, 1085, 1070, 1060, 1080, 1075, 1065, 1070, 1060, 1080, 1075, 1065, 1071],
                    						valuePostfix: ''
                              },
                              {
                    						name: 'Total posts',
                    						data: [25, 26, 27, 22, 25, 26, 37, 36, 35, 33, 35, 36, 37, 35, 44, 46, 47, 46, 45, 44, 46, 47, 45, 45, 46, 46, 47, 45, 45, 46, 48],
                                valuePostfix: ''
                              }
                            ],
                    	      legend: {
                    	        show: false
                    	      },
                    	      dataLabels: {
                    	        enabled: false
                    	      },
                    	      stroke: {
                    	        curve: 'straight',
                    	        width: 2
                    	      },
                    	      fill: {
                    	        type: 'gradient',
                    	        gradient: {
                    	          type: 'vertical',
                    	          shadeIntensity: 1,
                    	          opacityFrom: 0.2,
                    	          opacityTo: 0.8
                    	        }
                    	      },
                    	      xaxis: {
                              type: 'category',
                              categories: [
                                '1 Jun 2025',
                                '2 Jun 2025',
                                '3 Jun 2025',
                                '4 Jun 2025',
                                '5 Jun 2025',
                                '6 Jun 2025',
                                '7 Jun 2025',
                                '8 Jun 2025',
                                '9 Jun 2025',
                                '10 Jun 2025',
                                '11 Jun 2025',
                                '12 Jun 2025',
                                '13 Jun 2025',
                                '14 Jun 2025',
                                '15 Jun 2025',
                                '16 Jun 2025',
                                '17 Jun 2025',
                                '18 Jun 2025',
                                '19 Jun 2025',
                                '20 Jun 2025',
                                '21 Jun 2025',
                                '22 Jun 2025',
                                '23 Jun 2025',
                                '24 Jun 2025',
                                '25 Jun 2025',
                                '26 Jun 2025',
                                '27 Jun 2025',
                                '28 Jun 2025',
                                '29 Jun 2025',
                                '30 Jun 2025',
                                '31 Jun 2025',
                              ],
                              crosshairs: {
                                show: false
                              }
                            },
                    	      tooltip: {
                    	        x: {
                    	          format: 'MMMM yyyy'
                    	        },
                    	        y: {
                    	          formatter: (value) => `$${value >= 1000 ? `${value / 1000}k` : value}`
                    	        },
                    	        custom: function (props) {
                    	          return buildTooltipCompareTwoAlt(props, {
                    	            title: 'Members',
                    	            mode,
                                  hasCategory: false,
                                  hasTextLabel: true,
                                  wrapperExtClasses: 'min-w-36',
                                  isValueDivided: false,
                                  valuePrefix: '',
                                  labelDivider: ':',
                                  labelExtClasses: 'ms-2'
                    	          });
                    	        }
                    	      },
                    	      responsive: [{
                    	        breakpoint: 568,
                    	        options: {
                    	          labels: {
                    	            style: {
                    	              colors: varToColor('--chart-colors-labels'),
                    	              fontSize: '11px',
                    	              fontFamily: cssVarToValue('--font-sans'),
                    	              fontWeight: 400
                    	            },
                    	            offsetX: -2,
                    	            formatter: (title) => title.slice(0, 3)
                    	          },
                    	          yaxis: {
                    	            labels: {
                    	              align: 'left',
                    	              minWidth: 0,
                    	              maxWidth: 140,
                    	              style: {
                    	                colors: varToColor('--chart-colors-yaxis-labels'),
                    	                fontSize: '11px',
                    	                fontFamily: cssVarToValue('--font-sans'),
                    	                fontWeight: 400
                    	              },
                    	              formatter: (value) => value >= 1000 ? `${value / 1000}k` : value
                    	            }
                    	          },
                    	        },
                    	      }]
                    	    }), () => ({
                    	      colors: [varToColor('--chart-colors-primary-hex'), varToColor('--chart-colors-chart-5-hex')],
                    	      fill: {
                    	        gradient: {
                    	          stops: [0, 90, 100]
                    	        }
                    	      },
                    	      grid: {
                    	        strokeDashArray: 2,
                    	        borderColor: varToColor('--chart-colors-grid-border'),
                    	        padding: {
                    	          bottom: 4
                    	        }
                    	      }
                    	    }), () => ({
                    	      colors: [varToColor('--chart-colors-primary-hex-inverse'), varToColor('--chart-colors-chart-5-hex-inverse')],
                    	      fill: {
                    	        gradient: {
                    	          stops: [100, 90, 0]
                    	        }
                    	      },
                    	      grid: {
                    	        strokeDashArray: 2,
                    	        borderColor: varToColor('--chart-colors-grid-border-inverse'),
                    	        padding: {
                    	          bottom: 4
                    	        }
                    	      }
                    	    }));
                    	  })();
                    	});
                    </script>

Open related CMS admin dashboard