JSFiddle - React, Tailwind, and code Playground

by Manju06

HTML

<!DOCTYPE html>
    <html>
    <body>

    <h2>Send e-mail to [email protected]:</h2>

    <form action="mailto:[email protected]" method="post" enctype="text/plain">
    <div class="box">
    Name:<br>
    <input type="text" name="name"><br>
    E-mail:<br>
    <input type="text" name="mail"><img alt="" height="500" src="http://placekitten.com/301/301" width="800"><br>
    Comment:<br>
    <input type="text" name="comment" size="50"><br><br>
    <input type="submit" value="Send">
    <input type="reset" value="Reset">
    </div>
    </form>

    </body>
    </html>

CSS

.box{
        position: relative;
        display: inline-block; /* Make the width of box same as image */
    }
    
    .box input{
        position: absolute;
        z-index: 999;
        margin: 0 auto;
        left: 0;
        right: 0;
        top: 40%; /* Adjust this value to move the positioned div up and down */
        text-align: center;
        width: 60%; /* Set the width of the positioned div */
    }