JSFiddle - React, Tailwind, and code Playground

HTML

<div class="compare_header_box">
            <span class="compare_header_box_title active">List</span>
            <div class="compare_header_box_items">
                <a href="./gp">gp</a>
                <a href="./in">in</a>
                <a href="./tw">tw</a>
                <a class="active" href="./fb">fb</a>
            </div>
        </div>

CSS

.compare_header_box{
            padding: 35px 30px;
            direction: rtl;
        }
        .compare_header_box_title{
            font-size: 30px;
            width: 100px;
            float: right;
            margin-right: 5px;
            margin-top: 4px;
        }
        .compare_header_box_items{
            width: 100%;
            border-bottom: 1px solid #ccc;
            direction: ltr;
        }
        .compare_header_box_items a{
            display: inline-block;
            font-size: 16px;
            padding: 15px 40px;
            
        }
        .compare_header_box_items a:hover{
            text-decoration: none;
            background-color: #f1f1f1;
            color: black;
        }
        .compare_header_box_items .active{
            border-top: 3px solid green;
            border-right: 1px solid #ccc;
            border-left: 1px solid #ccc;
            border-bottom: 1px solid white;
        }