JSFiddle - React, Tailwind, and code Playground

by panchroma

HTML

<div id="light" class="white_content">
    <a id="close_ic" href = "javascript:void(0)" onclick ="closediv()" >x</a>
    <canvas id="canvas" width="500"height="375">  canvas</canvas>  
    <video autoplay id="videoElement"></video>
    <input type="button" value="Capturar Foto" id="save" class="cam_btn_canvas" />
</div>

CSS

/* temp settings */

#canvas{
    background-color:#ffc !important;
}
#light{
    background-color:red!important;
    height:400px;
}

.white_content 
{
    display: none;
    position: fixed;
    top: 15%;
    left: 17.5%;
    width: 65%;
    height: 62%;
    border-style: solid;
    border-width: 1px;
    border-color: #474747;
    background-color: white;
    z-index: 1002;
    overflow: auto;
    border-radius: 10px;
    min-height: 398px;
    min-width: 657px;
}
.cam_btn_canvas 
{
    font-weight: bolder; 
    left: 46%;
    top: 75%;
    position: inherit;
}
#videoElement {
    width: 32%;
    height: 48.5%;
    background-color: #666; 
    z-index: 1102;
    left: 50%;
    top: 139px;
    position: inherit;
}
#canvas 
{
    width: 32%;
    height: 48.5%;
    background-color: #666;
    z-index: 1102;
    left: 18%;
    top: 139px;
    position: inherit;
}
#close_id
{
    font-size: 15pt;
    font-weight: bolder; 
    position: inherit; 
    left: 80%;
    top: 106px;
}