JSFiddle - React, Tailwind, and code Playground

by vitalsone

HTML

<div id="panel">
	
    <a id="hide">&uarr; свернуть</a>
</div>

<p class="slide"><a href="#" class="btn-slide">
В корзине: <span>27</span> товаров, на сумму: <span>35000</span> руб.
</a></p>

CSS

body {margin: 0 auto;padding: 0;width: 980px;font: 75%/120% Arial, Helvetica, sans-serif;}
a:focus {outline: none;}
#panel {
    position:absolute;
	width:450px;
	height:180px;
	display: none;
    border:1px solid rgba(0,0,0,.15);
    border-radius:0px 0px 10px 10px;
    box-shadow:inset 0px 0px 10px rgba(255,255,255,.3),0px 0px 10px rgba(255,255,255,1);
    overflow: hidden;
    padding:50px 10px 15px;

   background-color: #5bb75b;
  *background-color: #51a351;
  background-image: -moz-linear-gradient(top, #62c462, #51a351);
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#62c462), to(#51a351));
  background-image: -webkit-linear-gradient(top, #62c462, #51a351);
  background-image: -o-linear-gradient(top, #62c462, #51a351);
  background-image: linear-gradient(to bottom, #62c462, #51a351);
  background-repeat: repeat-x;
  border-color: #51a351 #51a351 #387038;
  border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff62c462', endColorstr='#ff51a351', GradientType=0);
  filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
}
.slide {
	margin: 0;
	padding: 0;
	 background:#fff;
}
.btn-slide {
    color:#fff;
     position:fixed;
	text-align: center;
    text-decoration:none;
	width: 450px;
	height: 16px;
	padding: 5px 10px 10px;
	 margin:0;
	display: block;
	font: bold 120%/100% Arial, sans-serif;
    line-height:18px;
    border-radius:0px 0px 4px 4px;
    border:1px solid rgba(91,183,91,.8);
    
   
} 

.btn-slide span {
    position:relative;
    background:#428642; 
    padding:2px 4px; 
    border-radius:12px; 
    border:1px solid rgba(0,0,0,.06);
    box-shadow:inset 0px 0px 2px rgba(255,255,255,.15);
    top:1px;
}
.active {margin: 0; position:fixed;}

.btn-slide:hover, .active:hover, .active, .btn-slide {
    color: #ffffff;
    text-shadow:0px 1px #428642;
     background-color: #5bb75b;
  *background-color: #51a351;
  background-image:...

JavaScript

$(document).ready(function(){

	$(".btn-slide").click(function(){
		$("#panel").slideToggle("slow");
		$(this).toggleClass("active"); return false;
	});
	
    $("#hide").click(function(){
		$("#panel").slideToggle("slow");
		$(this).toggleClass("active"); return false;
	});
     
	 
});