JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrapper">
                <ul class="nav">
                    <li class="home"><a href="#">Home</a></li>
                    <li class="location"><a href="#">Location</a></li>
                    <li class="itinerary"><a href="#">Itinerary</a></li>
                    <li class="photos"><a href="#">Howie & Mark</a></li>
                </ul>
            </div>
        <div class="card">
            <div class="sign">
                <ul class="mark">
                    <li>Howard & Mark's wedding beings</li><br>
                    <li>We start dancing</li><br>
                    <li>Everybody has fun</li>
                </ul>
            </div>
        </div>

CSS

html, body{
  height:100%;
}

body {
background-image: url("http://i.istockimg.com/file_thumbview_approve/20453608/2/stock-photo-20453608-wedding-sign.jpg");
background-repeat: no-repeat;
background-size: cover;
}
.wrapper {
    top: 10px;
    height: 175px;
    width: 1100px;  
    background-color: black;
    opacity: 0.8;
    margin: auto;
    border-radius: 10px;
    z-index: 0;

}
.card {
    display: inline-block;
    width: 700px;
    height: 350px;
    margin: 40px;
    background-color: white;
    border-radius: 20px;
    text-align: center;
}
.sign {
    margin: 35px;
    width: 617px;
    height: 267px;
    border: solid black;
    border-radius: 5px;
    font-style: oblique;
    font-weight: 600;
    text-align: center;
}
.mark {
    font-size: 35px;
    list-style-type: none;
}
ul.nav {
    display: inline;
    color: white;
    text-decoration: none;
    text-align: center;
    padding: 8px 15px;
    border-radius: 5px;
    text-align: auto;
}
ul.nav li {
    float: left;
    margin-left: 50px;
}

ul.nav li.home {
    padding: 35px 15px;
    margin: 20px;
    top: 15px;
    font-weight: 100;
    height: 55px;
    width: 130px;
    font-size: 40px;
}
ul.nav li.home:hover {
        background-color: #138f00;
        border-radius: 8px;
}
ul.nav li.location {
    padding: 35px 15px;
    margin: 20px;
    font-weight: 100;
    top: 15px;
    height: 55px;
    width: 180px;
    border-radius: 5px;
    font-size: 40px;

}
ul.nav li.location:hover {
    background-color: #138f00;
    border-radius: 8px;
}
ul.nav li.itinerary {
    padding: 35px 15px;
    margin: 20px;
    font-weight: 100;
    height: 55px;
    width: 200px;
    border-radius: 5px;
    font-size: 40px;
}
ul.nav li.itinerary:hover {
    background-color: #138f00;
    border-radius: 8px;
}
ul.nav li.photos {
    padding: 35px 15px;
    margin: 20px;
    margin-left: 40px;
    font-weight: 120;
    height: 55px;
    width: 250px;
    border-radius: 5px;
    font-size: 40px;
}
ul.nav...