JSFiddle - React, Tailwind, and code Playground

by Mostafa Zeinivand

HTML

<div id = "topBanner">

    <h1>Some Text</h1>

</div>

asdasd<br/>asdasd<br/>asdasd<br/>asdasd<br/>asdasd<br/>asdasd<br/>asdasd<br/>asdasd<br/>asdasd<br/>asdasd<br/>asdasd<br/>asdasd<br/>asdasd<br/>asdasd<br/>asdasd<br/>asdasd<br/>asdasd<br/>asdasd<br/>asdasd<br/>asdasd<br/>asdasd<br/>asdasd<br/>asdasd<br/>asdasd<br/>asdasd<br/>asdasd<br/>asdasd<br/>asdasd<br/>asdasd<br/>asdasd<br/>asdasd<br/>asdasd<br/>asdasd<br/>asdasd<br/>asdasd<br/>asdasd<br/>asdasd<br/>

CSS

body{
    background:#d0e4f7;
}
#topBanner{
    position:fixed;

    background-color: #CCCCCC;
    width: 100%;
    height:150px;

    top:0;
    left:0;

    z-index:900;

    
    background: #87bcea; /* Old browsers */
background: -moz-linear-gradient(top,  #87bcea 0%, #539fe1 0%, #73b1e7 31%, #d0e4f7 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#87bcea), color-stop(0%,#539fe1), color-stop(31%,#73b1e7), color-stop(100%,#d0e4f7)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #87bcea 0%,#539fe1 0%,#73b1e7 31%,#d0e4f7 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #87bcea 0%,#539fe1 0%,#73b1e7 31%,#d0e4f7 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #87bcea 0%,#539fe1 0%,#73b1e7 31%,#d0e4f7 100%); /* IE10+ */
background: linear-gradient(to bottom,  #87bcea 0%,#539fe1 0%,#73b1e7 31%,#d0e4f7 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#87bcea', endColorstr='#d0e4f7',GradientType=0 ); /* IE6-9 */


}
/*WebPage Header*/
h1{
    font-size:3em;
    color:blue;
    text-shadow:#CCCCCC 2px 2px 2px, #000 0 -1px 2px;

    position: absolute;
    width: 570px;

    left:50%;
    right:50%;
    line-height:20px;

    margin-left: -285px;

    z-index:999;
}