JSFiddle - React, Tailwind, and code Playground

by take0844

HTML

<section class="room-contents">
					<div class="contents-inner">
						<ul class="room-list">
							<!-- 1 -->
							<li class="room-item">
								<div class="room-item-img room-contents-left aos-init aos-animate" data-aos="fade-up" data-aos-delay="100"><img alt="お部屋1" src="../Room/img/oheya01.jpg"></div>
								<div class="room-contents-txt room-contents-txt-right aos-init aos-animate" data-aos="fade-up" data-aos-delay="500">
									<div class="jp-text">
										<h2 class="ttl">温泉付き客室</h2><!-- /.ttl -->
										<p class="desc1">温海の源泉かけ流し露天風呂付き客室になります。<br>
										あなただけの上質な安らぎのひとときを。</p>
										<p class="desc2">＊部屋数に限りがございます。<br>
										＊洗い場はないため、お体を先に大浴場でお流しになって頂く必要があります。</p>
									</div><!-- /.jp-text -->
								</div><!-- /.room-contents-right -->
							</li><!-- /.room-item -->

SCSS

.message{
    margin: 0 auto;
    text-align: center;
    line-height: 2.0;
    p{
        color: #000;
    }
}
.room-contents{
    width: 100vw;
    
}
.contents-inner{
    padding: 0px 40px;
    margin: 0 auto;
    @include tb {
        padding: 0px 25px;
    }
    @include sp {
        padding: 0px 15px;
    }
}

.room-list{
    // padding: 0px 40px;
    margin: 0 auto;
    @include tb {
        // padding: 0px 25px;
    }
    @include sp {
        // padding: 0px 15px;
    }
    .room-item{
        display: grid;
        grid-template-columns: repeat(118,1fr);
        margin-top: 100px;
        &:nth-last-child(){
            margin-bottom: 150px;
        }

        .room-item-img{
            img{
                grid-row: 1/3;
                grid-column: 1/3;    
            }
           
            &:nth-child(even){
                display: flex;
                flex-direction: row-reverse;
                margin-right: 160px;
            }
            //position: relative;
            z-index: 2;
            @include tb {
                position: absolute;
                top: -175px;
                height: 300px;
                width: 525px;
            }
            @include sp {

            }
            >img{
                width: 90%;
            }
        }
        .room-contents-txt{
            background-image: url(../../img/bg.png);
            background-position: center;
            background-size: cover;
            z-index: -1;
            grid-row: 7/44;
            grid-column: -1/-92;
            padding-top: 30px;

            height: 381px;
            width: 70%;
            padding-top: 60px;
            padding-left: 180px;
            //  margin-top: 135px;
            margin-left: auto;
            @include tb {
                height: 381px;
                padding-top: 160px;
                margin-top: 250px;
                width: 95%;
            }
            .jp-txt{
                margin-left: auto;
              ...