JSFiddle - React, Tailwind, and code Playground

HTML

<div id="box">
    
</div>

CSS

#box {
    position:absolute;
    border:1px solid red;
    width:760px;
    height:30px;
    background:yellow;
    left: 50%;
    margin-left:-380px; /* half of the box */
}
@media only screen and (min-width: 768px) and (max-width: 979px) {
    #box{
        background:pink;
    }
}
@media only screen and (min-width: 480px) and (max-width: 767px)  {
    #box{
        width:460px;
        background:black;
        margin-left:-230px;
    }
}
@media only screen and (min-width: 321px) and (max-width: 479px)  {
    #box{
        width:300px;
        background:blue;
        margin-left:-150px;
    }
}
@media only screen and (max-width: 320px) {
    #box{
        background:grey;
    }
}