JSFiddle - React, Tailwind, and code Playground

HTML

<header>
      <h1>フィレンチェ</h1>
        <br><h2>食と美の街</h2>
        <section class="about">
        　
          <h3>高２の秋のイタリア
              <br>またこの赤レンガの街に
              <br>ゆっくりと訪れてみたい</h3>
      </section>

</header>

<section class="venchi">
    <h3 class=front>Venchi（ヴェンチ）</h3>
      <img src="https://placehold.jp/24/99cc99/339933/350x150.png?text=image/venchi.png" class="shop" alt="ヴェンチ">
          <h3><p class="gelato">　 
            フィレンチェのイタ
          <br>リア人も認める高級ジ
          <br>ェラート屋さん。レジ
          <br>の壁はチョコレートの
          <br>ような鮮やかで滑らか
          <br>な茶色そこに長い滝
          <br>が流れ、まるでチョコ
          <br>レートの滝のよう。
        </p>
    </h3>
</section>

<section class="chocolate">
<img src="https://placehold.jp/24/99cc99/339933/350x150.png?text=image/チョコ.png" class="ice" alt="チョコ">

<h3>
<p class="doble">　
        Venchiで買ったのはこちら。
    <br>同じ味にみえますが味はダブル
    <br>苦めのチョコと甘めのチョコ。
</p>
</h3>
</section>

<section class="panino">

<h3>パニーニ

<img src="https://placehold.jp/24/99cc99/339933/350x150.png?text=image/パニーニ.png" class="pan" alt="パニーニ">
<p>とあるバール（軽食屋）で買った。<br>
これで５ユーロ（当時のレートで<br>600円）でした。</p></h3>

</section>

<section class="painting">

<h3>ウォールペインティング
<br><p>　フィレンチェのドゥオーモ付属<br>
美術館にダンテ・アリギエーリの<br>
デスマスクがあります。これから<br>
着想を得た教養の上でのウォール<br>
ペインティングと考えられます。</p></h3>

<img src="https://placehold.jp/24/99cc99/339933/350x150.png?text=image/落書き.png" class="draw" alt="落書き">
<img src="https://placehold.jp/24/99cc99/339933/350x150.png?text=image/ダンテ.png" class="mask" alt="ダンテ">

</section>

<section class="pinokio">

<p>
<img src="https://placehold.jp/24/99cc99/339933/350x150.png?text=image/キノピオ.png" alt="ピノキオ">

<h3>ピノキオの街

<br><br>
木でできたピノキオ
<br>
のグッズを売るお店が
<br>いくつもあります。こ
<br>の木でできた三輪車の
<br>艶がいい！イタリアで
<br>一番好きな写真です。
</h3>


</section>


<section class="sinyoria">
  <p　class="palco">
     <h3>シニョーリア広場
    <img src="https://placehold.jp/24/99cc99/339933/350x150.png?text=image/亀.png" alt="亀">
    <img src="https://placehold.jp/24/99cc99/339933/350x150.png?text=image/グリコ.png"...

CSS

@charset "UTF-8";
/* CSS Document */
.wf-sawarabimincho { font-family: "Sawarabi Mincho"; }




html{

}


body{
    background: #8eb4d9 url(https://placehold.jp/24/99cc99/339933/350x150.png?text=../image/heven.png) 85% ;
    background-repeat: repeat-y;
    margin:0;
    width: 100%;


    font-family: Sawarabi Mincho ;
    line-height: 64px;
    padding: 0;
    font-size: 16px;
    color: #ffffff;


}
h1{
    text-align: right;
    font-size: 120px;
    padding: 300px 0 0 500px/*　*/;
}
header{background: url(https://placehold.jp/24/99cc99/339933/350x150.png?text=../image/top.png) no-repeat 10% ;
}
footer{
    width: 100%;
    /*hight: 8561px;*/
    height: 8561px;
    margin: auto;
    /*background-coior:#ffffff;*/
    background-color:#ffffff;
    text-align: center;
}



h2{
    text-align: right;
    font-size: 72px;
}
h3{ /*margin-top: 145px;*/
    font-size: 32px;
    /*margin-align:left;*/
}

.about{
     text-align: right;
     margin-bottom:358px;
}

.section{
    font-size: 48px;
}

.shop{
     width:712px;
     height: 712px;
     margin-bottom: 1700;
       margin-left: 900;
     margin-top: 120px;
}



.gelato{
    margin-bottom: 900px;
    margin-left: 950px;
    /*margin-bottom: 114px;*/
}

.ice{
    margin-left: 600px;

}

.doble{
    margin-top: 115px;
}

.pan{
    margin-right: 12.5%;
    margin-left: 12.5%;
    margin-left: 435px;

}

.painting{
    margin-bottom: 94px;

}
.draw{
    margin-right: 12.5%;
    margin-left: 12.5%;
    position: relative;

}
.mask{
    margin-right: 12.5%;
    margin-left: 12.5%;
    position: absolute;

}
.pinokio{
    margin-bottom: 130px;
}
.sinyoria{
    margin-bottom: 151px;
}

.big{
    width:100%;
    margin-right: 12.5%;



}