JSFiddle - React, Tailwind, and code Playground

by EikHunter

HTML

<header class="hd-Header">
  <div class="hd-Header_Inner">
    <div class="hd-Header_Body">
      <div class="hd-Header_Left">
        <div class="hd-Header_LogoContainer">
          <div class="hd-Header_Logo">
          Logo
          </div>
        </div>
      </div>
      <div class="hd-Header_Right">
        <div class="nav-Navigation">
          <ul class="nav-Navigation_Items">
            <li class="nav-Navigation_Item">
              <a href="#" class="nav-Navigation_Link">Nav 1</a>
            </li>
            <li class="nav-Navigation_Item">
              <a href="#" class="nav-Navigation_Link">Nav 2</a>
            </li>
            <li class="nav-Navigation_Item">
              <a href="#" class="nav-Navigation_Link">Nav 3</a>
            </li>
            <li class="nav-Navigation_Item">
              <a href="#" class="nav-Navigation_Link">Nav 4</a>
            </li>
            <li class="nav-Navigation_Item">
              <a href="#" class="nav-Navigation_Link">Nav 5</a>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</header>

<section class="sec-Section">
  <div class="sec-Section_Inner">
    <div class="sec-Section_Columns">
      <div class="sec-Section_Column sec-Section_Column-content">
        <div class="sec-Section_Content">
          <h1 class="sec-Section_Title">Lorem ipsum dolor sit amet.</h1>
          <p class="sec-Section_Text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eum, voluptate.</p>
        </div>
      </div>
      <div class="sec-Section_Column">
        <div  class="sec-Section_ImageContainer">
          <div class="sec-Section_Image">
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

<section class="sec-Section">
  <div class="sec-Section_Inner">
    <div class="sec-Section_Columns">
      <div class="sec-Section_Column">
        <div  class="sec-Section_ImageContainer sec-Section_ImageContainer-left">
          <div...

CSS

.hd-Header {
    border-bottom: 1px solid #444
  }
  
  .hd-Header_Inner {
    padding-right: 15px;
    padding-left: 15px;
  }

  .hd-Header_Body {
    justify-content: space-between;

    display: flex;
  }

  .hd-Header_Left {
    align-items: center;

    display: flex;
  }

  .hd-Header_Logo {
    justify-content: center;
    align-items: center;
    
    display: flex;
    width: 150px;
    height: 40px;

    background-color: #999;
    
    color: #fff;
  }

  .nav-Navigation_Items {
    display: flex;
    margin-right: -15px;
    margin-left: -15px;
    padding: 0;

    list-style: none;
  }

  .nav-Navigation_Item {
    margin-right: 15px;
    margin-left: 15px;
  }
  
  .sec-Section_Columns {
    display: flex;
    min-height: 550px;
  }
  
  .sec-Section_Column {
    flex: 1;
    
    display: flex;
  }
  
  .sec-Section_Content {
    flex-direction: column;
    justify-content: center;
    
    display: flex;
    width: 80%;
    margin: 0 auto;
  }
  
  .sec-Section_ImageContainer {
    flex: 1;
    
    display: flex;
  }

  .sec-Section_Image {
    flex: 1;

    display: block;

    background-color: #999;
    background-image: url(http://www.deutzukonline.co.uk/wp-content/uploads/2017/06/placeholder-840x630-1.png);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
  }