custom component background color

<div class="h-3 w-full bg-gray-200 rounded-full overflow-hidden dark:bg-gray-700">
    <div
        class="h-full transition-all duration-300"
        :style="`width: ${strength}%`"
        :class="{
            'bg-red-500': strength < 40,
            'bg-yellow-500': strength >= 40 && strength < 70,
            'bg-green-500': strength >= 70
        }"
    ></div>
</div>

<div class="h-3 w-full bg-gray-200 rounded-full overflow-hidden dark:bg-gray-700">
     <div
            class="h-full transition-all duration-300"
            :style="`width: ${strength}%; background-color: ${
                strength < 40
                    ? '#ef4444'  /* red-500 */
                    : (strength >= 40 && strength < 70
                        ? '#eab308'  /* yellow-500 */
                        : '#22c55e'  /* green-500 */
                    )
            }`"
     ></div>
</div>