JSFiddle - React, Tailwind, and code Playground

by bluey

HTML

<div class='text-wrapper'>
    <div class='text_in_middle'>
        some text
    </div>
</div>
<div>
    <div class='bar'>
        &nbsp;
        <a href='' >Link 1</a> -
        <a href='' >Link 2</a> -
        <a href='' >Link 3</a> 
        
    </div>
</div>

CSS

.text_in_middle {
    text-align: center;
}

.bar {
    z-index: 500;
    position: fixed;
    top: 0;
    min-width: 100%;
    background-color: pink;
}
.text-wrapper {
    width: 100%;
	position: fixed;
	top: 0px;
	z-index: 2500;
}