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

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

Invoice
Invoice

Author:
Tanvir Hasan Bappy (Tanvir)

4 months ago

439
To-Do List with Tailwind CSS
A simple and responsive to-do list built with HTML, JavaScript, and Tailwind CSS. Features task addition, completion, and deletion. Perfect for beginner projects or component demos.

Author:
Sudip chaudhary

2 months ago

209
Responsive layout with header, main body, aside (sidebar) and footer

Author:
Ahmed Malik

2 years ago

11.7k
Sticky fullpage pages / slides

Author:
Hasan AlDoy (McDoy)

6 months ago

917
coffee
a beverage brewed from the roasted and ground seeds of the tropical evergreen coffee plant. Coffee is one of the three most popular beverages in the world (alongside water and tea), and it is one of the most profitable international commodities

Author:
Augustin

2 months ago

539
status indicatior
status indicator navigation dashbord

Author:
Rushikesh Latpate

7 months ago

792
Tailwind CSS Service Card Component
An HTML and Tailwind CSS code snippet for creating a responsive service card component. Ideal for marketplaces, portfolios, or listing pages. Includes sections for image/video preview, seller info, rating, pricing, and additional details. Easy to customize using Tailwind utility classes.

Author:
Hamza Atig

4 months ago

694
Feeds
This is a responsive social media feed interface built with Tailwind CSS that features a clean, modern design with excellent color contrast and visual hierarchy. Here's a detailed breakdown of its components and layout:

Author:
ishimwe shadad

2 months ago

323
Updated customer details page
Customer details page

Author:
Olivia Smith

1 year ago

3.1k
Verify OTP
verification code

Author:
gidy

2 months ago

165
Tag Input field
This code creates a dynamic tag input field using HTML, JavaScript, and TailwindCSS. Users can type tags into the input field and press "Enter" to add them. Each tag is displayed inside the input field as a styled container with a remove button. The tag input is limited to a maximum of 5 tags, and an error message is shown if the limit is exceeded. Users can remove tags to free up space for new ones. The input field and tags are styled using TailwindCSS, ensuring a clean and responsive design.

Author:
Ranit Saha

7 months ago

1.3k
3d Box
Let's build a 3d world empowered by Orgin Dreams.these are 3d objects

Author:
ORGIN_DREAMS

3 months ago

332

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components