JSFiddle - React, Tailwind, and code Playground

by 규연 황

HTML

<div class="header">header</div>
<div class="main">
    <p>main</p>
    <p>main</p>
    <p>main</p>
    <p>main</p>
    <p>main</p>
    <p><input type="text" style="width:100%" /></p>
    <p>main</p>
    <p>main</p>
    <p>main</p>
    <p>main</p>
    <p>main</p>
    <p>main</p>
    <p>main</p>
    <p>main</p>
    <p>main</p>
    <p>main</p>
    <p>main</p>
    <p>main</p>
    <p>main</p>
    <p>main</p>
    <p>main</p>
    <p>main</p>
    <p>main</p>
    <p>main</p>
    <p>main</p>
    <p>main</p>
    <p>main</p>
    <p>main</p>
    <p>main</p>
    <p>main</p>
    <p>main</p>
    <p>main</p>
    <p>main</p>
    <p>main</p>
    <p><input type="text" style="width:100%" /></p>
    <p>main</p>
</div>

CSS

.header {
    position:fixed;
    bottom:0;
    left:0;
    width:100%;
    height:40px;
    background:red;
}