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

157

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

Expandable File Tree with Tailwind and Vanilla JS with tailwinds 4
A simple and responsive file tree component built with Tailwind CSS and vanilla JavaScript. Each folder can be expanded or collapsed with smooth transitions, including the root directory. This component is useful for project explorers, code editors, or file management UIs.

Author:
Indra

2 months ago

92
htmlcss1

Author:
Anonymous

4 months ago

190
Date picker
Date picker example using flatpickr library

Author:
Lîmåã M

2 years ago

16.7k
Why Choose Us - Our Core Strengths
Discover what sets us apart with this engaging "Why Choose Us" section. Highlighting three key pillars—passion, honesty, and continuous improvement—this component features a bold, centered headline with a striking blue accent

Author:
Vikas Kushwah

7 months ago

776
Radial Progress Indicator with TailwindCSS
A sleek and customizable radial progress indicator built with SVG and styled using TailwindCSS. The progress bar is animated with smooth transitions, featuring a circular background, dynamic progress, and centered text or optional imagery. Perfect for showcasing percentages, stats, or any progress-related metrics in your projects.

Author:
SHARIFUL ISLAM

8 months ago

1.7k
Mobile app
I'll create a comprehensive collection of professional app components that you can use to build modern mobile and web applications.

Author:
ishimwe prince

5 months ago

443
visacardes
I'll create professional Visa card components with realistic styling and multiple card types

Author:
Anonymous

5 months ago

449
Contact Page

Author:
Sedat Kumcu

1 year ago

1.2k
Hacker terminal #fake
hacker terminal tailwind css

Author:
QQ-VVN

5 months ago

878
templete
templete

Author:
Uwera Dorcas

4 months ago

456
Product Details Page
This section will show all the information about a selected product, including its title, description, price, images, and specifications.

Author:
mohit kulkarni

1 month ago

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

Author:
Abhiraj

9 months ago

1.3k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components