JSFiddle - React, Tailwind, and code Playground

by chiragvidani

HTML

<div id="signaturePopup">
    <label id="signatureTitle">View Signature</label>
    <div id="signatureImage">
        <!--This image is dynamically added via JS -->
        <img src="https://raw.github.com/gentoo90/minimal-django-file-upload-example/9ab39c7fe5abaf00f2d586e88e79a5a85075179e/src/for_django_1-3/myproject/media/documents/2012/07/12/example02.jpg" />
    </div>
    <div id="signatureFooter">
        <div id="signatureStatus">
            <!-- This image is dynamically added via JS -->
            <img src="http://developer.chrome.com/extensions/examples/api/idle/idle_simple/sample-16.png" />
        </div>
        <label id="signatureUserDetails">Added via JS</label>
        <input id="closeSignature1" type="button" value="Close1" />
        <input id="closeSignature" type="button" value="Close" />
    </div>
</div>

CSS

#signaturePopup {
    position: relative;
}

#signatureTitle {
    text-transform: uppercase;
    font-size: 16px;
}
#signatureFooter {
    bottom: -50px;
    right: 0;
    position: absolute;
}
#signatureFooter > div, #signatureFooter > label, #signatureFooter > input {
    /*display: inline;*/
}
#signatureFooter > input {
    right: 0;
    align: 
}
#signatureImage > img {
    height: 90%;
    width: 90%;
    border: grey 1px solid;
    display: block;
    margin-left: auto;
    margin-right: auto;
}