Card de reproductor de música

Una tarjeta de «ahora suena» con portada que gira despacio y controles que rebotan al pulsarlos.

Ajustes

Color principal#0071e3

Color secundario#8ec5ff

Tamaño16px

Velocidad1x

Texto

Código

index.html

<article class="uv-cplay"><div class="cover"><i></i><b>◌</b></div><small>REPRODUCIENDO</small><h3>Soft Motion</h3><p>Nara Fields</p><div class="line"><i></i></div><footer><button>‹</button><button class="play">▶</button><button>›</button></footer></article>

Prompt para IA

Pégalo en ChatGPT, Claude o Cursor y adaptará el bloque a tu proyecto con estos ajustes, aunque no uses React.

Más en Cards

Tarjeta con tilt 3D

CardsReact + Motion

Tarjeta con foco de luz

CardsReact + Motion

Widget de tiempo y agenda

CardsReact + Motion

Tarjeta con borde de luz

CardsHTML + CSS

Tarjeta con elevación y zoom

CardsHTML + CSS

Tarjeta que gira en 3D

CardsHTML + CSS

Tarjeta con degradado vivo

CardsHTML + CSS

Tarjeta con contenido oculto

CardsHTML + CSS

Dónde usarlo

Encaja donde la música o el audio forman parte de la historia: el último single en la web de un grupo indie o el episodio destacado en la landing de un pódcast. Por dentro es solo HTML y CSS: una card de reproductor de música con portada en degradado que tiñes con tus colores.

No reproduce sonido por sí sola: conecta los botones a un elemento de audio o a tu reproductor y mueve la barra de progreso con el tiempo real. Cambia la portada abstracta por la carátula cuando la tengas y deja el título en una sola línea.