JSFiddle - React, Tailwind, and code Playground

HTML

{% if language_code == 'en' %}
    {% set urlBase = '' %}
{% else %}
    {% set urlBase = '/' ~ language_code %}
{% endif %}
<!DOCTYPE html>
<html lang="{{ language_code }}"
    {% if language_code == 'ar' or language_code =='ur' %}dir="rtl"{% endif %}
    {% if is_print %}class="print-view"{% endif %}>
  <head>
    {% block html_head_container %}
      {{ function('enqueue_language_style', 'style') }}
      {% include 'partials/html-header.twig' %}
      {% block head %}
      <meta name="theme-color" content="#FFFFFF">
      <link rel="manifest" href="{{theme.path}}/manifest.960190a2.json">
      {% endblock %}
      {% block scripts_head %}
      {% include 'partials/scripts-field-segment.twig' %}
      {% include 'partials/scripts-google-analytics.twig' %}
      {% endblock %}
    {% endblock %}
  </head>

  <body data-template="base.twig" class="{% set _bodyClass = block('body_class') %}{% if _bodyClass %} {{ _bodyClass|trim }}{% endif %}">
    <div class="page-wrapper">
      <a class="sr-only sr-only-focusable" href="#content">{{__('Skip to main content', 'accessnyctheme')}}</a>
      {% block header %}
        <header class="relative">
          <div class="flex justify-between py-1 px-3 print:block">
            {% spaceless %}
            <div class="flex-none">
              <svg class="icon icon-logo-nyc">
                <use xlink:href="#icon-logo-nyc"></use>
              </svg>
              <span class="text-font-size-xsmall px-1 text-color-grey-mid hidden screen-desktop:inline-block">{{__('Official website of the City of New York', 'accessnyctheme')}}</span>
            </div>
            {% endspaceless %}

            <div class="js-text-controller c-text-controller print:hidden">
              {% spaceless %}
              <a class="js-text-controller-toggle c-text-controller__toggle" href="#text-controls">
                <svg class="icon icon-ui-settings">
                  <use xlink:href="#icon-ui-settings"></use>
                </svg>
 ...

CSS

/**
 * Nav
 */

// Dependencies
@import 'config/fonts';
@import 'config/colors';
@import 'config/typography';
@import 'config/media';
@import 'config/direction';
@import 'config/dimensions';

// Declarations
@mixin nav-icon {
  svg {
    text-decoration: none;
  }

  .icon {
    margin-#{$text-direction-end}: .3em;
    vertical-align: middle;
    margin-top: -2px
  }
}

.nav-inline {
  @include typography-nav();
  list-style: none;
  text-align: $text-direction-end;
  flex: 1 1 auto;
  margin: 0;
  padding: 0;

  a {
    display: inline-block;
    margin-#{$text-direction-start}: 1em;
  }

  .active {
    font-weight: $font-weight-bold;
  }

  @include nav-icon;
}

.nav-block {
  @include typography-nav();
  list-style: none;
  margin: 0;
  padding: 0;

  a {
    display: block;
    border-bottom: 1px solid $color-grey-dark;
    padding: $spacing-base 0
  }

  .active {
    font-weight: $font-weight-bold;
  }

  @include nav-icon;
}