JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="index.css">
</head>

<body>
    <div id="topblock">
        <div id="logo"><img
                src="https://ih1.redbubble.net/image.623987930.0192/st,small,507x507-pad,600x600,f8f8f8.u1.jpg" alt=""
                width="48px" height="48px"></div>
        <div class="listword"><a href="http://">lPhone</a></div>
        <div class="listword"><a href="http://">lPad</a></div>
        <div class="listword"><a href="http://">Mac</a></div>
        <div class="listword"><a href="http://">Watch</a></div>
        <div class="listword"><a href="http://">TV</a></div>
        <div class="listword"><a href="http://">Help</a></div>
    </div>
    <div id="field">
        <div id="title">Make someone's <span>Christmas</span></div>
        <input id="textinput" type="text" placeholder="Text your gift first......">
        <br>
        <input id="submit" type="submit" value="submit">
    </div>
    <div><img src="https://i02.appmifile.com/mi-com-product/fly-birds/poco-x6/PC/24098b66654b6a67397e0e69d64066d1.jpg"
            alt="" id="bottomimg"></div>
</body>

</html>

CSS

* {
    margin: 0;
}

#topblock {
    background-color: black;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 1%;
}

#logo {
    flex: none;
    border: 1px solid black;
    width: 30%;
}

.listword {
    flex: none;
    font-size: 18px;
    font-family: 'Times New Roman', Times, serif;
    border: 1px solid black;
    width: 10%;
}

.listword a {
    text-decoration: none;
    color: white;
    text-align: center;
}

#field {
    display: flexbox;
    background-color: rgb(0, 51, 25);
    text-align: center;
    height: 180px;
}

#title {
    padding: 20px;
    color: white;
    font-size: 40px;
    font-family: 'Times New Roman', Times, serif;
    font-weight: bolder;
}

#title span {
    color: red;
}

#textinput {
    width: 480px;
    height: 24px;
    border-radius: 10px;
    font-size: 12px;
}

#bottomimg {
    width: 100%;
}

input[type="submit"] {
    cursor: pointer;
    background-color: darkgray;
    color: black;
    border: 1px solid black;
    border-radius: 5px;
    font-size: 18px;
    margin-top: 18px;
}