JSFiddle - React, Tailwind, and code Playground

by painotpi

HTML

<header>
    <div class="wrapperHeader">
        <div class="content">
            <section class="header-logo"> <a href="index.html"><img id="logoImage" src="assets/elements/logo.png" alt="LOAI Design Studio Logo"/></a>

            </section>
            <section class="header-menu">
                <nav id="MainMenu">
                    <ul>
                        <li><a class="active" href="index.html">Home</a>
                        </li>
                        <li id="PortfolioMenu"><a id="Portfolio" href="#">Portfolio</a>

                            <ul class="subMenu">
                                <li><a href="web-design.html">Web Design</a>
                                </li>
                                <li><a href="visual-identity.html">Visual Identity</a>
                                </li>
                                <li><a href="photography.html">Photography</a>
                                </li>
                            </ul>
                        </li>
                        <li><a href="testimonials.html">Testimonials</a>
                        </li>
                        <li><a href="about.html">About Me</a>
                        </li>
                        <li><a href="contact.html">Get In Touch</a>
                        </li>
                        <li><a class="getStartedButton" href="get-started.html">Get Started</a>
                        </li>
                    </ul> <a href="#" id="SmartMenu">Menu<p id="SmartMenu-logo">LOAI Design Studio</p></a>

                </nav>
            </section>
        </div>
    </div>
</header>

CSS

/*Header*/
 .wrapperHeader {
    background-color: #FFFFFF;
    border-bottom: 1px solid #DDDDDD;
    width: 100%;
    padding: 15px 0px;
    z-index: 1000;
}
.content {
    width: 1000px;
    max-width: 100%;
    margin: auto;
}
.header-logo, #logoImage {
    width: 250px;
    max-width: 100%;
    display: inline-block;
    vertical-align: middle;
}
/*Main Menu*/
 .header-menu {
    width: 690px;
    max-width: 100%;
    display: inline-block;
    vertical-align: middle;
}
#MainMenu li {
    position: relative;
    padding: 15px;
    display: inline-block;
    right: 0px;
}