EuroBytes Tailwind buttons

by Imri Paloja

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/4.1.11/lib.min.js"></script>
<script src="https://cdn.tailwindcss.com"></script>
<!-- Navigation -->
  <nav class="bg-eb-gray border-b border-eb-gray sticky top-0 z-50 sticky">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
      <div class="flex justify-between h-16">
        <div class="flex items-center">
          <div class="flex-shrink-0 flex items-center">
            <a class="" href="/" title="EuroBytes">
              <img
                alt="EuroBytes Logo"
                class="w-full"
                id="eurobytes-logo"
                src="https://dev.eurobytes.eu/img/logos/10-slim-w212.png"
              />
            </a>
          </div>
        </div>
        <div class="hidden md:flex items-center space-x-8">
          <a
            class="text-gray-300 hover:text-white px-3 py-2 text-sm font-medium"
            href="/Applications.html"
            >Applications</a
          >
          <a
            class="text-gray-300 hover:text-white px-3 py-2 text-sm font-medium"
            href="/about.html"
            >About</a
          >
          <a
            class="text-gray-300 hover:text-white px-3 py-2 text-sm font-medium"
            href="/contact.html"
            >Contact</a
          >
          <a
            class="border border-eb-red text-eb-red hover:bg-eb-red hover:text-white px-6 py-3 rounded-md font-medium text-center transition duration-300"
            href="/quotations.html"
          >
            Sign Up
          </a>
        </div>
        <div class="flex md:hidden items-center">
          <button
            class="text-gray-300 hover:text-white"
            id="mobile-menu-button"
          >
            <i class="fa-solid fa-bars h-6 w-6"></i>
          </button>
        </div>
      </div>
    </div>

    <!-- Mobile menu -->
    <div
      class="hidden md:hidden bg-eb-dark border-b...

CSS

html,body {
  color: #F9F9F9;
}

:root {
  --background-color: #F9F9F9;
  --text-color: #454545;
  --border-color: #CCCCCC;

  --border-focus-color: #33C3F0;

  --object-background-color: #EEEEEE;

  --nav-menu-color: rgb(216, 212, 207) !important;
  --nav-menu-background-color: rgb(135, 16, 7) !important;
  --box-shadow: rgba(0, 0, 0, 0.75);

  --border-radius: 5px;

  --link-color: #3465A4;
  --section-background-color: #FFFFFF;


  /* Additive Color Model (RGB) */

  --color-red: #FF0000;

  --color-green: #008000FF;
  --color-light-green: lightgreen;
  --color-dark-green: darkgreen;
  --color-blue: blue;

  /*
        Subtractive Color Model (CMY/CMYK)
    */

  --color-cyan: cyan;
  --color-magenta: magenta;
  --color-yellow: yellow;
  --color-black: black;

}

/* Dark theme variables */

[data-theme="dark"] {
  --text-color: rgb(188, 183, 174);
  --background-color: rgb(27, 30, 31);
  --border-color: rgb(62, 68, 70);
  --border-focus-color: rgb(62, 68, 70);


  --object-background-color: rgb(34, 36, 38);

  --nav-menu-color: rgb(205, 200, 194) !important;
  --nav-menu-background-color: rgb(108, 13, 6) !important;

  --box-shadow: rgba(0, 0, 0, 0.75);

  --section-background-color: rgb(24, 26, 27);

  --link-color: rgb(118, 167, 212);

  --color-red: #8B0000FF;

  --color-green: #006400FF;

}

*,
*:before,
*:after {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
  scroll-behavior: smooth;
  margin: 0;
  padding: 0;

  -webkit-transition: all 200ms ease;
  -moz-transition: all 200ms ease;
  -o-transition: all 200ms ease;
  transition: all 200ms ease;

  line-height: 2em;
  background-color: var(--background-color);
  color: var(--text-color);
}

.container {

  border: 1px solid var(--border-color);
  border-radius: 5px;

  background: var(--object-background-color) !important;
  color: var(--text-color);
  padding: 20px 30px;

  margin-top: 5%;
 ...

JavaScript

tailwind.config = {
  theme: {
    extend: {
      colors: {
        "eb-red": "#e60000",
        "eb-dark": "#1b1e1f",
        "eb-gray": "#181a1b",
      },
      fontFamily: {
        sans: ["Inter", "sans-serif"],
      },
    },
  },
};

// Function to check if the cookie consent has been accepted
function checkCookieConsent() {
  // Check if 'cookiesAccepted' is set in localStorage
  if (!localStorage.getItem("cookiesAccepted")) {
    // If not, display the cookie consent box
    displayCookieConsent();
  }
}

// Function to display the cookie consent box
function displayCookieConsent() {
  const consentBoxHTML = `
        <div id="cookieConsent" class="fixed bottom-0 left-0 w-full p-8 bg-eb-gray border-t text-center text-sm z-9999 border-gray-800 mt-12 pt-8 items-center text-gray-400">
    By using this website, you agree to our use of cookies to enhance your experience. 
    For more information, please see our <a class="text-white hover:text-eb-red hover:text-decoration transition duration-300" href="/legal/cookie-policy.html">Cookie Policy</a>

    <button id="acceptCookies" class="bg-eb-red hover:bg-red-700 text-white px-6 py-3 mx-4 rounded-md font-medium text-center transition duration-300">Got it!</button>
  </div>
      `;

  // Append the consent box HTML to the body
  document.body.insertAdjacentHTML("beforeend", consentBoxHTML);

  // Add event listener to the "Got it!" button
  document
    .getElementById("acceptCookies")
    .addEventListener("click", acceptCookies);
}

// Function to handle the cookie acceptance
function acceptCookies() {
  // Set a flag in localStorage to remember the user's choice
  localStorage.setItem("cookiesAccepted", "true");

  // Hide the cookie consent box
  document.getElementById("cookieConsent").style.display = "none";
}

// Check cookie consent status when the page loads
window.onload = checkCookieConsent;