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

body { margin: 10px; }

.extra__list {
    display: table;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    width: 100%;
    table-layout: fixed;
}

.extra__unit {
    display: table-cell;
    height: 122px;
    width: 25%;
    text-align: center;
    vertical-align: middle;
    font-size: 24px;
    border-radius: 3px;
    padding: 0 10px;
    color: #fff;
    text-decoration: none;
}
.extra__unit_view_1 { background: #0c0; }
.extra__unit_view_2 { background: #1d1; }
.extra__unit_view_3 { background: #2e2; }
.extra__unit_view_4 { background: #3f3; }

.extra__unit:hover {
    position: relative;
    font-size: 28px;
}

.extra__unit_view_1:hover { box-shadow: 0 0 0 5px #0c0, -5px 5px 15px 8px #222; }
.extra__unit_view_2:hover { box-shadow: 0 0 0 5px #1d1, -5px 5px 15px 8px #222; }
.extra__unit_view_3:hover { box-shadow: 0 0 0 5px #2e2, -5px 5px 15px 8px #222; }
.extra__unit_view_4:hover { box-shadow: 0 0 0 5px #3f3, -5px 5px 15px 8px #222; }