JSFiddle - React, Tailwind, and code Playground
HTML
<div class="slidebox">
<div class="slidebox-close">x</div>
<div class="slidebox-header"></div>
<div class="slidebox-content">
<div>Будьте в курсе акций, скидок
и выгодных предложений
</div>
<div>
<input>
<button>Подписаться</button>
</div>
</div>
<div class="slidebox-footer">Подписаться!</div>
</div>
CSS
.slidebox {
position: fixed;
bottom:0;
left: 50%;
margin-left: -150px;
width:302px;
height:34px;
overflow:hidden;
box-shadow: 0 0 5px rgba(0,0,0,0.3);
background-color: transparent;
border:1px solid transparent;
border-radius: 9px 9px 0 0;
}
.slidebox-header {
position:absolute;
left:0;
top:0;
width:300px;
background:green;
border:1px solid green;
border-radius: 9px 9px 0 0;
height:17px;
z-index:100;
}
.slidebox-footer {
position:absolute;
width:300px;
left:0;
bottom:0;
background:green;
border:1px solid green;
height:23px;
cursor:pointer;
color:#fff;
text-align:center;
z-index:102;
}
.slidebox-content {
background:#ccc;
height:100%;
}
.slidebox-content div {padding:20px 15px 0;}
.slidebox-close {
position:absolute;
right:0;
top:0;
width:20px;
height:20px;
z-index:101;
cursor:pointer;
text-align:center;
color:#fff;
font-weight:bold;
}
JavaScript
$.fn.switch = function(firstFunc, secondFunc) {
$(this).on('click', function(e) {
if ($(this).data('switch')) {
secondFunc.call(this, e);
$(this).data({'switch': false});
}
else {
firstFunc.call(this, e);
$(this).data({'switch': true});
}
});
return $(this);
};
$(window).ready(function(){
$('.slidebox-footer').switch(function(){
$(this).parent().animate({height:150});}
,function(){
$(this).parent().animate({height:34});
});
$('.slidebox-close').click(function(){
$(this).parent().animate({height:34});
});
});