<div class="container">
  <div class="modal">
    <h2>เงื่อนไขการใช้งาน</h2>
    <p class="terms">
      ไลฟ์แบล็คสุริยยาตร์กับดัก พาร์ตเนอร์โครนาแอลมอนด์แพนงเชิญ กรีน สแตนดาร์ดเทวาโรแมนติค สหรัฐวอฟเฟิลน้องใหม่ชนะเลิศเปโซ
    </p>
    <button type="button" class="accept-button">ตกลง</button>
  </div>
</div>
html,
body {
  height: 100%;
  width: 100%;
  margin: 0;
}

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  background-image: url(https://images.unsplash.com/photo-1553949345-eb786bb3f7ba?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1950&q=80);
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}

.modal {
  max-width: 50%;
  padding: 1rem 2rem;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
 background-color: rgba(255, 255, 255, 0.4); 
  border-radius: 0.25rem;
}

.accept-button {
  background-color: #00b894;
  color: #fff;
  border-radius: 0.25rem;
  padding: 0.5rem 1rem;
  border: none;
  outline: none;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.