JSFiddle - React, Tailwind, and code Playground

HTML

<div class="header">
        <div class="logo">
            <img src="https://p.qqan.com/up/2022-1/202214131256456.jpg" alt="">
            <h3>貓咪旅遊</h3>
        </div>
        <div class="wrap">
            <a href="#">HELP</a>
            <a href="#">SIGN UP</a>
            <a href="#">LOG in</a>
        </div>
    </div>

    <nav>
        <a href="#">關於我們</a>
        <a href="#">旅遊介紹</a>
        <a href="#">服務</a>
        <a href="#">聯絡我們</a>
    </nav>
    <div class="email">
        <input type="email" placeholder="請輸入您的電子郵件" class="email" > 
        <button>sumit</button> 
    </div>

CSS

*{
            padding: 0;
            margin: 0;
        }
        body{
            background-image: url(https://images.unsplash.com/photo-1682695796497-31a44224d6d6?ixlib=rb-4.0.3&ixid=M3wxMjA3fDF8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80);
            width: 100vw;
            height: 100vh;
        }
        .header{
            display: flex;
            position: relative;
        }
        .logo{
            display: flex;
        }
        .logo img{
            width: 100px;
            height: 100px;
            border-radius: 99em;
            margin: 10px;
        }
        .logo h3{
            line-height: 4;
            margin: 0 10px;
            color: #fff;
            font-weight:bold;
            font-size: 32px;
        }
        .wrap{
            position: absolute;
            top: 0;
            right: 0;
            margin: 10px 0;
        }
        .wrap a{
            text-decoration: none;
            display: inline-block;
            font-size: 32px;
            margin: 0 20px;
            color: #696969;
            border-radius: 10px;
            padding: 3px;
        }
        .wrap a:hover{
            background-color: #ffbf00;
            color:#fff
        }
        nav{
            display: flex;
            justify-content: center;
            margin: 30px 0 0;
        }
        nav a{
            text-decoration: none;
            display: inline-block;
            margin: 0 60px;
            color: #000;
            font-size: 24px;
            font-weight: 600;
        }
        
        .email{
            display: flex;
            justify-content: center;
            align-items: center;
            text-align: center;
            height: 500px;
            
        }
        .email input{
            width: 500px;
            height: 20px;
        }
        button{
            width: 50px;
            margin: 10px;
            padding: 5px;
            background-color: #fff;
      ...