JSFiddle - React, Tailwind, and code Playground

by darcyclarke

HTML

<nav>
    <ul>
        <li><a href="#" data-title="Home">Home</a>
        <li><a href="#" data-title="News">News</a>
        <li><a href="#" data-title="About">About</a>
        <li><a href="#" data-title="Blog">Blog</a>
        <li><a href="#" data-title="Contact">Contact</a>
    </ul>
</nav>
            
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ultrices neque ac sapien ullamcorper dapibus. Ut a massa tortor, quis interdum augue. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Pellentesque pulvinar, purus sed egestas vulputate, quam urna sollicitudin quam, eget tincidunt nisl augue a mi. Curabitur arcu sapien, facilisis quis semper ut, dictum varius justo. Nam in lacus sit amet lacus sollicitudin dignissim at quis felis. Mauris dignissim blandit erat, et fringilla magna pharetra a. Cras ullamcorper cursus erat ac sollicitudin. Sed dolor lacus, molestie eu interdum a, vestibulum non elit. Phasellus id euismod magna. Nulla et est mi, sit amet porta eros. Sed a tellus quis magna scelerisque pretium vitae eget lorem. Morbi erat mauris, malesuada at dictum in, ultricies a nisl. Morbi adipiscing, quam vitae euismod volutpat, nunc felis vulputate felis, vitae feugiat odio justo vel quam. Fusce sodales ipsum eget ligula sodales aliquet. Mauris facilisis, mauris a sollicitudin commodo, arcu felis sagittis dui, nec luctus nunc justo non nibh.

<p>Etiam nec velit quis tortor porttitor pulvinar. Vivamus rutrum molestie justo, eu ultricies turpis pulvinar quis. Nulla bibendum venenatis feugiat. Pellentesque sed dolor tellus. Nunc sed orci imperdiet metus rutrum sodales nec in sapien. Donec auctor vulputate fermentum. Nullam sit amet elit vitae nisl dictum aliquet. Sed lacus nisl, blandit quis pharetra a, ultrices sed quam. Aliquam pharetra mi in metus convallis sed varius dui faucibus. Proin consectetur lorem non lacus ultrices vel interdum est molestie. Nam pretium elit ac eros molestie lacinia. Nulla augue...

CSS

*, *:before, *:after { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }

body, ul, li, nav, a {
    margin: 0;
    padding: 0;
}
body {
    font: 14px/24px Arial, Helvetica, sans-serif;
    -webkit-font-smoothing: antialiased;
}

p {
    padding: 0 40px;
}

nav {
    background: #000;
    margin: 0 0 30px 0;
}
nav li {
    display: inline-block;
    position: relative;
    overflow: hidden;
}
nav li a {
    position: relative;
    color: #fff;
    text-decoration: none;
    font-weight: bold;
    display: block;
    padding: 10px 20px;
    -webkit-transition: all 0.25s;
}
nav li a:before {
    content: attr(data-title);
    width: 100%;
    height: 100%;
    position: absolute;
    padding: 10px 20px;
    top: 100%;
    left: 0;
    background: red;
}

nav a:hover {
    -webkit-transform: translateY(-100%);
}