卡片 · Witty Treefrog

类型：组件　·　分类：卡片　·　收录：2026-09-19　·　源码：会员可见

[hidecontent type="vip1"]

<div class="cookie-warning">
  <span class="cookie-warning__title">We use cookies 🍪</span>
    <div class="cookie-warning__text">This site uses cookies to enhance your experience. Give 'em a go! Or don't! It's up to you! <a href="#">Read more about our cookies</a></div>
    <div class="cookie-warning__button-group">
      <button class="cookie-warning__button">Accept</button>
      <button class="cookie-warning__button">Decline</button>
    </div>
</div>
<style>
/* From Uiverse.io by Admin12121 - Tags: card, accept, card design */
.cookie-warning {
  background: linear-gradient(0deg, #9005bd 0%, #bc28d2 100%);
  box-shadow: 10px 5px 20px 0 rgba(144, 5, 189, 0.3);
  max-width: 400px;
  display: flex;
  color: #FFF;
  flex-direction: column;
  padding: 1.5rem;
  border-radius: 0.6rem;
/*  position: fixed; */
  left: 2.4rem;
  right: 2.4rem;
  bottom: 2.4rem;
  z-index: 100;
}

.cookie-warning__title {
  font-size: 2rem;
  margin-bottom: 0.8rem;
}

.cookie-warning__text {
  font-size: 1.1rem;
  color: rgba(255, 255, 255, 0.8);
  margin-bottom: 1rem;
}

.cookie-warning a {
  color: rgba(255, 255, 255, 0.8);
}

.cookie-warning__button-group {
  display: flex;
  justify-content: end;
  flex-wrap: wrap;
  margin-bottom: -0.5rem;
}

.cookie-warning__button {
  cursor: pointer;
  background-color: rgba(255, 255, 255, 0.2);
  border: none;
  padding: 8px 8px;
  border-radius: 0.6rem;
  margin-right: 0.8rem;
  font-size: 1rem;
  color: #FFF;
  transition: 0.15s ease;
}

.cookie-warning__button:hover {
  color: #9005bd;
  background-color: rgba(255, 255, 255, 0.8);
}
</style>

[/hidecontent]