JSFiddle - React, Tailwind, and code Playground

HTML

<section class="section">
  <p class="section-title">Area 1</p>
<button class="modal-btn" popovertarget="popover-modal" popovertargetaction="show">ここをクリック</button>

<div id="popover-modal" popover="auto" class="modal-content">
  <div class="modal-content-inner">
    <p class="modal-title">ここはモーダルのなかみです</p>
	<p>HTMLとCSSのみでモーダルウィンドウを実装しています。JavaScriptは使用していません。</p>
    <button class="modal-btn" popovertarget="popover-modal" popovertargetaction="hidden">閉じる</button> 
  </div>
  </div>
</section>
<section class="section">
  <p class="section-title">Area 2</p>
  <p>この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。</p>
  <p>この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。</p>
</section>
<section class="section">
  <p class="section-title">Area 3</p>
  <p>この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。</p>
</section>
<section class="section">
  <p class="section-title">Area 4</p>
  <p>この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。</p>
  <p>この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。</p>
  <p>この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。</p>
</section>

SCSS

body {
	position: relative;
}
.modal-btn {
  display: block;
  margin: 0 auto;
  color: #fff;
  font-weight: bold;
  background-color: #00a5a0;
  box-shadow: 0 5px 0 #008480;
  text-align: center;
  text-decoration: none;
  width: 200px;
  height: 50px;
  line-height: 50px;
  border-radius: 60px;
  border: none;

  &:hover {
    box-shadow: none;
    transform: translateY(5px);
	cursor: pointer;
  }
}

.modal-content {
	width: 100%;
    height: 100%;
    border: none;
    background-color: rgba(0,0,0,0.8);
}
.modal-content-inner {
	position: absolute;
	top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
	padding: 30px;
	width: 60%;
	background-color: #fff;	
}

.section {
  padding: 30px;
  background-color: #dff0ef;

  &:nth-of-type(2n) {
    background-color: #d9e8e7;
  }
}

.section-title,
.modal-title {
  font-size: 20px;
  font-weight: bold;
  text-align: center;
}

p {
  margin: 0 0 10px;
}