JSFiddle - React, Tailwind, and code Playground

HTML

<header>
<div class="wrapper">
    <a href="#" class="logo"><img src="/img/header.jpg" alt="Ace Land Surveying"></a>
</div>
<nav>
    <div class="wrapper">
        <ul>
            <li><a href="">Home</a></li><li>
            <a href="">About Us</a></li><li>
            <a href="">Types of Surveys</a></li><li>
            <a href="">About Us</a></li><li>
            <a href="">Links</a></li><li>
            <a href="">Request a Survey</a></li><li>
            <a href="">Past Projects</a></li><li>
            <a href="">Contact</a></li><li>
            <a href="" class="last">SOQ</a></li>
        </ul>
    </div>
</nav>
</header>
<div class="wrapper">
    <div class="content">
        <div class="column left">
            <ul class="survey-type-list">
                <li><h2><a href="#type1">CLICK HERE</a></h2></li>
                <li><h2><a href="#type2">CLICK HERE</a></h2></li>
                <li><h2><a href="#type3">CLICK HERE</a></h2></li>
            </ul>
        </div>
        <div class="column right" id="survey-column">
            <div class="survey-type" id="type1">
                <p>111Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
                    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
                    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
                    proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
                </div>
                <div class="survey-type" id="type2">
                    <p>222Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                    quis nostrud exercitation ullamco...

CSS

header {
    float:left;
    width:100%;
    height:200px;
}
.wrapper {
    width:90%;
    margin:auto;
}
.content {
    float:left;
    width:100%;
    padding:20px;
    background:#02274b;
}
.column {
    min-height:500px;
    padding:20px;
    border-radius:20px;
    color:#fff;
    background-image:-webkit-linear-gradient(top, rgba(255,255,255,0.3), transparent);
    background:linear-gradient(to bottom, rgba(255,255,255,0.3), transparent);
}
.column.left {
    float:left;
    width:20%;
}
.column.right {
    float:right;
    width:60%;
}
.survey-type-list li{
    margin:0 0 4px 0;
    list-style:none;
}
.survey-type-list h2{
    font-size:13px;
}
#survey-column {
    overflow:hidden;
    height:460px;
}
.survey-type {
    float:left;
    width:100%;
    height:460px;
}