<div class="max-w-sm mx-auto p-6 bg-white dark:bg-zinc-900 rounded-xl shadow-sm border border-gray-100 dark:border-zinc-800">
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Password</label>
<input type="password" id="pwd-input" class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-indigo-500 dark:bg-zinc-800 dark:border-zinc-700 dark:text-white" placeholder="Enter password" />
<div class="mt-3 flex h-1.5 gap-1">
  <div id="bar-1" class="flex-1 bg-gray-200 dark:bg-zinc-700 rounded-full transition-colors"></div>
  <div id="bar-2" class="flex-1 bg-gray-200 dark:bg-zinc-700 rounded-full transition-colors"></div>
  <div id="bar-3" class="flex-1 bg-gray-200 dark:bg-zinc-700 rounded-full transition-colors"></div>
  <div id="bar-4" class="flex-1 bg-gray-200 dark:bg-zinc-700 rounded-full transition-colors"></div>
</div>
<p id="pwd-text" class="mt-2 text-xs text-gray-500 text-right">Too short</p>
</div>
<script>
const input = document.getElementById('pwd-input');
const bars = [document.getElementById('bar-1'), document.getElementById('bar-2'), document.getElementById('bar-3'), document.getElementById('bar-4')];
const text = document.getElementById('pwd-text');
input.addEventListener('input', (e) => {
  const val = e.target.value;
  let strength = 0;
  if (val.length > 5) strength++;
  if (val.length > 8) strength++;
  if (/[A-Z]/.test(val) && /[0-9]/.test(val)) strength++;
  if (/[^A-Za-z0-9]/.test(val)) strength++;
  
  const colors = ['bg-red-500', 'bg-orange-500', 'bg-yellow-500', 'bg-green-500'];
  const labels = ['Weak', 'Fair', 'Good', 'Strong'];
  
  bars.forEach((bar, i) => {
    bar.className = 'flex-1 rounded-full transition-colors ' + (i < strength ? colors[strength-1] : 'bg-gray-200 dark:bg-zinc-700');
  });
  text.innerText = val.length === 0 ? 'Too short' : (strength === 0 ? 'Weak' : labels[strength-1]);
});
</script>