JSFiddle - React, Tailwind, and code Playground

by Michael Prosser

HTML

<div class="cookie-banner">
  <p>This website only uses essential cookies to ensure full functionality. No personal data is tracked. For details, please read our <a href="https://agrisphere-portal.com/privacy/">Privacy &amp; Cookie Policy</a>.</p>
  <p><button>Got It</button></p>
</div>

CSS

.cookie-banner{
  position: fixed;
  bottom: 10px;
  width: 300px;
  text-align: left;
  border-radius: 10px;
  left: 50%;
  transform: translateX(-50%);
  font-family: helvetica, serif;
  padding: 20px;
  font-size: 13px;
  color: #fff;
  background: #2165AD;
  background: linear-gradient(0deg,rgba(33, 101, 173, 1) 0%, rgba(28, 113, 197, 1) 100%);
}
.cookie-banner p{
  margin-top: 0px;
  margin-bottom: 5px;
}
.cookie-banner a{
  color:aliceblue;
}
.cookie-banner button{
  background-color:aliceblue;
  color: #2165AD;
  border: none;
  padding: 4px;
  width: 80px;
  border-radius: 5px;
  margin-bottom: -10px;
}