پیشنمایش زنده
کد HTML
<div class="flex flex-col items-center group/he select-none">
<div
class="relative z-0 h-16 -mb-2 transition-all duration-200 group-hover/he:h-0"
>
<svg
width="128"
height="128"
viewBox="0 0 128 128"
class="duration-500 border-4 rounded-full shadow-md border-zinc-400 border-spacing-5 animate-[spin_3s_linear_infinite] transition-all"
>
<svg>
<rect width="128" height="128" fill="black"></rect>
<circle cx="20" cy="20" r="2" fill="white"></circle>
<circle cx="40" cy="30" r="2" fill="white"></circle>
<circle cx="60" cy="10" r="2" fill="white"></circle>
<circle cx="80" cy="40" r="2" fill="white"></circle>
<circle cx="100" cy="20" r="2" fill="white"></circle>
<circle cx="120" cy="50" r="2" fill="white"></circle>
<circle cx="90" cy="30" r="10" fill="white" fill-opacity="0.5"></circle>
<circle cx="90" cy="30" r="8" fill="white"></circle>
<path
d="M0 128 Q32 64 64 128 T128 128"
fill="purple"
stroke="black"
stroke-width="1"
></path>
<path
d="M0 128 Q32 48 64 128 T128 128"
fill="mediumpurple"
stroke="black"
stroke-width="1"
></path>
<path
d="M0 128 Q32 32 64 128 T128 128"
fill="rebeccapurple"
stroke="black"
stroke-width="1"
></path>
<path
d="M0 128 Q16 64 32 128 T64 128"
fill="purple"
stroke="black"
stroke-width="1"
></path>
<path
d="M64 128 Q80 64 96 128 T128 128"
fill="mediumpurple"
stroke="black"
stroke-width="1"
></path>
</svg>
</svg>
<div
class="absolute z-10 w-8 h-8 bg-white border-4 rounded-full shadow-sm border-zinc-400 top-12 left-12"
></div>
</div>
<div
class="z-30 flex flex-col w-40 h-20 transition-all duration-300 bg-white shadow-md group-hover/he:h-40 group-hover/he:w-72 rounded-2xl shadow-zinc-400"
>
<div class="flex flex-row w-full h-0 group-hover/he:h-20">
<div
class="relative flex items-center justify-center w-24 h-24 group-hover/he:-top-6 group-hover/he:-left-4 opacity-0 group-hover/he:animate-[spin_3s_linear_infinite] group-hover/he:opacity-100 transition-all duration-100"
>
<svg
width="96"
height="96"
viewBox="0 0 128 128"
class="duration-500 border-4 rounded-full shadow-md border-zinc-400 border-spacing-5"
>
<svg>
<rect width="128" height="128" fill="black"></rect>
<circle cx="20" cy="20" r="2" fill="white"></circle>
<circle cx="40" cy="30" r="2" fill="white"></circle>
<circle cx="60" cy="10" r="2" fill="white"></circle>
<circle cx="80" cy="40" r="2" fill="white"></circle>
<circle cx="100" cy="20" r="2" fill="white"></circle>
<circle cx="120" cy="50" r="2" fill="white"></circle>
<circle
cx="90"
cy="30"
r="10"
fill="white"
fill-opacity="0.5"
></circle>
<circle cx="90" cy="30" r="8" fill="white"></circle>
<path
d="M0 128 Q32 64 64 128 T128 128"
fill="purple"
stroke="black"
stroke-width="1"
></path>
<path
d="M0 128 Q32 48 64 128 T128 128"
fill="mediumpurple"
stroke="black"
stroke-width="1"
></path>
<path
d="M0 128 Q32 32 64 128 T128 128"
fill="rebeccapurple"
stroke="black"
stroke-width="1"
></path>
<path
d="M0 128 Q16 64 32 128 T64 128"
fill="purple"
stroke="black"
stroke-width="1"
></path>
<path
d="M64 128 Q80 64 96 128 T128 128"
fill="mediumpurple"
stroke="black"
stroke-width="1"
></path>
</svg>
</svg>
<div
class="absolute z-10 w-6 h-6 bg-white border-4 rounded-full shadow-sm border-zinc-400 top-9 left-9"
></div>
</div>
<div
class="flex flex-col justify-center w-full pl-3 -ml-24 overflow-hidden group-hover/he:-ml-3 text-nowrap"
>
<p class="text-xl font-bold">Music Name</p>
<p class="text-zinc-600">Singer & artist</p>
</div>
</div>
<div
class="flex flex-row mx-3 mt-3 bg-indigo-100 rounded-md min-h-4 group-hover/he:mt-0"
>
<span
class="hidden pl-3 text-sm text-zinc-600 group-hover/he:inline-block"
>0:00</span
>
<input
type="range"
min="0"
max="100"
value="0"
class="w-24 group-hover/he:w-full flex-grow h-1 mx-2 my-auto bg-gray-300 rounded-full appearance-none [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:w-3 [&::-webkit-slider-thumb]:h-3 [&::-webkit-slider-thumb]:bg-white [&::-webkit-slider-thumb]:border-2 [&::-webkit-slider-thumb]:border-zinc-400 [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:cursor-pointer [&::-webkit-slider-thumb]:shadow-md"
/>
<span
class="hidden pr-3 text-sm text-zinc-600 group-hover/he:inline-block"
>3:45</span
>
</div>
<div
class="flex flex-row items-center justify-center flex-grow mx-3 space-x-5"
>
<label
for="playMode"
class="flex items-center justify-center w-0 h-full cursor-pointer group-hover/he:w-12"
>
<input type="checkbox" id="playMode" class="hidden peer/playMode" />
<svg
xmlns="http://www.w3.org/2000/svg"
width="20"
height="20"
viewBox="0 0 24 24"
fill="none"
stroke="#777"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="feather feather-repeat peer-checked/playMode:hidden"
>
<polyline points="17 1 21 5 17 9"></polyline>
<path d="M3 11V9a4 4 0 0 1 4-4h14"></path>
<polyline points="7 23 3 19 7 15"></polyline>
<path d="M21 13v2a4 4 0 0 1-4 4H3"></path>
</svg>
<svg
xmlns="http://www.w3.org/2000/svg"
width="20"
height="20"
viewBox="0 0 24 24"
fill="none"
stroke="#777"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="hidden feather feather-shuffle peer-checked/playMode:inline-block"
>
<polyline points="16 3 21 3 21 8"></polyline>
<line x1="4" y1="20" x2="21" y2="3"></line>
<polyline points="21 16 21 21 16 21"></polyline>
<line x1="15" y1="15" x2="21" y2="21"></line>
<line x1="4" y1="4" x2="9" y2="9"></line>
</svg>
</label>
<div class="flex items-center justify-center w-12 h-full cursor-pointer">
<svg
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"
class="feather feather-skip-back"
>
<polygon points="19 20 9 12 19 4 19 20"></polygon>
<line x1="5" y1="19" x2="5" y2="5"></line>
</svg>
</div>
<label
for="playStatus"
class="flex items-center justify-center w-12 h-full cursor-pointer"
>
<input
type="checkbox"
name="playStatus"
id="playStatus"
class="hidden peer/playStatus"
/>
<svg
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"
class="feather feather-play peer-checked/playStatus:hidden"
>
<polygon points="5 3 19 12 5 21 5 3"></polygon>
</svg>
<svg
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"
class="hidden feather feather-pause peer-checked/playStatus:inline-block"
>
<rect x="6" y="4" width="4" height="16"></rect>
<rect x="14" y="4" width="4" height="16"></rect>
</svg>
</label>
<div class="flex items-center justify-center w-12 h-full cursor-pointer">
<svg
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"
class="feather feather-skip-forward"
>
<polygon points="5 4 15 12 5 20 5 4"></polygon>
<line x1="19" y1="5" x2="19" y2="19"></line>
</svg>
</div>
<div class="flex items-center justify-center w-12 h-full cursor-pointer">
<svg
xmlns="http://www.w3.org/2000/svg"
width="20"
height="20"
viewBox="0 0 24 24"
fill="none"
stroke="#777"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="w-0 feather feather-list group-hover/he:w-12"
>
<line x1="8" y1="6" x2="21" y2="6"></line>
<line x1="8" y1="12" x2="21" y2="12"></line>
<line x1="8" y1="18" x2="21" y2="18"></line>
<line x1="3" y1="6" x2="3.01" y2="6"></line>
<line x1="3" y1="12" x2="3.01" y2="12"></line>
<line x1="3" y1="18" x2="3.01" y2="18"></line>
</svg>
</div>
</div>
</div>
</div>
کد CSS
/* ! tailwindcss v3.4.15 | MIT License | https://tailwindcss.com */*,::after,::before{box-sizing:border-box;border-width:0;border-style:solid;border-color:#e5e7eb}::after,::before{--tw-content:''}:host,html{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;tab-size:4;font-family:ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";font-feature-settings:normal;font-variation-settings:normal;-webkit-tap-highlight-color:transparent}body{margin:0;line-height:inherit}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;font-feature-settings:normal;font-variation-settings:normal;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-feature-settings:inherit;font-variation-settings:inherit;font-size:100%;font-weight:inherit;line-height:inherit;letter-spacing:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dd,dl,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}fieldset{margin:0;padding:0}legend{padding:0}menu,ol,ul{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}[role=button],button{cursor:pointer}:disabled{cursor:default}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]:where(:not([hidden=until-found])){display:none}.absolute{position:absolute}.relative{position:relative}.left-12{left:3rem}.left-9{left:2.25rem}.top-12{top:3rem}.top-9{top:2.25rem}.z-0{z-index:0}.z-10{z-index:10}.z-30{z-index:30}.mx-2{margin-left:0.5rem;margin-right:0.5rem}.mx-3{margin-left:0.75rem;margin-right:0.75rem}.my-auto{margin-top:auto;margin-bottom:auto}.-mb-2{margin-bottom:-0.5rem}.-ml-24{margin-left:-6rem}.mt-3{margin-top:0.75rem}.flex{display:flex}.hidden{display:none}.h-0{height:0px}.h-1{height:0.25rem}.h-16{height:4rem}.h-20{height:5rem}.h-24{height:6rem}.h-6{height:1.5rem}.h-8{height:2rem}.h-full{height:100%}.min-h-4{min-height:1rem}.w-0{width:0px}.w-12{width:3rem}.w-24{width:6rem}.w-40{width:10rem}.w-6{width:1.5rem}.w-8{width:2rem}.w-full{width:100%}.flex-grow{flex-grow:1}.border-spacing-5{--tw-border-spacing-x:1.25rem;--tw-border-spacing-y:1.25rem;border-spacing:var(--tw-border-spacing-x) var(--tw-border-spacing-y)}@keyframes spin{to{transform:rotate(360deg)}}.animate-\[spin_3s_linear_infinite\]{animation:spin 3s linear infinite}.cursor-pointer{cursor:pointer}.select-none{-webkit-user-select:none;user-select:none}.appearance-none{-webkit-appearance:none;appearance:none}.flex-row{flex-direction:row}.flex-col{flex-direction:column}.items-center{align-items:center}.justify-center{justify-content:center}.space-x-5 > :not([hidden]) ~ :not([hidden]){--tw-space-x-reverse:0;margin-right:calc(1.25rem * var(--tw-space-x-reverse));margin-left:calc(1.25rem * calc(1 - var(--tw-space-x-reverse)))}.overflow-hidden{overflow:hidden}.text-nowrap{text-wrap:nowrap}.rounded-2xl{border-radius:1rem}.rounded-full{border-radius:9999px}.rounded-md{border-radius:0.375rem}.border-4{border-width:4px}.border-zinc-400{--tw-border-opacity:1;border-color:rgb(161 161 170 / var(--tw-border-opacity, 1))}.bg-gray-300{--tw-bg-opacity:1;background-color:rgb(209 213 219 / var(--tw-bg-opacity, 1))}.bg-indigo-100{--tw-bg-opacity:1;background-color:rgb(224 231 255 / var(--tw-bg-opacity, 1))}.bg-white{--tw-bg-opacity:1;background-color:rgb(255 255 255 / var(--tw-bg-opacity, 1))}.pl-3{padding-left:0.75rem}.pr-3{padding-right:0.75rem}.text-sm{font-size:0.875rem;line-height:1.25rem}.text-xl{font-size:1.25rem;line-height:1.75rem}.font-bold{font-weight:700}.text-zinc-600{--tw-text-opacity:1;color:rgb(82 82 91 / var(--tw-text-opacity, 1))}.opacity-0{opacity:0}.shadow-md{--tw-shadow:0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);--tw-shadow-colored:0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}.shadow-sm{--tw-shadow:0 1px 2px 0 rgb(0 0 0 / 0.05);--tw-shadow-colored:0 1px 2px 0 var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}.shadow-zinc-400{--tw-shadow-color:#a1a1aa;--tw-shadow:var(--tw-shadow-colored)}.transition-all{transition-property:all;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms}.duration-100{transition-duration:100ms}.duration-200{transition-duration:200ms}.duration-300{transition-duration:300ms}.duration-500{transition-duration:500ms}.group\/he:hover .group-hover\/he\:-left-4{left:-1rem}.group\/he:hover .group-hover\/he\:-top-6{top:-1.5rem}.group\/he:hover .group-hover\/he\:-ml-3{margin-left:-0.75rem}.group\/he:hover .group-hover\/he\:mt-0{margin-top:0px}.group\/he:hover .group-hover\/he\:inline-block{display:inline-block}.group\/he:hover .group-hover\/he\:h-0{height:0px}.group\/he:hover .group-hover\/he\:h-20{height:5rem}.group\/he:hover .group-hover\/he\:h-40{height:10rem}.group\/he:hover .group-hover\/he\:w-12{width:3rem}.group\/he:hover .group-hover\/he\:w-72{width:18rem}.group\/he:hover .group-hover\/he\:w-full{width:100%}@keyframes spin{to{transform:rotate(360deg)}}.group\/he:hover .group-hover\/he\:animate-\[spin_3s_linear_infinite\]{animation:spin 3s linear infinite}.group\/he:hover .group-hover\/he\:opacity-100{opacity:1}.peer\/playMode:checked ~ .peer-checked\/playMode\:inline-block{display:inline-block}.peer\/playStatus:checked ~ .peer-checked\/playStatus\:inline-block{display:inline-block}.peer\/playMode:checked ~ .peer-checked\/playMode\:hidden{display:none}.peer\/playStatus:checked ~ .peer-checked\/playStatus\:hidden{display:none}.\[\&\:\:-webkit-slider-thumb\]\:h-3::-webkit-slider-thumb{height:0.75rem}.\[\&\:\:-webkit-slider-thumb\]\:w-3::-webkit-slider-thumb{width:0.75rem}.\[\&\:\:-webkit-slider-thumb\]\:cursor-pointer::-webkit-slider-thumb{cursor:pointer}.\[\&\:\:-webkit-slider-thumb\]\:appearance-none::-webkit-slider-thumb{-webkit-appearance:none;appearance:none}.\[\&\:\:-webkit-slider-thumb\]\:rounded-full::-webkit-slider-thumb{border-radius:9999px}.\[\&\:\:-webkit-slider-thumb\]\:border-2::-webkit-slider-thumb{border-width:2px}.\[\&\:\:-webkit-slider-thumb\]\:border-zinc-400::-webkit-slider-thumb{--tw-border-opacity:1;border-color:rgb(161 161 170 / var(--tw-border-opacity, 1))}.\[\&\:\:-webkit-slider-thumb\]\:bg-white::-webkit-slider-thumb{--tw-bg-opacity:1;background-color:rgb(255 255 255 / var(--tw-bg-opacity, 1))}.\[\&\:\:-webkit-slider-thumb\]\:shadow-md::-webkit-slider-thumb{--tw-shadow:0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);--tw-shadow-colored:0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}