JSFiddle - React, Tailwind, and code Playground

HTML

<nav class="extra__list">
        <a class="extra__unit extra__unit_view_1" href="#ex1">Раз</a>
        <a class="extra__unit extra__unit_view_2" href="#ex2">Два</a>
        <a class="extra__unit extra__unit_view_3" href="#ex3">Три</a>
        <a class="extra__unit extra__unit_view_4" href="#ex4">Четыре</a>
</nav>

CSS

.extra__list { 
    display: table;
    width: 100%;
}
.extra__unit {
    display: table-cell;
    height: 122px;
    width: 25%;
    text-align: center;
    vertical-align: middle;
    font-size: 24px;
    border-style:solid;
    border-width:10px 5px;
    border-color:#FFF;
    background:green;
}
a:hover {
 border-color:green;
}