JSFiddle - React, Tailwind, and code Playground

HTML

<! DOCTYPE HTML>
<HTML lang="utf-8">
    <head>
    <meta charset="utf-8">
    <title>Coffee Shop</title>
    <meta name="Toro Coffee" content="偷肉開的咖啡店">
         <link rel="stylesheet" href= "css/coffee.css">
    </head>
    <body>
        <header> 
            <h5><img src="img/logo.png" class="logo" alt="logo" width="171" height="63"></h5>
            <nav class="summary">
                <ul>
                    <li><a href="#concept"> Concept</a></li>
                    <li><a href="#brownie">Brownie</a></li>
                    <li><a href="#tart">Tart</a></li>
                    <li><a href="#cookie">Cookie</a></li>
                    <li><a href="#access">Access</a></li>
                </ul> 
            </nav>
        </header>
        <article>
            <div> 
                <nav class="mainvisual"><img src="img/mainvisual.jpg" alt="大巧克力" width="1400"></nav>
                
            <section>
                <nav class="welcome"><h2 id="concept">concept</h2>
                榛果甜點~~~~期待大家光臨。
                </nav></section></div>
            <section>
                <h2 id="brownie">Browine</h2><br>
                <h3>果實巧克力布朗尼</h3><br>
                <div class = "mydiv">
                  <p>濃郁的巧克力非常濃郁。<br>味道扎實而豐富。<br>一塊:150</p>
                  <img src="https://images.dog.ceo/breeds/boxer/n02108089_1775.jpg">                
                </div>
            </section>
             <section>
                <h2 id="tart">Tart</h2><br>
                <h3>小型水果塔</h3><br>
                <img src="img/img-02.jpg">
                <p>口感鬆軟的水果塔<br>味道扎實而豐富。<br>一塊:三百</p>
            </section>            
            <section>
                <h2 id="cookies">Cookies</h2><br>
                <h3>各類果實餅乾</h3><br>
                <img src="img/img-03.jpg">
                <p>森林裡的動物也喜歡<br>風味強烈輕食餅乾<br>一塊:六十</p>
            </section>            
            <section>
                <nav class="contact"><h2 id="access">Access</h2><br>
             ...

CSS

.logo{
    
}
h5{
    text-align: center;
}
/* choice*/
.summary ul{
    font-size:red;
    margin: 0;
    padding: 10px;
    text-align: center;
    
}
.summary ul li{
  list-style-type: none; /* 取消選項符號*/
  font-size: 16px;
    display: inline; /* 表現成一列*/
    margin-right: 15px; /*選項 間隔*/
}
.summary ul li a{  /* 叫出 a 去改選項顏色*/
    
}
.summary ul li a:hover{ /* 當游標移上時*/
    color: red;
}
.mainvisual{
  margin: 0 auto;
}
.mainvisual img{
    width: 100%; 
    display: block;
    margin: 0 auto;
    max-width: 100%;
    height: auto;
   
}
H1{
    text-align: center;
}
H2{
    text-align: center;
    font-size: 35;
    color: coral;
    margin: 0;
    
}
H3{
    text-align: center;
    line-height: 1;
    margin: 5;
    
}
body{
    color: brown;
   text-align: center;
    margin: auto;
}
body img{
    margin: o auto;
}
/*
section img{
    float: right; 
}
*/
.mydiv {
  display: flex;
  justify-content: center;
}
section{
    overflow: hidden; 
}

.welcome{
      background-color:rgba(242, 159, 8, 0.6);
}
.contact{ /* 有效?????*/
    background-color:rgba(242, 159, 8, 0.6);
    overflow: hidden;
}
.pagetop{
    text-align: right;
}
.pagetop a:hover{
    color: brown;  /*游標過去的顏色 */
}
.copyright{
   border-top: solid;
    text-align: center
}