<div class="page">
  <div class="page-box">
    <h3 class="header-title">Sample Blog post</h3>
    <p>With a sample post summary</p>
  </div>
  <div class="page">
    <div class="page-box">
    <h4>Post Body</h4>
    <div class="body-text">
      <p>With some more sample content to demonstrate a dummy blog post. This has to be a bit longer too, as small blog posts don't look good.</p>
      <p>Some sample paragraphs can make this sample blog post look good and lengthy.</p>
      <p>Let's add one more paragraph to it and conclude the post.</p>
    </div>
    </div>
    <div class="page">
      <div class="page-box">
        <div class="footer-text">
        <p>Written by John Doe.<br>
        Updated on 26th October 2019</p>
        </div>
      </div>
    </div>
  </div>
</div>

:root {
  font-size: 18px;
  box-sizing: inherit;
}

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

p {
  margin: 0;
}

p:not(:last-child) {
  margin-bottom: 1.5em;
}

h3,
h4 {
  margin: 0 0 1rem;
}

body {
  font: 1em/1.618 Inter, sans-serif;
  display: flex;
  flex-direction: column;
  padding: 1.5em;
  background: url(https://source.unsplash.com/zFaSM1hz02c/2400x1823) center/cover no-repeat fixed;
  justify-content: center;
  align-items: center;
}

.page {
  font-family: Inter;
  border-radius: 0.5em;
  max-width: 20em;
  color: rgba(55, 21, 21, 0.9);
  border: 1px solid rgba(255, 255, 255, 0.25);
  background: rgba(255, 255, 255, 0.25);
  box-shadow: 0 0 1em 0.5em rgba(55, 21, 21, 0.45);
  backdrop-filter: blur(1em);
  overflow: hidden;
}

.page .page {
  background-color: rgba(255, 255, 255, 0.35);
  backdrop-filter: blur(0.5em);
  border-width: 0;
}

.page .page .page {
  background-color: rgba(255, 255, 255, 0.45);
  backdrop-filter: blur(0.25em);
}

.page-box {
  padding: 1.5em;
}

.page h3 {
  color: #6f2a2a;
}

.header-title {
  text-transform: uppercase;
}

.header-text {
  font-weight: bold;
}

.body-text {
  font-size: 0.9em;
}

.footer-text {
  font-size: 0.75em;
}