JSFiddle - React, Tailwind, and code Playground

HTML

<div class="header">&nbsp;
    <div class="header_l">
        <div class="header_l_top">
            <img src="http://savepic.ru/3556481.png" alt="" class="header_l_top_1" />
                <h1 class="header_l_top_h1_2">
                    <a class="header_l_top_2" href="http://www.toy-prezent.ru/">
                    Оригинальные букеты <br/>
                    из мягких игрушек
                    </a>
                </h1>
        </div>
        <div class="header_l_bottom">
            <form action="/this.php" class="header_l_bottom_f" id="header_l_bottom_f" method="POST" enctype="multipart/form-data">
  
                <div class="header_l_bottom_f_v" id="header_l_bottom_f_v">
                Регистрация/Вход
                </div>
                <div class="header_l_bottom_f_i">
                    <input type="text" name="name_in" id="name_in" placeholder="Имя"/><br/>
                    <input type="password" name="password_in" id="password_in" placeholder="Пароль"/>
                    <div id="psevdo_check">
                    <img src="gal.gif" alt="" id="gal">
                    <input type="checkbox" name="check1" id="check1" style="display: none;"/>
                    </div>
                </div>
                
            </form>
            
        </div>
    </div>
    <div class="header_r">
        <img src="http://savepic.ru/3540097.jpg" height="207px" alt="">
    </div>

</div>

CSS

*{
margin: 0px;}
body{
background: #E5B882;
font: 10pt Myriad Pro, Helvetica, sans-serif;
}
.header{
height: auto;
margin: 0 auto;
width: 853px;
margin-bottom: 9px;
}
.header_l{
width: 325px;
height: 207px;
float: left;
}
.header_r{
width: 528px;
height: 207px;
float: left;
}
.header_r img {
position: absolute;
top: 0px;
}
.header_l_top{
height: 100px;
background-color: white;
margin-bottom: 7px;
position: relative;
}
.header_l_top_1{
float: left;
height: 98px;
}
.header_l_top_h1_2{
position: absolute;
top: 40px;
left: 140px;
font-size: 12pt;
}
.header_l_top_2:link, .header_l_top_2:visited{
color:#C0555A;
text-decoration: none;
font-size: 12pt;
font-weight: strong;
}
.header_l_bottom{
height: 100px;
background-color: #c1565c;
background: #c1565c url('http://savepic.ru/3601536.png') top right no-repeat;
}
.header_l_bottom_f{
padding-left: 20px;
text-align: left;
line-height: 2.3;
font-family: arial;
font-size: 8pt;
}
.header_l_bottom_f_v{
margin-left: 10px;
color: white;
line-height: 4;
}
.header_l_bottom_f_v:hover{
color:#A5C839;
cursor: pointer;
}

#name_in, #password_in{
width: 96px;
border: 1px solid #444342;
border-radius: 10px;
padding: 0px 12px;
height: 20px;
color: #ff2d2d;
}
#name_in:focus,#password_in:focus{
outline: none;
}
#psevdo_check{
display: inline-block;
position: relative;
height:15px;
width:20px;
background: white;
vertical-align: bottom;
margin-bottom: 4px;
border: 1px solid #fecca7;
border-radius: 10px;

}
#psevdo_check:hover{
border-color: #444342;
cursor: pointer;
}
#gal{
position: absolute;
bottom: 0px;
    display:none;
}

JavaScript

var i =0;
    $('#psevdo_check').click(function () {
    if (i==0){
        $('#gal').show();
        $('#check1').attr('checked', 'checked');
        $('#gal').attr('src', 'http://savepic.ru/3576961.gif');
        i=1;
    } else     {
    $('#gal').hide();
    $('#gal').attr('src', '');
    $('#check1').removeAttr('checked');
    i=0;
    }
    });
    $('#header_l_bottom_f_v').click(function () {
    document.getElementById('header_l_bottom_f').submit();
    });