JSFiddle - React, Tailwind, and code Playground

by Alexandru Gatea

HTML

<div class="global-nav">
    <!-- Top Bar -->
    <div class="global-nav-top-bar">
        <div class="global-nav-container">
            <div class="global-nav-logo"><a class="logo" title="Smart Redeem" href="http://iredeem.local.reward4d.com/"> <img src="http://iredeem.local.reward4d.com/static/version1557238722/frontend/Iredeem/default/en_US/images/logo.svg" alt="Smart Redeem" width="230" height="43" /> </a></div>
            <div class="global-nav-links">
                <ul class="global-nav-list">
                    <li class="list-item"><a class="list-item-link" href="#!" target="_blank">Help</a></li>
                    <li class="list-item"><a class="list-item-link" href="#!" target="_blank">Contact</a></li>
                    <li class="list-item"><a class="list-item-link" href="#!" target="_blank">About</a></li>
                    <li class="list-item highlight"><a class="list-item-link" href="#!" target="_blank">Log Off</a></li>
                </ul>
            </div>
        </div>
    </div>
    <!-- Middle Bar -->
    <div class="global-nav-middle-bar">
        <div class="global-nav-container">
            <div class="global-nav-menu">
                <ul class="global-nav-list">
                    <li class="list-item"><a class="list-item-link" href="#!" target="_blank">Manage</a></li>
                    <li class="list-item"><a class="list-item-link" href="#!" target="_blank">Earn</a></li>
                    <li class="list-item active"><a class="list-item-link" href="#!" target="_blank">Redeem</a></li>
                </ul>
            </div>
            <div class="global-nav-account-details">
                <div class="welcome"><span>Welcome, <span class="firstname">John</span></span>
                </div>
                <div class="account-info"><span class="points">500000</span> <span class="currencySymbol">Points</span> <span class="separator">|</span> <span class="card-details">Platinum Card ... 7545</span></div>
           ...