Tailwind CSS Ratings & Emoji Selectors Blocks

All Blocks
Application UI
Forms
Ratings & Emoji Selectors

Ratings & Emoji Selectors

Rating and emoji selector patterns for star feedback, reactions, skin tones, and expressive choice grids.

Emoji Skin Tone Picker Pro

Emoji grid presents skin tone options as large selectable tiles with one active state.

<div class="flex flex-wrap gap-3">
                      
                      <label for="hs-pro-vcsemr1" class="size-12 flex flex-col justify-center items-center text-center bg-layer border border-layer-line text-layer-foreground text-2xl hover:bg-surface-hover has-checked:border-primary-checked has-checked:ring-1 has-checked:ring-primary-checked cursor-pointer rounded-lg">
                        <input type="radio" id="hs-pro-vcsemr1" class="hidden peer" value="Default (Yellow)" name="hs-pro-vcsemr" checked>
                        👋
                      </label>

<label for="hs-pro-vcsemr2" class="size-12 flex flex-col justify-center items-center text-center bg-layer border border-layer-line text-layer-foreground text-2xl hover:bg-surface-hover has-checked:border-primary-checked has-checked:ring-1 has-checked:ring-primary-checked cursor-pointer rounded-lg">
                        <input type="radio" id="hs-pro-vcsemr2" class="hidden peer" value="Light Skin Tone" name="hs-pro-vcsemr" >
                        👋🏻
                      </label>

<label for="hs-pro-vcsemr3" class="size-12 flex flex-col justify-center items-center text-center bg-layer border border-layer-line text-layer-foreground text-2xl hover:bg-surface-hover has-checked:border-primary-checked has-checked:ring-1 has-checked:ring-primary-checked cursor-pointer rounded-lg">
                        <input type="radio" id="hs-pro-vcsemr3" class="hidden peer" value="Medium-Light Skin Tone" name="hs-pro-vcsemr" >
                        👋🏼
                      </label>

<label for="hs-pro-vcsemr4" class="size-12 flex flex-col justify-center items-center text-center bg-layer border border-layer-line text-layer-foreground text-2xl hover:bg-surface-hover has-checked:border-primary-checked has-checked:ring-1 has-checked:ring-primary-checked cursor-pointer rounded-lg">
                        <input type="radio" id="hs-pro-vcsemr4" class="hidden peer" value="Medium Skin Tone" name="hs-pro-vcsemr" >
                        👋🏽
                      </label>

<label for="hs-pro-vcsemr5" class="size-12 flex flex-col justify-center items-center text-center bg-layer border border-layer-line text-layer-foreground text-2xl hover:bg-surface-hover has-checked:border-primary-checked has-checked:ring-1 has-checked:ring-primary-checked cursor-pointer rounded-lg">
                        <input type="radio" id="hs-pro-vcsemr5" class="hidden peer" value="Medium-Dark Skin Tone" name="hs-pro-vcsemr" >
                        👋🏾
                      </label>

<label for="hs-pro-vcsemr6" class="size-12 flex flex-col justify-center items-center text-center bg-layer border border-layer-line text-layer-foreground text-2xl hover:bg-surface-hover has-checked:border-primary-checked has-checked:ring-1 has-checked:ring-primary-checked cursor-pointer rounded-lg">
                        <input type="radio" id="hs-pro-vcsemr6" class="hidden peer" value="Dark Skin Tone" name="hs-pro-vcsemr" >
                        👋🏿
                      </label>
                      
                    </div>

Open related video call template

Star Rating Selector Pro

Five-star row turns product feedback into a single-choice rating control.

<h3 class="mb-3 text-sm font-medium text-foreground">
  Filter by star rating
</h3>

<div class="grid grid-cols-5 gap-2">
  
  <label for="hs-pro-shpror1star" class="p-2.5 group relative flex justify-center items-center gap-x-3 text-center text-xs border border-layer-line text-layer-foreground cursor-pointer rounded-lg
  has-checked:text-primary-checked
  has-checked:border-primary-checked
  has-checked:ring-1
  has-checked:ring-primary-checked
  has-disabled:pointer-events-none
  has-disabled:opacity-70
  has-disabled:text-line-2
  has-disabled:after:absolute
  has-disabled:after:inset-0
  has-disabled:after:bg-[linear-gradient(to_right_bottom,transparent_calc(50%-1px),var(--color-line-2)_calc(50%-1px),var(--color-line-2)_50%,transparent_50%)] ">
    <input type="checkbox" id="hs-pro-shpror1star" class="hidden" name="hs-pro-shpror" >
    <span class="block">
      1 <svg class="shrink-0 size-4 mb-1 group-has-checked:fill-primary" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/></svg>
    </span>
  </label>

<label for="hs-pro-shpror2star" class="p-2.5 group relative flex justify-center items-center gap-x-3 text-center text-xs border border-layer-line text-layer-foreground cursor-pointer rounded-lg
  has-checked:text-primary-checked
  has-checked:border-primary-checked
  has-checked:ring-1
  has-checked:ring-primary-checked
  has-disabled:pointer-events-none
  has-disabled:opacity-70
  has-disabled:text-line-2
  has-disabled:after:absolute
  has-disabled:after:inset-0
  has-disabled:after:bg-[linear-gradient(to_right_bottom,transparent_calc(50%-1px),var(--color-line-2)_calc(50%-1px),var(--color-line-2)_50%,transparent_50%)] ">
    <input type="checkbox" id="hs-pro-shpror2star" class="hidden" name="hs-pro-shpror" >
    <span class="block">
      2 <svg class="shrink-0 size-4 mb-1 group-has-checked:fill-primary" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/></svg>
    </span>
  </label>

<label for="hs-pro-shpror3star" class="p-2.5 group relative flex justify-center items-center gap-x-3 text-center text-xs border border-layer-line text-layer-foreground cursor-pointer rounded-lg
  has-checked:text-primary-checked
  has-checked:border-primary-checked
  has-checked:ring-1
  has-checked:ring-primary-checked
  has-disabled:pointer-events-none
  has-disabled:opacity-70
  has-disabled:text-line-2
  has-disabled:after:absolute
  has-disabled:after:inset-0
  has-disabled:after:bg-[linear-gradient(to_right_bottom,transparent_calc(50%-1px),var(--color-line-2)_calc(50%-1px),var(--color-line-2)_50%,transparent_50%)] ">
    <input type="checkbox" id="hs-pro-shpror3star" class="hidden" name="hs-pro-shpror" >
    <span class="block">
      3 <svg class="shrink-0 size-4 mb-1 group-has-checked:fill-primary" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/></svg>
    </span>
  </label>

<label for="hs-pro-shpror4star" class="p-2.5 group relative flex justify-center items-center gap-x-3 text-center text-xs border border-layer-line text-layer-foreground cursor-pointer rounded-lg
  has-checked:text-primary-checked
  has-checked:border-primary-checked
  has-checked:ring-1
  has-checked:ring-primary-checked
  has-disabled:pointer-events-none
  has-disabled:opacity-70
  has-disabled:text-line-2
  has-disabled:after:absolute
  has-disabled:after:inset-0
  has-disabled:after:bg-[linear-gradient(to_right_bottom,transparent_calc(50%-1px),var(--color-line-2)_calc(50%-1px),var(--color-line-2)_50%,transparent_50%)] ">
    <input type="checkbox" id="hs-pro-shpror4star" class="hidden" name="hs-pro-shpror" >
    <span class="block">
      4 <svg class="shrink-0 size-4 mb-1 group-has-checked:fill-primary" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/></svg>
    </span>
  </label>

<label for="hs-pro-shpror5star" class="p-2.5 group relative flex justify-center items-center gap-x-3 text-center text-xs border border-layer-line text-layer-foreground cursor-pointer rounded-lg
  has-checked:text-primary-checked
  has-checked:border-primary-checked
  has-checked:ring-1
  has-checked:ring-primary-checked
  has-disabled:pointer-events-none
  has-disabled:opacity-70
  has-disabled:text-line-2
  has-disabled:after:absolute
  has-disabled:after:inset-0
  has-disabled:after:bg-[linear-gradient(to_right_bottom,transparent_calc(50%-1px),var(--color-line-2)_calc(50%-1px),var(--color-line-2)_50%,transparent_50%)] ">
    <input type="checkbox" id="hs-pro-shpror5star" class="hidden" name="hs-pro-shpror" >
    <span class="block">
      5 <svg class="shrink-0 size-4 mb-1 group-has-checked:fill-primary" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/></svg>
    </span>
  </label>
  
</div>

Open related product detail template

Emoji Reaction Selector Pro

Emoji row captures quick sentiment feedback with evenly spaced reaction buttons.

<div>
  <h3 class="mb-3 text-sm font-medium text-foreground">
    Would you recommend this product?
  </h3>

<div class="grid grid-cols-2 gap-2">
    
    <label for="hs-pro-shprwrtpy" class="p-2.5 group relative flex justify-center items-center gap-x-3 text-center text-xs border border-layer-line text-layer-foreground cursor-pointer rounded-lg
    has-checked:text-primary-checked
    has-checked:border-primary-checked
    has-checked:ring-1
    has-checked:ring-primary-checked
    has-disabled:pointer-events-none
    has-disabled:opacity-70
    has-disabled:text-line-2
    has-disabled:after:absolute
    has-disabled:after:inset-0
    has-disabled:after:bg-[linear-gradient(to_right_bottom,transparent_calc(50%-1px),var(--color-line-2)_calc(50%-1px),var(--color-line-2)_50%,transparent_50%)] ">
      <input type="radio" id="hs-pro-shprwrtpy" class="hidden" name="hs-pro-shprwrtp" >
      <span class="block">
        <span class="text-base me-1">😍</span> <span class="text-sm">Yes</span>
      </span>
    </label>

<label for="hs-pro-shprwrtpn" class="p-2.5 group relative flex justify-center items-center gap-x-3 text-center text-xs border border-layer-line text-layer-foreground cursor-pointer rounded-lg
    has-checked:text-primary-checked
    has-checked:border-primary-checked
    has-checked:ring-1
    has-checked:ring-primary-checked
    has-disabled:pointer-events-none
    has-disabled:opacity-70
    has-disabled:text-line-2
    has-disabled:after:absolute
    has-disabled:after:inset-0
    has-disabled:after:bg-[linear-gradient(to_right_bottom,transparent_calc(50%-1px),var(--color-line-2)_calc(50%-1px),var(--color-line-2)_50%,transparent_50%)] ">
      <input type="radio" id="hs-pro-shprwrtpn" class="hidden" name="hs-pro-shprwrtp" >
      <span class="block">
        <span class="text-base me-1">😠</span> <span class="text-sm">No</span>
      </span>
    </label>
    
  </div>
  
</div>

Centered Emoji Selector Pro

Centered emoji row highlights one sentiment choice inside a feedback-style panel.

<div class="grid grid-cols-5 gap-1 sm:gap-3">
                      
                      <label for="hs-pro-shwrvtgre1" class="p-2 sm:p-3 text-xs flex flex-col justify-center items-center sm:text-[13px] text-center bg-layer text-layer-foreground border border-layer-line has-checked:border-primary-checked has-checked:ring-1 has-checked:ring-primary-checked cursor-pointer rounded-lg">
                        <input type="radio" id="hs-pro-shwrvtgre1" class="hidden" value="@@title" name="hs-pro-shwrvtgre" >
                        <span class="block mb-1 text-xl">😠</span>Awful
                      </label>

<label for="hs-pro-shwrvtgre2" class="p-2 sm:p-3 text-xs flex flex-col justify-center items-center sm:text-[13px] text-center bg-layer text-layer-foreground border border-layer-line has-checked:border-primary-checked has-checked:ring-1 has-checked:ring-primary-checked cursor-pointer rounded-lg">
                        <input type="radio" id="hs-pro-shwrvtgre2" class="hidden" value="@@title" name="hs-pro-shwrvtgre" >
                        <span class="block mb-1 text-xl">🙁</span>Bad
                      </label>

<label for="hs-pro-shwrvtgre3" class="p-2 sm:p-3 text-xs flex flex-col justify-center items-center sm:text-[13px] text-center bg-layer text-layer-foreground border border-layer-line has-checked:border-primary-checked has-checked:ring-1 has-checked:ring-primary-checked cursor-pointer rounded-lg">
                        <input type="radio" id="hs-pro-shwrvtgre3" class="hidden" value="@@title" name="hs-pro-shwrvtgre" >
                        <span class="block mb-1 text-xl">🙂</span>Okay
                      </label>

<label for="hs-pro-shwrvtgre4" class="p-2 sm:p-3 text-xs flex flex-col justify-center items-center sm:text-[13px] text-center bg-layer text-layer-foreground border border-layer-line has-checked:border-primary-checked has-checked:ring-1 has-checked:ring-primary-checked cursor-pointer rounded-lg">
                        <input type="radio" id="hs-pro-shwrvtgre4" class="hidden" value="@@title" name="hs-pro-shwrvtgre" >
                        <span class="block mb-1 text-xl">😃</span>Good
                      </label>

<label for="hs-pro-shwrvtgre5" class="p-2 sm:p-3 text-xs flex flex-col justify-center items-center sm:text-[13px] text-center bg-layer text-layer-foreground border border-layer-line has-checked:border-primary-checked has-checked:ring-1 has-checked:ring-primary-checked cursor-pointer rounded-lg">
                        <input type="radio" id="hs-pro-shwrvtgre5" class="hidden" value="@@title" name="hs-pro-shwrvtgre" >
                        <span class="block mb-1 text-xl">😍</span>Great
                      </label>
                      
                    </div>

Open related product detail template

Gradient Emoji Selector Pro

Gradient option card pairs expressive emoji choices with supporting labels and selection states.

<p class="mb-2 font-medium text-foreground">
  Choose a design
</p>

<div class="p-1 flex flex-col justify-center items-center bg-linear-to-br from-orange-100 via-purple-200 via-70% to-indigo-200 rounded-2xl dark:from-orange-800 dark:via-purple-800 dark:to-indigo-800">
  <div class="p-1 size-full bg-background rounded-xl">
    <div class="p-4 min-h-56 flex flex-col justify-center items-center bg-linear-to-bl from-cyan-200 to-purple-300 rounded-lg dark:from-purple-400 dark:to-blue-600">
      <span class="block text-7xl">🎉</span>
    </div>
  </div>
</div>

<div class="mt-5 flex flex-wrap justify-center gap-2.5">
  
  <label for="hs-pro-shgctn1" class="w-12 sm:w-14 h-10 rounded-lg flex flex-col justify-center items-center text-center has-checked:border-primary-checked has-checked:ring-2 has-checked:ring-offset-2 has-checked:ring-offset-layer has-checked:ring-primary-checked cursor-pointer">
    <input type="radio" id="hs-pro-shgctn1" class="hidden" value="@@title" name="hs-pro-shgctn" checked>
    <span class="w-12 sm:w-14 h-10 flex flex-col justify-center items-center bg-linear-to-bl from-cyan-200 to-purple-300 rounded-lg dark:from-purple-400 dark:to-blue-600"><span class="text-lg">🎉</span></span>
  </label>

<label for="hs-pro-shgctn2" class="w-12 sm:w-14 h-10 rounded-lg flex flex-col justify-center items-center text-center has-checked:border-primary-checked has-checked:ring-2 has-checked:ring-offset-2 has-checked:ring-offset-layer has-checked:ring-primary-checked cursor-pointer">
    <input type="radio" id="hs-pro-shgctn2" class="hidden" value="@@title" name="hs-pro-shgctn" >
    <span class="w-12 sm:w-14 h-10 flex flex-col justify-center items-center bg-linear-to-l from-red-200 to-orange-200 rounded-lg dark:from-red-400 dark:to-orange-600"><span class="text-lg">🎁</span></span>
  </label>
  
  
  
  <label for="hs-pro-shgctn3" class="w-12 sm:w-14 h-10 rounded-lg flex flex-col justify-center items-center text-center has-checked:border-primary-checked has-checked:ring-2 has-checked:ring-offset-2 has-checked:ring-offset-layer has-checked:ring-primary-checked cursor-pointer">
    <input type="radio" id="hs-pro-shgctn3" class="hidden" value="@@title" name="hs-pro-shgctn" >
    <span class="w-12 sm:w-14 h-10 flex flex-col justify-center items-center bg-linear-to-bl from-red-300 to-fuchsia-200 rounded-lg dark:from-red-500 dark:to-fuchsia-500"><span class="text-lg">❤️</span></span>
  </label>
  
  
  
  <label for="hs-pro-shgctn4" class="w-12 sm:w-14 h-10 rounded-lg flex flex-col justify-center items-center text-center has-checked:border-primary-checked has-checked:ring-2 has-checked:ring-offset-2 has-checked:ring-offset-layer has-checked:ring-primary-checked cursor-pointer">
    <input type="radio" id="hs-pro-shgctn4" class="hidden" value="@@title" name="hs-pro-shgctn" >
    <span class="w-12 sm:w-14 h-10 flex flex-col justify-center items-center bg-linear-to-t from-sky-400 to-cyan-100 rounded-lg dark:from-sky-500 dark:to-cyan-200"><span class="text-lg">🙏</span></span>
  </label>
  
  
  
  <label for="hs-pro-shgctn5" class="w-12 sm:w-14 h-10 rounded-lg flex flex-col justify-center items-center text-center has-checked:border-primary-checked has-checked:ring-2 has-checked:ring-offset-2 has-checked:ring-offset-layer has-checked:ring-primary-checked cursor-pointer">
    <input type="radio" id="hs-pro-shgctn5" class="hidden" value="@@title" name="hs-pro-shgctn" >
    <span class="w-12 sm:w-14 h-10 flex flex-col justify-center items-center bg-linear-to-t from-cyan-400 to-orange-200 rounded-lg dark:from-cyan-500 dark:to-orange-200"><span class="text-lg">🏖️</span></span>
  </label>
  
</div>

Open related gift cards template

Emoji Option Grid Pro

Compact emoji grid presents labeled mood options as mutually exclusive cards.

<div class="grid grid-cols-1 sm:grid-cols-2 gap-2">
  <div class="flex flex-col gap-y-2">
    <label for="hs-pro-dupsms1" class="relative py-2 px-3 flex cursor-pointer bg-layer text-sm rounded-lg focus:outline-hidden">
      <input type="radio" id="hs-pro-dupsms1" name="hs-pro-dupsms" class="peer absolute top-0 inset-s-0 size-full bg-transparent border border-layer-line text-transparent rounded-lg cursor-pointer focus:ring-0 focus:ring-offset-0 after:relative after:-z-1 after:block after:size-full after:rounded-lg checked:after:bg-primary checked:text-transparent checked:border-primary-checked checked:hover:border-primary-hover checked:focus:border-primary-focus checked:bg-none disabled:opacity-50 disabled:pointer-events-none">
      <span class="text-foreground peer-checked:text-primary">
        🗓️ <span class="ms-2">In a meeting</span>
      </span>
    </label>
    <label for="hs-pro-dupsms3" class="relative py-2 px-3 flex cursor-pointer bg-layer text-sm rounded-lg focus:outline-hidden">
      <input type="radio" id="hs-pro-dupsms3" name="hs-pro-dupsms" class="peer absolute top-0 inset-s-0 size-full bg-transparent border border-layer-line text-transparent rounded-lg cursor-pointer focus:ring-0 focus:ring-offset-0 after:relative after:-z-1 after:block after:size-full after:rounded-lg checked:after:bg-primary checked:text-transparent checked:border-primary-checked checked:hover:border-primary-hover checked:focus:border-primary-focus checked:bg-none disabled:opacity-50 disabled:pointer-events-none">
      <span class="text-foreground peer-checked:text-primary">
        🚎 <span class="ms-2">Commuting</span>
      </span>
    </label>
    <label for="hs-pro-dupsms5" class="relative py-2 px-3 flex cursor-pointer bg-layer text-sm rounded-lg focus:outline-hidden">
      <input type="radio" id="hs-pro-dupsms5" name="hs-pro-dupsms" class="peer absolute top-0 inset-s-0 size-full bg-transparent border border-layer-line text-transparent rounded-lg cursor-pointer focus:ring-0 focus:ring-offset-0 after:relative after:-z-1 after:block after:size-full after:rounded-lg checked:after:bg-primary checked:text-transparent checked:border-primary-checked checked:hover:border-primary-hover checked:focus:border-primary-focus checked:bg-none disabled:opacity-50 disabled:pointer-events-none">
      <span class="text-foreground peer-checked:text-primary">
        🎯 <span class="ms-2">Focusing</span>
      </span>
    </label>
  </div>

<div class="flex flex-col gap-y-2">
    <label for="hs-pro-dupsms2" class="relative py-2 px-3 flex cursor-pointer bg-layer text-sm rounded-lg focus:outline-hidden">
      <input type="radio" id="hs-pro-dupsms2" name="hs-pro-dupsms" class="peer absolute top-0 inset-s-0 size-full bg-transparent border border-layer-line text-transparent rounded-lg cursor-pointer focus:ring-0 focus:ring-offset-0 after:relative after:-z-1 after:block after:size-full after:rounded-lg checked:after:bg-primary checked:text-transparent checked:border-primary-checked checked:hover:border-primary-hover checked:focus:border-primary-focus checked:bg-none disabled:opacity-50 disabled:pointer-events-none">
      <span class="text-foreground peer-checked:text-primary">
        🤒 <span class="ms-2">Out sick</span>
      </span>
    </label>
    <label for="hs-pro-dupsms7" class="relative py-2 px-3 flex cursor-pointer bg-layer text-sm rounded-lg focus:outline-hidden">
      <input type="radio" id="hs-pro-dupsms7" name="hs-pro-dupsms" class="peer absolute top-0 inset-s-0 size-full bg-transparent border border-layer-line text-transparent rounded-lg cursor-pointer focus:ring-0 focus:ring-offset-0 after:relative after:-z-1 after:block after:size-full after:rounded-lg checked:after:bg-primary checked:text-transparent checked:border-primary-checked checked:hover:border-primary-hover checked:focus:border-primary-focus checked:bg-none disabled:opacity-50 disabled:pointer-events-none">
      <span class="text-foreground peer-checked:text-primary">
        🌴 <span class="ms-2">On vacation</span>
      </span>
    </label>
    <label for="hs-pro-dupsms6" class="relative py-2 px-3 flex cursor-pointer bg-layer text-sm rounded-lg focus:outline-hidden">
      <input type="radio" id="hs-pro-dupsms6" name="hs-pro-dupsms" class="peer absolute top-0 inset-s-0 size-full bg-transparent border border-layer-line text-transparent rounded-lg cursor-pointer focus:ring-0 focus:ring-offset-0 after:relative after:-z-1 after:block after:size-full after:rounded-lg checked:after:bg-primary checked:text-transparent checked:border-primary-checked checked:hover:border-primary-hover checked:focus:border-primary-focus checked:bg-none disabled:opacity-50 disabled:pointer-events-none">
      <span class="text-foreground peer-checked:text-primary">
        🏡 <span class="ms-2">Working remotely</span>
      </span>
    </label>
  </div>
  
</div>

Open related user profile template