<html>

    <head>

        <meta charset="utf-8">

        <meta http-equiv="X-UA-Compatible" content="IE=edge">

        <meta name="viewport" content="width=device-width,initial-scale=1">



        <title>Image to Tailwind CSS Code</title>

        <meta name="description" content="Convert your drawings or images into Tailwind CSS code">

        <meta name="keywords" content="image to tailwind, convert image to tailwind, tailwind css code">



        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"

                integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

        <link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">



        <script type="text/javascript">

            try {

                // App Javascript Goes Here. Place your entire script content inside the try block for error handling.

                

                // This will run when the DOM is ready.

                document.addEventListener("DOMContentLoaded", function() {

                    // Get the file input element

                    var fileInput = document.getElementById("file-input");

                    

                    // Add event listener to handle file selection

                    fileInput.addEventListener("change", function(event) {

                        // Get the selected file

                        var selectedFile = event.target.files[0];

                        

                        // Create a file reader object

                        var reader = new FileReader();

                        

                        // Set the onload event handler

                        reader.onload = function(e) {

                            // Get the image source from the file reader result

                            var imageSrc = e.target.result;

                            

                            // Create an image element

                            var imageElement = document.createElement("img");

                            

                            // Set the source of the image element

                            imageElement.src = imageSrc;

                            

                            // Append the image element to the main container

                            var mainContainer = document.getElementById("main-container");

                            mainContainer.appendChild(imageElement);

                            

                            // Convert the image to Tailwind CSS code

                            var tailwindCode = convertToTailwindCode(imageSrc);

                            

                            // Create a pre element to display the Tailwind CSS code

                            var preElement = document.createElement("pre");

                            

                            // Create a code element

                            var codeElement = document.createElement("code");

                            

                            // Set the text content of the code element to the Tailwind CSS code

                            codeElement.textContent = tailwindCode;

                            

                            // Append the code element to the pre element

                            preElement.appendChild(codeElement);

                            

                            // Append the pre element to the main container

                            mainContainer.appendChild(preElement);

                        };

                        

                        // Read the selected file as a data URL

                        reader.readAsDataURL(selectedFile);

                    });

                });



                // Function to convert the image to Tailwind CSS code

                function convertToTailwindCode(imageSrc) {

                    // Convert the image source to base64

                    var base64Image = imageSrc.split(",")[1];

                    

                    // Construct the Tailwind CSS code with the base64 image

                    var tailwindCode = `bg-center bg-cover bg-no-repeat bg-base64 ${base64Image}`;

                    

                    return tailwindCode;

                }



            } catch (error) {

                 // This will throw the error to the parent window.

                throw error;

            }

        </script>

        

        <style>

            /* App CSS Goes Here */

            .container {

                text-align: center;

                margin-top: 50px;

            }

            

            input[type="file"] {

                display: none;

            }

            

            label {

                padding: 10px 20px;

                background-color: #4C51BF;

                color: #FFFFFF;

                cursor: pointer;

                border-radius: 5px;

            }

            

            img {

                max-width: 300px;

                margin-bottom: 20px;

            }

            

            pre {

                background-color: #F3F4F6;

                padding: 20px;

                border-radius: 5px;

                max-width: 600px;

                margin: 0 auto;

            }

            

            code {

                display: block;

                white-space: pre-wrap;

                word-wrap: break-word;

            }

        </style>

    </head>

    <body>

        <div id="main-container" class="container">

            <h1>Image to Tailwind CSS Code</h1>

            <input type="file" id="file-input" accept="image/*">

            <label for="file-input">Select Image</label>

        </div>

    </body>

</html>