JSFiddle - React, Tailwind, and code Playground

HTML

<div class='wrapper'>
      <header>
        <div class='header-logo'>
          <ul>
            <li>
              <img alt="Tree Logo" id="main-logo" src="https://s3-us-west-2.amazonaws.com/mikaimages/Logo.png" />
            </li>
            <li>
              <h1>Mika Kalathil</h1>
            </li>
          </ul>
        </div>
        <nav>
          <ul>
            <li>
              <a class="current" href="/">Home</a>
            </li>
            <li>
              <a href="/about">About</a>
            </li>
            <li>
              <a href="/projects">Projects</a>
            </li>
            <li>
              <a href="/contact">Contact</a>
            </li>
          </ul>
        </nav>
      </header>
      <section class='pages' id='home'>
        <h2>
          Web Designer/Developer
          <br>Freelancer</br>
        </h2>
        <div class='info-box'>
          <ul class='tab-selection'>
            <li class='active current-projects'>
              <a data-toggle='tab' href='#current-projects'>
                Current
                <br>Projects</br>
              </a>
            </li>
            <li class='secret'>
              <a data-toggle='tab' href='#secret'>
                The
                <br>
                Secret Shop
              </a>
            </li>
            <li class='favorite'>
              <a data-toggle='tab' href='#favorite'>
                Favorite
                <br>Links</br>
              </a>
            </li>
          </ul>
          <div class='tab-content'>
            <div class='tab-pane active' id='current-projects'>
              <h3>Current Projects</h3>
              <div class='tab-text'>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque sagittis vehicula ante, quis feugiat turpis tincidunt hendrerit. In aliquam quam vel neque aliquet egestas. Suspendisse potenti. Donec vestibulum justo id velit tempus, in facilisis lectus rutrum. Etiam...

CSS

/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS and SCSS file within this directory, lib/assets/stylesheets, vendor/assets/stylesheets,
 * or vendor/assets/stylesheets of plugins, if any, can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the top of the
 * compiled file, but it's generally better to create a new file per style scope.
 *

 */
/* http://meyerweb.com/eric/tools/css/reset/
   v2.0 | 20110126
   License: none (public domain)
*/
@import url(http://fonts.googleapis.com/css?family=Lora|Ubuntu|Tienne);
/* line 7, /home/mika/Mika/app/assets/stylesheets/_reset.scss */
html,
body {
  margin: 0;
  padding: 0;
  border: 0;
}

/* line 13, /home/mika/Mika/app/assets/stylesheets/_reset.scss */
h1, h2, h3, h4, h5, h6 {
  margin: 0;
  padding: 0;
  border: 0;
  vertical-align: baseline;
}

/* line 32, /home/mika/Mika/app/assets/stylesheets/_reset.scss */
div, span, applet, object, iframe,
p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}

/* HTML5 display-role reset for older browsers */
/* line 42, /home/mika/Mika/app/assets/stylesheets/_reset.scss */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block;
}

/* line 45, /home/mika/Mika/app/assets/stylesheets/_reset.scss */
body {
  line-height: 1;
}

/* line 48, /home/mika/Mika/app/assets/stylesheets/_reset.scss */
ol, ul {
 ...

JavaScript

var $window = $(window);

function wrap_element_link_mobile(object, path) {
    if ($(this).width() < 921 && !object.parent().is('a')) {
        console.log("wrapping");
        object.wrap("<a href='" + path + "'></a>");
    } else if ($(this).width() > 920 && object.parent().is('a')) {
        console.log("un-wrapping");
        object.unwrap();
    }
}

function resize_section() {
    var sectionMinHeight = $(window).height() - $('header').height() - $('footer').height() - 7;
    $('section').css('min-height', sectionMinHeight);
}
/* Functions For Web End
=========================== */

/* Called after document Load
================================ */
$(document).ready(function () {
    var $mainLogo = $('#main-logo');
    wrap_element_link_mobile($mainLogo, '/');
    resize_section();
    $window.resize(function () {
        wrap_element_link_mobile($mainLogo, '/');
        resize_section();
    });
});