JSFiddle - React, Tailwind, and code Playground

by kodjoe mambi

HTML

<script src="&lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1&quot;&gt;"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<input class="checkbox-cb" id="checkbox-cb" type="checkbox" />
<div class="cookie-bar">

<span class="message">This website uses cookies to give you an incredible experience. By using this website you agree to the <a href="#">terms</a></span>

<span class="mobile">This website uses cookies, <a href="#">learn more</a></span>

<label for="checkbox-cb" class="close-cb">x</label>
</div>

CSS

.cookie-bar { z-index:9996; position: fixed; width: 100%; top: 0; right:  0px; height: auto; padding: 20px;  line-height:20px; text-align: center; background: #d2c6af; transition: .8s; animation: slideIn 2s; display: inline-block; }

span.message { max-width:350px; }

.mobile { display: none; }

@keyframes slideIn { 0% { transform: translateY(-1000px); }  100% { transform: translateY(0); } }

.close-cb { border: none; background: none; position: absolute; display: inline-block; right: 20px; top: 10px; cursor: pointer; }

.close-cb:hover { color:#fff; }

.checkbox-cb { display: none;}  

#checkbox-cb:checked + .cookie-bar { transform: translateY(-1000px); }

.overlaycookies { background-color: rgba(255, 255, 255, .95); -webkit-transition: all .4s cubic-bezier(.25, .8, .25, 1); transition: all .4s cubic-bezier(.25, .8, .25, 1); position: fixed; top: 0px; left: 0; right: 0; bottom: 0px; width: 100%; height: 100%; z-index:9998; }

.fa-toggle-off { display: none; }

.hide-overlaycookies .overlaycookies { top: -100%; }

.hide-overlaycookies .fa-toggle-off { display: inline-block; }

.hide-overlaycookies .fa-toggle-on { display: none; }

.overlaycookies .overlaycookies-content { box-sizing: border-box; height: 100%; overflow: scroll; padding-top:20px; padding-bottom: 80px; text-align:center;}

.buttoncookies-container { position: relative; display:inline;}

.buttoncookies { display: inline-block; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; text-decoration: none; }

.buttoncookies:hover { color:#fff; }

.buttoncookiesinside-container { position: relative; display:inline; text-align:center; margin: 0 auto; }

.buttoncookiesinside { display: inline-block; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; text-decoration: none; }

.buttoncookiesinside:hover { color:#d2c6af; }

.cookietitle, .cookielink { color: #282828; font-family: "open_sansbold";...