JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.3.1/css/foundation.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.3.1/js/foundation.min.js"></script>

<ul class="mega-menu-container menu" data-dropdown-menu data-click-open="true" data-disable-hover="true">
  <li>
    <a href="/">Logo</a>
  </li>
  <li class="mega-menu">
    <a href="#"><i class="ion-android-menu"></i> <span>Meny</span></a>
    <ul class="menu">
      <li>
        <div class="medium-2 columns">
          <h4>Ideen</h4>
          <ul>
            <li>
              <a href="/article-list.html">Artikkel list</a>
            </li>
            <li>
              <a href="/article.html">Artikkel</a>
            </li>
          </ul>
        </div>
        <!--end of .column-->
        <div class="medium-2 columns">
          <h4>Hva gjør vi?</h4>
          <ul>
          </ul>
        </div>
        <!--end of .column-->
        <div class="medium-2 columns">
          <h4>Proff</h4>
          <ul>
          </ul>
        </div>
        <!--end of .column-->
        <div class="medium-2 columns">
          <h4>Kunnskapsenter</h4>
          <ul>
          </ul>
        </div>
        <!--end of .column-->
        <div class="medium-2 columns end">
          <h4>Om oss</h4>
          <ul>
          </ul>
        </div>
      </li>
    </ul>
  </li>
  <li class="menu-search-bar">
    <div class="search">
      <i class="search-icon ion-android-search"></i>
      <input name="search">
    </div>
  </li>
</ul>

<section class="header">
  <img src="//placehold.it/2000x500" alt="">
</section>

<div class="row">
  <div class="large-12 columns">
    <section class="article-summary">
      <h1>Tittel</h1>
      <p>To insure the greatest efficiency in the dart, the harpooneers of this world must start to their feet from out of idleness, and not from out of...

SCSS

$black: #2F2F2F;
$white: #ffffff;
$gray: #efefef;
$darker-gray: #D8D8D8;
$dark-gray: #616161;

//grid-row-width
$grid-row-width: 1400px;
$grid-column-align-edge: false;

.menu {
  position: relative;
}

.menu > li {
  display: inline-block;
  height: 100%;

  a {
    line-height: inherit;
  }
}

.mega-menu-container {
  background: #eee;
  height: 3rem;
  display: flex;
  align-items: center;

  .is-active {
    background: $dark-gray;

    a {
      color: $white;
    }
  }

  a {
    color: $black;
  }

  .is-dropdown-submenu-parent.mega-menu {
    position: static;
  }

  .mega-menu .is-dropdown-submenu {
    left: 0;
    right: 0;
    top: 3rem;
    padding: 1rem;
    position: absolute;
    border-top: 0;
    background: $dark-gray;
    color: $white;

    a {
      color: $white;
    }

    ul {
      margin-left: 0;
      li {
        list-style: none;
      }
    }
  }

  .menu-search-bar {
    position: absolute;
    right: 1rem;
    width: 20rem;
    padding: 0.2rem;

    .search {
      position: relative;
      display: flex;
      align-items: center;
    }

    .search-icon {
      position: absolute;
      left: 10px;
    }

    input {
      width: 100%;
      height: 2.5rem;
      text-indent: 32px;
    }
  }
}

body {
  position: relative;
  margin: 0;
  padding-bottom: 8rem;
  min-height: 100%;
  overflow-x: hidden;
}

.article-list {
  .column {
    padding-left: 0;
  }

  .image-wrapper {
    position: relative;

    .image-text {
      position: absolute;
      width: 100%;
      height: 100%;
      top: 1rem;
      left: 1rem;

      p {
        margin-bottom: 0;
      }

      a {
        text-decoration: underline;
        position: absolute;
        bottom: 1.5rem;
      }
    }
  }
}

footer {
  position: absolute;
  display: flex;
  align-items: center;
  height: 4rem;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: $gray;
}

blockquote {
  border-left: 0;
  padding-top: 5rem;

  p {
    margin-bottom: 0;
  }

  .left-quote {
 ...