JSFiddle - React, Tailwind, and code Playground

by Please_Reply

HTML

<nav class="container header-nav">
            <ul>
                <li><a href="#">Home</a></li>
                <li><a href="#cupcakes">Cupcakes</a></li>
                <li><a href="#cakes">Cakes</a></li>
                <li><a href="#events">Events</a></li>
                <li><a href="#contacts" class="btn nav-btn">Order Now!</a></li>
            </ul>
            <br>
        </nav>

CSS

.header-nav a:hover {
    border-bottom: 5px solid rgb(56,47,50); /*brown border-bottom*/
}

.header-nav .btn:hover {
    border-bottom: 5px solid rgb(255,144,171); /*pink-border-bottom*/
}