JSFiddle - React, Tailwind, and code Playground

HTML

<body>
    <div id="wrapper">
        <header>
            <div class="logo"><a href="index.html"><img src="http://i.imgur.com/eWLyoIY.png"/></a></div>
            <div class="chapter-logo"><a><img src="http://i.imgur.com/RPIvgdD.png"/></a></div>
        </header>
        <nav>
            <ul class="menu">
                <li><a href="index.html">Home</a>
                
                <li class="dropdown"><a href="">About ▾</a>
                    <ul class = "sub-menu">
                        <li><a href="history.html">History</a>
                        </li>
                        <li><a href="brothers.html">Brothers</a>
                        </li>
                    </ul>
                <li class = "dropdown"><a href="">Philanthropy ▾</a>
                    <ul class="sub-menu">
                        <li><a href="kovacs.html">Kovacs Color Run</a>
                        </li>
                        <li><a href="greekgod.html">Greek God</a>
                        </li>
                    </ul>
                
                <li><a href="membership.html">Membership</a>
                <li><a href="contact.html">Contact</a>
                
            </ul>
        </nav>


<div class="index">
    <div class ="letter">
        <p><b><br>Welcome to the official website for the New York Iota chapter of Phi Kappa Psi at Binghamton 

University! Here you will be able to learn about us, and get a brief introduction to Greek Life at 

Binghamton. If you have any questions or simply want to learn more information, feel free contact us at 

any time.</b></br> 

        <br><b><font color ="#22674A">Carl Hashem (Chapter President)</b></font></br>
    </div>
</div>
<div class = "news-section">
<table class ="news">
    <tr>
    <td class ="social">
        <h4 align="center">Connect</h4>
        <a href ="http://instagram.com/phipsibing"><img src="http://i.imgur.com/1GhbSOj.png"/></a>
        <a href="https://twitter.com/phi_psi_bing"><img...

CSS

html {
        height:100%;
        margin:0;
        padding:0;
    }
    #wrapper {
        min-width:1000px;
        min-height:100%;
        position:relative;
    }
    body {
        margin:0;
        padding:0;
        height:100%;
    }
    
    header {
        height:100px;
        width:100%;
        background:black;
        margin:0 auto;
    
    }
    
    .logo{
        padding-left:10px;
        float:left;
        padding-top:5px;
    }
    
    .chapter-logo {
        float:right;
        padding-top:15px;
        padding-right:10px;
    }
    
    /* Start MENU styling*/
    
    .menu{
        margin:0 auto;
        padding:0 ;
        text-align:center;
        clear:both
    }
    
    ul.menu {
        background-image: -o-linear-gradient(bottom, #ACB5B5 0%, #E2F0EA 100%);
        background-image: -moz-linear-gradient(bottom, #ACB5B5 0%, #E2F0EA 100%);
        background-image: -webkit-linear-gradient(bottom, #ACB5B5 0%, #E2F0EA 100%);
        background-image: -ms-linear-gradient(bottom, #ACB5B5 0%, #E2F0EA 100%);
        background-image: linear-gradient(to bottom, #ACB5B5 0%, #E2F0EA 100%);
        height: 40px;
        width: 100%;
        border-left:solid 1px #22674A;
        white-space: nowrap;
        text-align:center;
    }
    
    ul.menu > li {
        position: relative;
        display:inline-block;
        list-style:none;
        text-align:center;
        width:20%;
        border-style:1px #22674A;
        font-family: "Open Sans", sans-serif;
        font-weight:700;
    }
    
    /*sub menu styling*/
    
    ul.menu li:first-child a {
        border-left:none;
    }
    
    ul.menu ul li:first-child {
        border-bottom:solid 1px #22674A;
    }
    
    ul.menu ul li:nth-child(2) {
        border-bottom:solid 1px #22674A;
    }
    
    ul.menu ul li:last-child{
        border-bottom:none;
    }
    
    ul.menu ul li a {
        border:none;
    }
    ul.menu ul {
        background-image:...