JSFiddle - React, Tailwind, and code Playground

by tony05060165

HTML

<!DOCTYPE HTML>
<html>
    <head>
        <meta charset="utf-8">
        <link rel="stylesheet" type="text/css" href="landingpage.css">
    <body background="https://images.unsplash.com/photo-1593685738244-13382e0f8526?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Mnx8JUU5JUJBJUE1JUU3JTk1JUI2JUU1JThCJTlFfGVufDB8fDB8fHww&auto=format&fit=crop&w=900&q=60/">

        <div class="list">
            <div class="logo"><img src="https://tw.hotels.com/_dms/header/logo.svg?locale=zh_TW&siteid=300000045&2&3ec60977"/></div>
            <div class="listword1">刊登旅宿</div>
            <div class="listword2">行程</div>
            <div class="listword3">支援</div>
            <div class="listword4">登入</div>
        </div>
    
        
        <div class="title">
        您想去哪    
        </div>
        <div class="field">
        <div class="field1"><input type="text" placeholder="地點"></div>
        <div class="field1"><input type="text" placeholder="日期"></div>
        <div class="field1"><input type="text" placeholder="人數"></div>
        <div class="submit"><input type="submit" vale="確認"></div>
        </div>
    </body>
</html>

CSS

body{
    background-size:cover
}
.list{
    display:flex;
    justify-content:flex:start;
    align-items:center;
    margin:40px      
}
.logo{
    flex:none;
    width:75%;
}
.listword1{
    flex:none;
    width:10%;
    color:#003D79;
    font-size:20px;
}
.listword2{
    flex:none;
    width:5%;
    color:#003D79;
    font-size:20px;
}
.listword3{
    flex:none;
    width:5%;
    color:#003D79;
    font-size:20px;
}
.listword4{
    flex:none;
    width:5%;
    color:#003D79;
    font-size:20px;
}
.title{
    text-align:center;
    color:white;
    font-weight:bold;
    font-size:40px;
    margin-top:150px;
}
.field{
    margin-top:20px;
    display:flex;
    justify-content:center;
    align-items:center;
}
.field1{
    flex:none;
    margin-right:2px;
}
.submit{
    margin-left:4px
}
input[type="submit"]{
    background:#003D79;
    color:white;
    border:0;
    border-radius:5px;
    padding:6px;
    cursor:pointer;
}
input[type="text"]{
    border-radius:5px;
    padding:8px;
    border:1px solid black
}