Home
SAURAV SINGH
Password Generator

Password Generator

This is a simple and responsive Password Generator built with HTML, Vanilla JavaScript, and Tailwind CSS. It allows users to create secure passwords by selecting custom options such as length, uppercase letters, lowercase letters, numbers, and symbols. Ideal for developers or users looking for a fast and customizable password tool.

This tailwind example is contributed by SAURAV SINGH, on 16-Jul-2025. Component is made with Tailwind CSS v3. It is responsive.

Other

Author SAURAV SINGH

248

Fork Fullscreen

<div class="w-full max-w-md p-6 bg-white rounded-lg shadow-md m-4">
    <h1 class="text-2xl font-bold text-center mb-6">🔐 Password Generator</h1>

<div class="mb-4">
      <label class="block text-sm font-medium mb-1">Password Length</label>
      <input id="lengthSlider" type="range" min="4" max="32" value="12" class="w-full cursor-pointer">
      <div class="text-sm text-right mt-1">Length: <span id="lengthValue" class="font-semibold">12</span></div>
    </div>

<div class="grid grid-cols-2 gap-2 mb-6 text-sm">
      <label class="flex items-center space-x-2">
        <input type="checkbox" id="uppercase" class="form-checkbox" />
        <span>Uppercase</span>
      </label>
      <label class="flex items-center space-x-2">
        <input type="checkbox" id="lowercase" checked class="form-checkbox" />
        <span>Lowercase</span>
      </label>
      <label class="flex items-center space-x-2">
        <input type="checkbox" id="numbers" class="form-checkbox" />
        <span>Numbers</span>
      </label>
      <label class="flex items-center space-x-2">
        <input type="checkbox" id="symbols" class="form-checkbox" />
        <span>Symbols</span>
      </label>
    </div>

<button onclick="generatePassword()" class="w-full bg-blue-600 text-white py-2 rounded hover:bg-blue-700 mb-4">
      Generate Password
    </button>

<div class="flex items-center justify-between px-3 py-2 bg-gray-100 rounded text-sm">
      <span id="passwordDisplay" class="break-all text-gray-800">Your password will appear here</span>
      <button onclick="copyPassword()" class="text-blue-600 hover:underline text-sm ml-4" id="copyBtn">Copy</button>
    </div>
  </div>

lengthSlider.addEventListener('input', () => {
      lengthValue.textContent = lengthSlider.value;
    });

function generatePassword() {
      const length = parseInt(lengthSlider.value);
      const includeLower = document.getElementById('lowercase').checked;
      const includeUpper = document.getElementById('uppercase').checked;
      const includeNumbers = document.getElementById('numbers').checked;
      const includeSymbols = document.getElementById('symbols').checked;

const lower = 'abcdefghijklmnopqrstuvwxyz';
      const upper = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
      const numbers = '0123456789';
      const symbols = '!@#$%^&*()_+-=[]{}|;:,.<>?';

let chars = '';
      if (includeLower) chars += lower;
      if (includeUpper) chars += upper;
      if (includeNumbers) chars += numbers;
      if (includeSymbols) chars += symbols;

if (!chars) {
        passwordDisplay.textContent = "Please select at least one option.";
        return;
      }

let password = '';
      for (let i = 0; i < length; i++) {
        const randomChar = chars[Math.floor(Math.random() * chars.length)];
        password += randomChar;
      }

passwordDisplay.textContent = password;
      copyBtn.textContent = "Copy";
    }

function copyPassword() {
      const password = passwordDisplay.textContent;
      if (!password || password === "Please select at least one option.") return;

navigator.clipboard.writeText(password).then(() => {
        copyBtn.textContent = "Copied!";
        setTimeout(() => {
          copyBtn.textContent = "Copy";
        }, 2000);
      });
    }
  </script>

</body>

Related Examples

super admin
super admin

Author:
Tanvir Hasan Bappy (Tanvir)

7 months ago

1k
Calculator
This calculator uses CSS although it can be passed directly to tailwind

Author:
Ameth Galarcio

1 year ago

2k
chatbot
is my chatbot

Author:
Omer fils ELENGA

3 weeks ago

98
Chat Bot

Author:
Md. Tofayel islam

4 months ago

494
joker
joker cyber punk

Author:
Baraka Salvator

5 months ago

913
Pricing Plans

Author:
ariaw

2 months ago

205
Heading

Author:
KULDEEP

5 months ago

723
Stepper - Without Buttons

Author:
farisubuntu

1 year ago

1.3k
Live Chat Component using Tailwind Alpine JS
Live Chat Component using Tailwind Alpine JS

Author:
Ahita Bisma Adlula

9 months ago

616
Pixel Blast
Pixel Blast

Author:
Raul antonio de la cruz hernandez

1 month ago

190
Services
This Services page design includes: 1. Responsive layout using Tailwind CSS grid system 2. Indigo-800 and Blue-900 color scheme 3. Dark mode support 4. Header with navigation 5. Six service cards with icons, titles, and descriptions 6. Footer with copyright information 7. Subtle animations and transitions 8. Accessibility considerations (proper heading structure, color contrast) Key features: - The background uses a gradient from Indigo-800 to Blue-900 - The header and footer have a white background in light mode and dark gray in dark mode - Service cards have a white background in light mode and dark gray in dark mode - Text colors are adjusted for readability in both light and dark modes - Icons use the Indigo-800 color (Indigo-400 in dark mode) for consistency - Each service card has a hover effect that scales it up slightly - Service cards fade in with a staggered delay for a smooth entrance - Dark mode is automatically applied based on system preferences - The design is fully responsive, adjusting from 1 to 3 columns based on screen size This design provides a clean, professional look for a services page while incorporating the requested color scheme and maintaining good usability across different devices and color modes.

Author:
nejaa badr

1 year ago

2.2k
Animated Ripple Avatar
Ripple Effect Avatar (Tailwind CSS Component) A visually striking animated component that displays a centered avatar or image surrounded by expanding ripple circles. Built with Tailwind CSS and custom animations, this effect simulates a pulsing or water ripple reaction, drawing attention to the central image. Ideal for user profile sections, hero banners, landing pages, or highlighted features in modern web interfaces. The ripples gradually fade and expand, creating a soft, calming motion that enhances interactivity and depth.

Author:
Code Master(Mfuranziza Dusabe Hamza)

6 months ago

1k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components