JSFiddle - React, Tailwind, and code Playground

by Ashish Mishra

HTML

<a href="#" class="header-button">View Products</a>
<a href="#" class="header-button middle">View Products</a>

CSS

a.header-button {
    display: block;
    background-color:#
            
}

a.header-button:hover {
    color: #e8ddc8;
    text-decoration: underline;
}

.header-button {
    background-color:#031634;
    color:#e8ddc8;
    padding: 10px 5px 10px 5px;
    border-radius: 5px;
    text-align:center;
     position:absolute;
        top:10;
        left:50%;
        width:100px;
        height:30px;
        margin:0px 0 0 -50px;   
}
.middle{
    
position:absolute;
        top:50%;
        left:50%;
        width:100px;
        height:30px;
        margin:-15px 0 0 -50px;    
}