<div class="p-8">
  <input type="checkbox" hidden id="close-btn" class="peer" />
  <div role="alert" class="bg-primary rounded-box p-4 relative flex items-center justify-center peer-checked:hidden">
    <p class="text-primary-content text-center">
      Get started with ACME for Business today · Unlimited access to all courses for your entire team.
    </p>

    <span class="absolute right-2">
      <label for="close-btn" class="btn btn-soft">
        Close
      </label>
    </span>
  </div>
</div>

<div class="bg-base-200 w-full border-b border-base-300 p-4">
  <p class="text-center text-base-content/80">
    Get started with ACME for Business today · Unlimited access to all courses for your entire team.
  </p>
</div>

<div class="card card-border bg-base-200 p-4 max-w-2xl">
  <p class="text-base-content/80">
    Lorem, ipsum dolor sit amet consectetur adipisicing elit. Maiores maxime, vero quasi vitae consectetur eius
    provident quia nostrum velit cumque quo eveniet magnam, laboriosam officia alias culpa ducimus <a href=""
      class="link link-primary link-hover">aliquid. Ratione!</a>
  </p>

  <footer class="card-actions mt-4">
    <button class="btn btn-primary">Accept</button>
    <button class="btn btn-ghost">Decline</button>
  </footer>
</div>

<div class="w-full border-t border-base-300 bg-base-200 p-4 flex items-center">
  <p class="text-base-content/80 max-w-2xl">
    Lorem, ipsum dolor sit amet consectetur adipisicing elit. Maiores maxime, vero quasi vitae consectetur eius
    provident quia nostrum velit cumque quo eveniet magnam, laboriosam officia alias culpa ducimus <a href=""
      class="link link-primary link-hover">aliquid. Ratione!</a>
  </p>

  <div class="flex items-center justify-end flex-auto gap-2">
    <button class="btn btn-primary">Accept</button>
    <button class="btn btn-ghost">Decline</button>
  </div>
</div>