Candidate Management - Copy this React, Tailwind Component to your project
Barras de progreso con animación líquida: Las barras de progreso deben tener un diseño que simule el comportamiento de un líquido: El relleno debe moverse de forma fluida, como si fuera agua, cuando cambia el porcentaje. Agrega un efecto ondulado suave en la superficie del relleno, simulando olas pequeñas. Usa un degradado dinámico para el color del relleno (por ejemplo, de un azul claro a un azul oscuro para "New") que cambie ligeramente según el movimiento. La barra debe actualizarse con una animación fluida cada vez que se modifique la cantidad de elementos en la columna. Detalles técnicos de la animación: Implementa una animación CSS o SVG que utilice ondas sinusoidales para simular el movimiento líquido. El relleno debe expandirse o contraerse suavemente de izquierda a derecha, manteniendo las ondas activas durante la transición. Incluye una pequeña etiqueta flotante encima del relleno que muestre el porcentaje exacto actualizado (por ejemplo, "20%"). Estilo general para las barras: Bordes redondeados y sombreados sutiles para que el diseño parezca tridimensional. Fondo con un color pálido (gris claro) que contraste con el efecto líquido del relleno. Las barras deben estar claramente conectadas visualmente con sus respectivas columnas pero mantener un diseño destacado.
