JSFiddle - React, Tailwind, and code Playground

by kuyabiye

HTML

<div class="container">
    <div class="header">
        <p> test </p>
    </div>
    <div class="body">
        <p>content is longer</p>
        <p>content </p>
        <p>content </p>
        <p>content </p>
        <p>content </p>
        <p>content </p>
        <p>content </p>
                <p>content </p>
        <p>content </p>
        <p>content </p>
        <p>content </p>
        <p>content </p>
        <p>content </p>
        <p>content </p>
                <p>content </p>
        <p>content </p>
        <p>content </p>
        <p>content </p>
        <p>content </p>
        <p>content </p>
        <p>content </p>
                <p>content </p>
        <p>content </p>
        <p>content </p>
        <p>content </p>
        <p>content </p>
        <p>content </p>
        <p>content </p>
                <p>content </p>
        <p>content </p>
        <p>content </p>
        <p>content </p>
        <p>content </p>
        <p>content </p>
        <p>content </p>
    </div>
</div>

CSS

.container{
    width: 600px;
}

.header{
	padding-bottom: 5px;
	font-size: 14px;
	position: fixed;
width: 100%;
	background-color: lightgrey;
}

.body{
    overflow-y:auto;
    padding-top: 60px;
}