Build a Captcha Generator in Tailwind CSS

Last Updated : 08 Mar, 2024

A Captcha Generator in Tailwind CSS is a tool that creates visual puzzles to distinguish between humans and bots on websites. It uses the Tailwind CSS framework to style the elements of the Captcha, making it visually appealing and user-friendly. This generator can help website owners protect their platforms from spam and malicious activities by ensuring that only real users can access certain features or submit forms.

Screenshot-2024-02-26-230238

Approach:

Create an HTML file and include the necessary Tailwind CSS CDN link in the head section. Define the main container for the Captcha generator using Tailwind CSS classes to style it.
Inside the main container, create a div to hold the Captcha characters. Create an input field for the user to enter the Captcha and add a button to refresh the Captcha.
Define a function to generate a random string for the Captcha. Use this function to generate the initial Captcha and display it in the Captcha table.
Attach an event listener to the refresh button. When the button is clicked, regenerate the Captcha and update the Captcha table.
Attach an event listener to the verify button. When the button is clicked, compare the entered Captcha with the generated Captcha. Display a message indicating whether the Captcha was verified successfully or not.
Use Tailwind CSS utility classes to style the Captcha table, input field, and buttons. Ensure the layout is responsive by using Tailwind’s responsive classes.

Example: Implementation to design a captcha generator.

HTML

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0">
    <title>The Captcha Generator</title>
    <link href=
"https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css"
          rel="stylesheet">
</head>
 
<body class="bg-gray-100 min-h-screen flex 
             flex-col items-center justify-center">
    <div class="bg-white p-8 rounded-lg shadow-md w-full 
                md:w-1/2 lg:w-1/3 border-2 border-green-600">
        <h1 class="text-3xl font-bold text-center mb-8">
              Captcha Generator
          </h1>
        <!-- Container for the Captcha -->
        <div id="captchaTable"
             class="flex justify-center items-center space-x-4 mb-4">
          </div>
        <!-- Input field for user to enter the Captcha -->
        <div class="flex justify-center items-center space-x-4 mb-4">
            <input type="text" id="captchaInput"
                   class="border border-gray-300 rounded-md 
                          py-2 px-3 focus:outline-none flex-1"
                   placeholder="Enter Captcha">
            <!-- Button to refresh the Captcha -->
            <button id="refreshButton"
                    class="bg-blue-500 text-white px-6 py-2 
                           rounded-md focus:outline-none">
                  Refresh
              </button>
        </div>
        <!-- Button to verify the entered Captcha -->
        <button id="verifyButton"
                class="bg-green-500 text-white px-6 py-2 
                          rounded-md self-center focus:outline-none">
              Verify
          </button>
        <!-- Message to display the verification result -->
        <p id="resultMessage" class="mt-4"></p>
    </div>
    <!-- JavaScript to handle Captcha generation and verification -->
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            const captchaTable = document.getElementById('captchaTable');
            const captchaInput = document.getElementById('captchaInput');
            const refreshButton = document.getElementById('refreshButton');
            const verifyButton = document.getElementById('verifyButton');
            const resultMessage = document.getElementById('resultMessage');
             
            // Generate the initial Captcha
            generateCaptchaTable();
             
            // Event listener for the Refresh button
            refreshButton.addEventListener('click', function () {
                generateCaptchaTable();
                resultMessage.textContent = '';
            });
             
            // Event listener for the Verify button
            verifyButton.addEventListener('click', function () {
                const inputText = 
                      captchaInput.value.trim().toLowerCase();
                const captchaText = 
                      captchaTable.dataset.captcha.trim().toLowerCase();
                 
                // Verify the entered Captcha
                if (inputText === captchaText) {
                    resultMessage.textContent = 'Captcha verified successfully.';
                    resultMessage.classList.remove('text-red-500');
                    resultMessage.classList.add('text-green-500');
                } else {
                    resultMessage.textContent = 'Incorrect Captcha. Please try again.';
                    resultMessage.classList.remove('text-green-500');
                    resultMessage.classList.add('text-red-500');
                }
                 
                // Clear the input field and regenerate the Captcha
                captchaInput.value = '';
                generateCaptchaTable();
            });
             
            // Function to generate a random string for the Captcha
            function generateRandomString(length) {
                const characters = 
'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
                let result = '';
                for (let i = 0; i < length; i++) {
                    result += 
                      characters.charAt(Math.floor(Math.random() * 
                                                   characters.length));
                }
                return result;
            }
             
            // Function to generate the Captcha table
            function generateCaptchaTable() {
                const captchaText = generateRandomString(6);
                captchaTable.dataset.captcha = captchaText;
                captchaTable.innerHTML = '';
                for (let i = 0; i < captchaText.length; i++) {
                    const cell = document.createElement('div');
                    cell.textContent = captchaText.charAt(i);
                    cell.classList.add(
                          'text-4xl', 'font-bold', 'w-12', 'h-12', 'text-center', 
                          'border', 'border-gray-300');
                    captchaTable.appendChild(cell);
                }
            }
        });
    </script>
</body>
 
</html>