JSFiddle - React, Tailwind, and code Playground

by take0844

HTML

<!DOCTYPE html>
<html lang="jp">
<head>
	<meta charset="UTF-8">
	<meta content="IE=edge" http-equiv="X-UA-Compatible">
	<meta content="width=device-width, initial-scale=1.0" name="viewport">
	<title></title>
	<meta content="日本古来の素材と現代的表現を併せ持つ温泉旅館、石井花壇。伝統的な「和」の息づく空間で、至極のひとときをお過ごしください。" name="description">
	<link href="./css/destyle.css" rel="stylesheet">
	<link href="https://unpkg.com/[email protected]/dist/aos.css" rel="stylesheet"><!--flatpicker-->
	<link href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css" rel="stylesheet">
	<script src="https://cdn.jsdelivr.net/npm/flatpickr">
	</script>
	<script src="https://cdn.jsdelivr.net/npm/flatpickr/dist/l10n/ja.js">
	</script><!-- 日本語化 -->
	<link href="./css/style.css" rel="stylesheet">
</head>
<body>
	<!-- <div class="nav-wrapper"> -->
	<header class="header">
		<div class="header-inner">
			<div class="header-left">
				<h1 class="logo"><a href="#"><img alt="" class="header-logo" src="/img/top-header-logo.png"></a></h1>
				<nav class="nav nav-open drawer-nav">
					<ul class="header-list">
						<li class="header-item">
							<a href="./Room/room.html">お部屋</a>
						</li><!-- /.header-item -->
						<li class="header-item">
							<a href="./Menu/menu.html">お料理</a>
						</li><!-- /.header-item -->
						<li class="header-item">
							<a href="./Onsen/onsen.html">温泉</a>
						</li><!-- /.header-item -->
					</ul><!-- /.header-list -->
				</nav><!-- /.nav -->
			</div>
			<div class="header-right">
				<div class="header-link" id="js-modal">
					<a class="calender-link js-modal-open" href="#"><!-- <img src="./img/calender.png" alt="カレンダー"> -->
					 宿泊予約</a>
				</div><!-- /.header-link -->
				 <button aria-controls="js-glabal-menu" aria-expanded="false" class=" humburger" id="js-humburger" type="button"><span class="line"></span><span class="line"></span><span class="line"></span></button>
			</div><!-- /.header-right -->
		</div><!-- /.header-inner -->
	</header><!-- /.header -->
	<div...

CSS

@charset "UTF-8";
html {
	font-size: 62.5%;
}
body {
	font-size: 1.6rem;
	color: #000000;
	min-width: 100vw;
}
img {
	width: 100%;
	height: auto;
	vertical-align: bottom;
}
a {
	text-decoration: none;
}
li {
	list-style: none;
}
@media screen and (min-width: 600px) and (max-width: 1179px) {
	section {
		margin-top: 60px;
	}
}
@media screen and (max-width: 599px) {
	section {
		margin-top: 60px;
	}
}
.inner {
	max-width: 1180px;
	margin: 0 auto;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}
@media screen and (min-width: 600px) and (max-width: 1179px) {
	.inner {
		padding: 0 25px;
	}
}
@media screen and (max-width: 599px) {
	.inner {
		padding: 0 15px;
	}
}
.wrapper {
	width: 100%;
	margin: 0 auto;
	/*  -webkit-box-sizing: content-box;
    box-sizing: content-box; */
}
@media screen and (min-width: 600px) and (max-width: 1179px) {
	.wrapper {
		padding: 0px 20px;
	}
}
@media screen and (max-width: 599px) {
	.wrapper {
		padding: 0 20px;
	}
}
.sec-theme {
	margin: 0 auto;
}
.sec-theme>img {
	display: block;
	width: 3.3%;
	height: 5.1%;
	margin: 0 auto;
	padding-top: 60px;
	padding-bottom: 20px;
}
.sec-theme .cmn-ttl {
	display: block;
	font-size: 3.6rem;
	color: #000000;
	text-align: center;
	margin: 0 auto;
}
.cmn-link {
	background-color: #ffffff;
	width: 40%;
	height: calc(54px/545px*100%);
	border: 1px solid #707070;
	font-size: 1.6rem;
	text-align: center;
}
@media screen and (min-width: 600px) and (max-width: 1179px) {
	.cmn-link {
		margin-top: 50px;
		margin: 0 auto;
	}
}
@media screen and (max-width: 599px) {
	.cmn-link {
		width: 100%;
		margin-top: 35px;
		margin: 0 auto;
	}
}
.news {
	background-color: #ffffff;
}
@media screen and (min-width: 600px) and (max-width: 1179px) {
	.news {
		margin: 0 auto;
		padding: 0 25px;
	}
}
@media screen and (max-width: 599px) {
	.news {
		padding: 0 25px;
	}
}
.news-link {
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack:...