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">Logo</div>
            <div class="global-nav-links">
                <ul class="global-nav-list">
                    <li class="list-item">
                        <a href="#!" class="list-item-link" target="_blank">Help</a>
                    </li>
                    <li class="list-item">
                        <a href="#!" class="list-item-link" target="_blank">Contact</a>
                    </li>
                    <li class="list-item">
                        <a href="#!" class="list-item-link" target="_blank">About</a>
                    </li>
                    <li class="list-item">
                        <a href="#!" class="list-item-link" target="_blank">Log Off</a>
                    </li>
                </ul>
            </div>
        </div>
    </div>

    <!-- Middle Bar -->
    <div class="global-nav-middle-bar">
        <div class="global-nav-menu">
            <ul class="global-nav-list">
                <li class="list-item">
                    <a href="#!" class="list-item-link" target="_blank">Manage</a>
                </li>
                <li class="list-item">
                    <a href="#!" class="list-item-link" target="_blank">Earn</a>
                </li>
                <li class="list-item active">
                    <a href="#!" class="list-item-link" target="_blank">Redeem</a>
                </li>
            </ul>
        </div>
        <div class="global-nav-account-details">
            <div class="welcome">
                <span class="">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">Platinum Card ......

SCSS

// ========== TYPOGRAPHY ========== 
$theme-font-family:                     'Gotham', -apple-system, "Helvetica Neue", sans-serif !default;

// ========== COLOR ========== 
$white:                                 #ffffff;

$theme-primary-color:                   #333333                   !default;
$theme-secondary-color:                 #007dba                   !default;
$theme-tertiary-color:                  #003865                   !default;
$theme-accent-color:                    #db4082                   !default;

$theme-primary-font-color:              $white                      !default;
$theme-secondary-font-color:            $white                      !default;
$theme-tertiary-font-color:             $white                      !default;
$theme-accent-font-color:               $white                      !default;

$theme-header-background:               $white                      !default;
$theme-body-background:                 #f6f6f6                   !default;
$theme-footer-background:               $white                      !default;
$theme-footer-color:                    $theme-primary-color        !default;


.global-nav {
	
	&-container {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	
	&-top-bar {
		
	}
}