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

331

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

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

1.1k
about video
about kelaplus video

Author:
Omer fils ELENGA

4 months ago

615
Ai clone, chat ui
Chat interface for ai builder, dont toomuch focused on designing responsive

Author:
Abhiraj

10 months ago

1.7k
Typewriter effect
using javascript

Author:
Samuel Dawson

2 years ago

42k
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

8 months ago

1k
invoice 02
product invoice

Author:
Tanvir Hasan Bappy (Tanvir)

7 months ago

571
Review popup form with toggle and stars
Review popup form with toggle and stars

Author:
Ayman Reifoun

7 months ago

655
Feature Card
Shows off a feature, great for homepages and grid layout, or can be used in dashboards for "example use" grids. Enjoy! Part of the Coastal UI collection.

Author:
Coastal UI

7 months ago

347
blog component
good blog

Author:
Uwera Dorcas

6 months ago

679
Card post blog
Targetas para blog

Author:
Raul antonio de la cruz hernandez

4 weeks ago

50
Serious Input Html
Input text serious like apple or smth

Author:
Cristian

1 year ago

2k
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

7 months ago

997

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components