JSFiddle - React, Tailwind, and code Playground

by softvar

HTML

<div id="txtCaptcha"></div>

<button id="get"  onclick="DrawCaptcha()">Regenarate</button>

CSS

#txtCaptcha{
    background-color: green;
    width:120px;
    padding: 5px;
    height:30px;
    text-align: center;
    font-size: 20px;
    font-weight: 600;
}

JavaScript

function DrawCaptcha()
    {
        var possible = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
		var a = possible.charAt(Math.floor(Math.random() * possible.length));
		var b = possible.charAt(Math.floor(Math.random() * possible.length));
		var c = possible.charAt(Math.floor(Math.random() * possible.length));
		var d = possible.charAt(Math.floor(Math.random() * possible.length));
		var e = possible.charAt(Math.floor(Math.random() * possible.length));
		var f = possible.charAt(Math.floor(Math.random() * possible.length));
		
        var code = a + ' ' + b + ' ' + ' ' + c + ' ' + d + ' ' + e + ' '+ f ;
        document.getElementById("txtCaptcha").innerHTML = code
    }

    // Validate the Entered input aganist the generated security code function