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

518

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

Modern Testimonial
A simple and easy to use component for reviews and testimonials.

Author:
Coastal UI

10 months ago

986
FLESH & BONE
Stranded in the heart of a cannibal-infested jungle, you must make unthinkable choices to survive. How far will you go to see another sunrise?

Author:
gidy

2 months ago

159
Download App Buttons
Ready-to-use Apple App Store and Google Play Store download buttons with official branding and styling

Author:
Musawer Shah

2 months ago

419
chat ui advanced
Professional chat ui, connect me for jsx https://abhirajk.vercel.app/

Author:
Abhiraj

11 months ago

1.5k
Concert ticket

Author:
Elijah Davis

2 years ago

13.4k
Chat Bot
Simulation of a chat bot that can be used for conversations as a sketch idea

Author:
Ameth Galarcio

1 year ago

3.5k
Google map iframe with tailwind

Author:
Kofi Osei

2 years ago

21.5k
Pricing Plans

Author:
ariaw

4 months ago

470
Certificate of Completion
A clean and modern certificate template built with Tailwind CSS. Ideal for courses, training programs, and professional achievements.

Author:
Ramkesh Gupta

3 months ago

206
Modern Responsive Pricing Section with Toggle
A sleek, responsive pricing section built with HTML and Tailwind CSS, showcasing three distinct plans (e.g., Free, Pro, Expert) in a card layout. It features a clean monthly/yearly toggle switch with savings indication, highlights a recommended plan with distinct styling and a badge, and uses checkmarks for clear feature comparison. The layout stacks vertically on smaller screens and transitions to a 3-column grid on large screens (lg breakpoint). Includes generic content for easy adaptation and a final "Compare Plans" button.

Author:
Hamza Atig

8 months ago

1k
Verify OTP
Verify OTP

Author:
Tanvir Hasan Bappy (Tanvir)

2 weeks ago

11
status indicatior
status indicator navigation dashbord

Author:
Rushikesh Latpate

1 year ago

1k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components