JSFiddle - React, Tailwind, and code Playground

by briggs_w

HTML

<body>
    <div class = "container">
        <div class = "row">
            <div class = "banner">
                <div class = "bannerimg">

                </div>
            </div>
        </div>
        <div class = "row">
            <div class = "col-md-2">
                <div class = "navigation">
                    <div class = "sidenav1">
                        <ul class = "list">
                            <li><a href = "#">Home</a></li>
                            <li><a href = "#">Track</a></li>
                            <li><a href = "#">Program</a></li>
                            <li><a href = "#">Vehicles</a></li>
                            <li><a href = "#">Prices</a></li>
                            <li><a href = "#">Photos</a></li>
                            <li><a href = "#">Our Staff</a></li>
                            <li><a href = "#">Comments</a></li>
                            <li><a href = "#">Links</a></li>
                            <li><a href = "#">Contact</a></li>
                            <li><a href = "#">About Us</a></li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class = "col-md-8">
                <div class = "mainContent">

                </div>
            </div>
        </div>
    </div>

CSS

.bannerimg
{
    background-color: black;
    border: 1px solid yellow;
    height: 125px;
    max-width: 100%;    
    display: block;
}

.list
{
    list-style-type: none;
    margin-left: -10px;
}

.sidenav1
{
    background-color: orange;
    border: 1px solid yellow;
    max-height: 40%;
    width: 150px;
    margin-top: 20px;
    position: absolute;
    right: 0px;
    top: 0px;
}

.mainContent
{
    border-color: orange;
    border: 1px solid yellow;
    margin-top: 20px;
    width: 70%;

}