JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="june2018cookies">
<p class="info">Strona korzysta z plików cookies w celu realizacji usług. Możesz określić warunki przechowywania lub dostępu do plików cookies w Twojej przeglądarce.<br>
<a href="/polityka-prywatnosci-i-plikow-cookies/" style="color:#fff;font-weight:900;text-decoration:none;font-size:16px;display:inline-block;padding:10px 0;">Dowiedz się więcej.</a></p>
<div class=""></div>
<i class="fa fa-check-circle june2018cookies-close"></i>
</div>
CSS
/* Cookies */
.june2018cookies {
position: fixed;
z-index:10;
bottom:40px;
right:-330px;
/* centrowanie popupa */
display: inline-block;
vertical-align: middle;
background: #115330;
border-radius:10px;
max-width:200px;
font-size:12px;
line-height:13px;
color:#fff;
border-radius: 6px;
text-align: right;
padding:10px 15px 10px 50px;
transition: all 1s .3s ease-in-out;
-moz-transition: all 1s .3s ease-in-out;
-webkit-transition: all 1s .3s ease-in-out; }
.june2018cookies .info {
letter-spacing: .4px;
font-family: 'PT Sans Narrow', sans-serif;
color:#fff!important;
}
.june2018cookies-close {
position:absolute;
left:5%;
top:0;
bottom:0;
margin:auto 0;
cursor:pointer;
width:5.71%;
height:18%;
font-size:30px;
color:#fff;
transition:all 0.35s ease-in-out;
}
.june2018cookies-close:hover {
color:#777777;
}
.offsetright {
right:-330px!important;
}
JavaScript
/* Cookies */
var PopUpCookie = getCookie("MyPopUpCookie");
if (PopUpCookie == '') {
setTimeout(june2018cookie, 0);
} else {
}
jQuery('.june2018cookies-close').on('click', function () {
setCookie("MyPopUpCookie");
jQuery('.june2018cookies').addClass('offsetright');
});
function setCookie(name, value) {
var d = new Date();
d.setTime(d.getTime() + (5*24*60*60*1000)); /* 2 days */
var expires = "expires=" + d.toUTCString();
document.cookie = name+"="+value+"; "+expires+"; path=/";
}
function getCookie(cname) {
var name = cname + "=";
var ca = document.cookie.split(';');
for (var i = 0; i < ca.length; i++) {
var c = ca[i];
while (c.charAt(0) == ' ') c = c.substring(1);
if (c.indexOf(name) == 0) return c.substring(name.length, c.length);
}
return "";
}
function june2018cookie() {
jQuery('.june2018cookies').animate({
"right": "+=350px"
});
jQuery('.june2018cookies').removeClass('offsetright');
}