Banner

<div class="bg-black tc-white px-4 py-3 d-f ai-c jc-sb fs-sm fw-500">
  <span>Check out our brand new merchendise!</span>
  <button class="bg-transparent b-none tc-white o-50 h:o-100">
    <svg
      xmlns="http://www.w3.org/2000/svg"
      class="w-4 h-4"
      viewBox="0 0 256 256"
    >
      <rect width="256" height="256" fill="none" />
      <line
        x1="200"
        y1="56"
        x2="56"
        y2="200"
        stroke="currentColor"
        stroke-linecap="round"
        stroke-linejoin="round"
        stroke-width="16"
      />
      <line
        x1="200"
        y1="200"
        x2="56"
        y2="56"
        stroke="currentColor"
        stroke-linecap="round"
        stroke-linejoin="round"
        stroke-width="16"
      />
    </svg>
  </button>
</div>

<div class="bg-indigo-9 tc-white px-4 py-3 d-f ai-c jc-sb fs-sm fw-500">
  <div class="d-f ai-c g-2">
    <span>Check out our brand new merchendise!</span>
    <a href="#" class="tc-white td-u fw-700">Shop now</a>
  </div>
  <button class="bg-transparent b-none tc-white o-50 h:o-100">
    <svg
      xmlns="http://www.w3.org/2000/svg"
      class="w-4 h-4"
      viewBox="0 0 256 256"
    >
      <rect width="256" height="256" fill="none" />
      <line
        x1="200"
        y1="56"
        x2="56"
        y2="200"
        stroke="currentColor"
        stroke-linecap="round"
        stroke-linejoin="round"
        stroke-width="16"
      />
      <line
        x1="200"
        y1="200"
        x2="56"
        y2="56"
        stroke="currentColor"
        stroke-linecap="round"
        stroke-linejoin="round"
        stroke-width="16"
      />
    </svg>
  </button>
</div>

<div class="bg-white b-1 bc-silver-2 px-4 py-3 d-f ai-c jc-sb fs-sm fw-500">
  <div class="d-f ai-c g-3">
    <span class="d-f ai-c jc-c bg-black tc-white rad-9 px-2 py-1 fs-xs fw-700">New</span>
    <span class="tc-slate-9">We just released a new update!</span>
  </div>
  <div class="d-f ai-c g-4">
    <button class="bg-black tc-white px-3 py-1 rad-0 fs-xs fw-600 h:bg-slate-10 f:oc-silver-4 f:os-s f:ow-2">Check it out</button>
    <button class="bg-transparent b-none tc-silver-8 h:tc-black">
      <svg
        xmlns="http://www.w3.org/2000/svg"
        class="w-4 h-4"
        viewBox="0 0 256 256"
      >
        <rect width="256" height="256" fill="none" />
        <line
          x1="200"
          y1="56"
          x2="56"
          y2="200"
          stroke="currentColor"
          stroke-linecap="round"
          stroke-linejoin="round"
          stroke-width="16"
        />
        <line
          x1="200"
          y1="200"
          x2="56"
          y2="56"
          stroke="currentColor"
          stroke-linecap="round"
          stroke-linejoin="round"
          stroke-width="16"
        />
      </svg>
    </button>
  </div>
</div>

<div class="w-full o-h">
  <div class="bg-black tc-white px-4 py-3 rad-0 d-f ai-c jc-sb fs-sm fw-500">
    <span>This website uses cookies to ensure you get the best experience.</span>
    <div class="d-f ai-c g-3">
      <button class="bg-transparent b-1 bc-white tc-white px-3 py-1 rad-0 fs-xs fw-600 h:bg-white h:tc-black">Decline</button>
      <button class="bg-white tc-black px-3 py-1 rad-0 fs-xs fw-600 h:bg-silver-2">Accept</button>
    </div>
  </div>
</div>