JSFiddle - React, Tailwind, and code Playground

by oti ext

HTML

<div class="wrap">
    <div class="header  fixed">
        ヘッダーテキスート
        <div class="tkg"></div>
    </div>

    <div class="contents">
        コンテンツテキスート<br>
        コンテンツテキスート<br>
        コンテンツテキスート<br>
        コンテンツテキスート<br>
        コンテンツテキスート<br>
        コンテンツテキスート<br>
        コンテンツテキスート<br>
        コンテンツテキスート<br>
        コンテンツテキスート<br>
        コンテンツテキスート<br>
        コンテンツテキスート<br>
        コンテンツテキスート<br>
        コンテンツテキスート<br>
        コンテンツテキスート<br>
        コンテンツテキスート<br>
        コンテンツテキスート<br>
        コンテンツテキスート<br>
        コンテンツテキスート<br>
        コンテンツテキスート<br>
        コンテンツテキスート<br>
        コンテンツテキスート<br>
        コンテンツテキスート<br>
        コンテンツテキスート<br>
        コンテンツテキスート<br>
        コンテンツテキスート<br>
        コンテンツテキスート<br>
        コンテンツテキスート<br>
        コンテンツテキスート<br>
        コンテンツテキスート<br>
        コンテンツテキスート<br>
        コンテンツテキスート<br>
        コンテンツテキスート<br>
        コンテンツテキスート<br>
        コンテンツテキスート<br>
        コンテンツテキスート<br>
        コンテンツテキスート<br>
        コンテンツテキスート<br>
        コンテンツテキスート<br>
        コンテンツテキスート<br>
        コンテンツテキスート<br>
        コンテンツテキスート<br>
        コンテンツテキスート<br>
        コンテンツテキスート<br>
        コンテンツテキスート<br>
        コンテンツテキスート<br>
        コンテンツテキスート<br>
        コンテンツテキスート<br>
        コンテンツテキスート<br>
        コンテンツテキスート<br>
        コンテンツテキスート<br>
        コンテンツテキスート<br>
        コンテンツテキスート<br>
        コンテンツテキスート<br>
        コンテンツテキスート<br>
        コンテンツテキスート<br>
        コンテンツテキスート<br>
        コンテンツテキスート<br>
        コンテンツテキスート<br>
        コンテンツテキスート<br>
        コンテンツテキスート<br>
        コンテンツテキスート<br>
        コンテンツテキスート<br>
        コンテンツテキスート<br>
        コンテンツテキスート<br>
        コンテンツテキスート<br>
        コンテンツテキスート<br>
        コンテンツテキスート<br>
        コンテンツテキスート<br>
        コンテンツテキスート<br>
        コンテンツテキスート<br>
        コンテンツテキスート<br>
        コンテンツテキスート<br>
        コンテンツテキスート<br>
        コンテンツテキスート<br>
        コンテンツテキスート<br>
        コンテンツテキスート<br>
        コンテンツテキスート<br>
        コンテンツテキスート<br>
        コンテンツテキスート<br>
        コンテンツテキスート<br>
       ...

CSS

*,*:before,*:after {margin: 0;padding: 0;box-sizing: border-box}
.header,.footer {width: 100%;height: 3em;text-align: center;line-height: 3}
.header {background-color: gold}
.footer {background-color: skyblue}

/* .headerと.footerを固定配置にする */
.fixed {position: fixed}
.header.fixed {top: 0}
.footer.fixed {bottom: 0}

.wrap {transform: scale(0.8,1)}
.tkg {
    position: absolute;
    right: 10px;
    bottom: 0px;
    width: 20px;
    height: 20px;
    background-color: tomato;
}