پیشنمایش زنده
کد HTML
<div class="flex items-center justify-center [&_svg]:size-full -space-x-2">
<figure
class="size-8 z-[3] [&:where(:nth-child(2n))]:size-11 [&:where(:nth-child(2n))]:z-[4] [&:where(:not(:first-child):not(:last-child):not(:nth-child(2n)))]:size-16 [&:where(:not(:first-child):not(:last-child):not(:nth-child(2n)))]:z-[6] cursor-pointer bg-white relative rounded-full object-cover border border-solid border-zinc-300"
>
<svg viewBox="0 0 256 256" fill="red">
<path
d="M128,24A104,104,0,1,0,232,128,104.11,104.11,0,0,0,128,24ZM74.08,197.5a64,64,0,0,1,107.84,0,87.83,87.83,0,0,1-107.84,0ZM96,120a32,32,0,1,1,32,32A32,32,0,0,1,96,120Zm97.76,66.41a79.66,79.66,0,0,0-36.06-28.75,48,48,0,1,0-59.4,0,79.66,79.66,0,0,0-36.06,28.75,88,88,0,1,1,131.52,0Z"
></path>
</svg>
</figure>
<figure
class="size-8 z-[3] [&:where(:nth-child(2n))]:size-11 [&:where(:nth-child(2n))]:z-[4] [&:where(:not(:first-child):not(:last-child):not(:nth-child(2n)))]:size-16 [&:where(:not(:first-child):not(:last-child):not(:nth-child(2n)))]:z-[6] cursor-pointer bg-white relative rounded-full object-cover border border-solid border-zinc-300"
>
<svg viewBox="0 0 256 256" fill="purple">
<path
d="M128,24A104,104,0,1,0,232,128,104.11,104.11,0,0,0,128,24ZM74.08,197.5a64,64,0,0,1,107.84,0,87.83,87.83,0,0,1-107.84,0ZM96,120a32,32,0,1,1,32,32A32,32,0,0,1,96,120Zm97.76,66.41a79.66,79.66,0,0,0-36.06-28.75,48,48,0,1,0-59.4,0,79.66,79.66,0,0,0-36.06,28.75,88,88,0,1,1,131.52,0Z"
></path>
</svg>
</figure>
<figure
class="size-8 z-[3] [&:where(:nth-child(2n))]:size-11 [&:where(:nth-child(2n))]:z-[4] [&:where(:not(:first-child):not(:last-child):not(:nth-child(2n)))]:size-16 [&:where(:not(:first-child):not(:last-child):not(:nth-child(2n)))]:z-[6] cursor-pointer bg-white relative rounded-full object-cover border border-solid border-zinc-300"
>
<svg viewBox="0 0 256 256" fill="yellowgreen">
<path
d="M128,24A104,104,0,1,0,232,128,104.11,104.11,0,0,0,128,24ZM74.08,197.5a64,64,0,0,1,107.84,0,87.83,87.83,0,0,1-107.84,0ZM96,120a32,32,0,1,1,32,32A32,32,0,0,1,96,120Zm97.76,66.41a79.66,79.66,0,0,0-36.06-28.75,48,48,0,1,0-59.4,0,79.66,79.66,0,0,0-36.06,28.75,88,88,0,1,1,131.52,0Z"
></path>
</svg>
</figure>
<figure
class="size-8 z-[3] [&:where(:nth-child(2n))]:size-11 [&:where(:nth-child(2n))]:z-[4] [&:where(:not(:first-child):not(:last-child):not(:nth-child(2n)))]:size-16 [&:where(:not(:first-child):not(:last-child):not(:nth-child(2n)))]:z-[6] cursor-pointer bg-white relative rounded-full object-cover border border-solid border-zinc-300"
>
<svg viewBox="0 0 256 256" fill="orange">
<path
d="M128,24A104,104,0,1,0,232,128,104.11,104.11,0,0,0,128,24ZM74.08,197.5a64,64,0,0,1,107.84,0,87.83,87.83,0,0,1-107.84,0ZM96,120a32,32,0,1,1,32,32A32,32,0,0,1,96,120Zm97.76,66.41a79.66,79.66,0,0,0-36.06-28.75,48,48,0,1,0-59.4,0,79.66,79.66,0,0,0-36.06,28.75,88,88,0,1,1,131.52,0Z"
></path>
</svg>
</figure>
<figure
class="size-8 z-[3] [&:where(:nth-child(2n))]:size-11 [&:where(:nth-child(2n))]:z-[4] [&:where(:not(:first-child):not(:last-child):not(:nth-child(2n)))]:size-16 [&:where(:not(:first-child):not(:last-child):not(:nth-child(2n)))]:z-[6] cursor-pointer bg-white relative rounded-full object-cover border border-solid border-zinc-300"
>
<svg viewBox="0 0 256 256" fill="skyblue">
<path
d="M128,24A104,104,0,1,0,232,128,104.11,104.11,0,0,0,128,24ZM74.08,197.5a64,64,0,0,1,107.84,0,87.83,87.83,0,0,1-107.84,0ZM96,120a32,32,0,1,1,32,32A32,32,0,0,1,96,120Zm97.76,66.41a79.66,79.66,0,0,0-36.06-28.75,48,48,0,1,0-59.4,0,79.66,79.66,0,0,0-36.06,28.75,88,88,0,1,1,131.52,0Z"
></path>
</svg>
</figure>
</div>
کد CSS
.relative{position:relative}.z-\[3\]{z-index:3}.flex{display:flex}.size-8{width:2rem;height:2rem}.cursor-pointer{cursor:pointer}.items-center{align-items:center}.justify-center{justify-content:center}.-space-x-2 > :not([hidden]) ~ :not([hidden]){--tw-space-x-reverse:0;margin-right:calc(-0.5rem * var(--tw-space-x-reverse));margin-left:calc(-0.5rem * calc(1 - var(--tw-space-x-reverse)))}.rounded-full{border-radius:9999px}.border{border-width:1px}.border-solid{border-style:solid}.border-zinc-300{--tw-border-opacity:1;border-color:rgb(212 212 216 / var(--tw-border-opacity))}.bg-white{--tw-bg-opacity:1;background-color:rgb(255 255 255 / var(--tw-bg-opacity))}.object-cover{object-fit:cover}.\[\&\:where\(\:not\(\:first-child\)\:not\(\:last-child\)\:not\(\:nth-child\(2n\)\)\)\]\:z-\[6\]:where(:not(:first-child):not(:last-child):not(:nth-child(2n))){z-index:6}.\[\&\:where\(\:not\(\:first-child\)\:not\(\:last-child\)\:not\(\:nth-child\(2n\)\)\)\]\:size-16:where(:not(:first-child):not(:last-child):not(:nth-child(2n))){width:4rem;height:4rem}.\[\&\:where\(\:nth-child\(2n\)\)\]\:z-\[4\]:where(:nth-child(2n)){z-index:4}.\[\&\:where\(\:nth-child\(2n\)\)\]\:size-11:where(:nth-child(2n)){width:2.75rem;height:2.75rem}.\[\&_svg\]\:size-full svg{width:100%;height:100%}