JSFiddle - React, Tailwind, and code Playground

by Darren Galway

HTML

<div class="grid-container">
  <nav>
    <div class="logo">
      <img src="https://picsum.photos/200/200" alt="">
    </div>
    <div class="nav-section">
      <span>1-800-123-1234</span>
      <a href="">Contact Us</a>
    </div>
  </nav>
  <header></header>
  <main>
    <div class="col"><img src="https://picsum.photos/100/100" alt=""></div>
    <div class="col"><img src="https://picsum.photos/100/100" alt=""></div>
    <div class="col"><img src="https://picsum.photos/100/100" alt=""></div>
    <div class="col"><img src="https://picsum.photos/100/100" alt=""></div>
    <div class="col"><img src="https://picsum.photos/100/100" alt=""></div>
    <div class="col"><img src="https://picsum.photos/100/100" alt=""></div>
    <div class="col"><img src="https://picsum.photos/100/100" alt=""></div>
    <div class="col"><img src="https://picsum.photos/100/100" alt=""></div>
    <div class="col"><img src="https://picsum.photos/100/100" alt=""></div>
    <div class="col"><img src="https://picsum.photos/100/100" alt=""></div>
    <div class="col"><img src="https://picsum.photos/100/100" alt=""></div>
    <div class="col"><img src="https://picsum.photos/100/100" alt=""></div>
  </main>
  <footer></footer>
</div>

SCSS

body {
  font-family: sans-serif;
  background: #fff;
}

.grid-container {
  display: grid;
  grid-template-columns: repeat(12, minmax(auto, 1fr));
  grid-template-rows: 133px 50vh repeat(2, 1fr);
  margin: 0 auto;
}

nav,
header, 
main,
footer {
  padding: 1rem;
}

nav {
  grid-column: 3 / 11;
  grid-row: 1;
  display: flex;
  justify-content: space-between;
  
  .logo {
    border-radius: 50%;
    width: 100px;
    height: 100px;
    overflow: hidden;
  }

  .nav-section {
    display: flex;
    align-self: flex-end;
    
    span,
    a {
      margin: 0;
    }
    
    > *:not(:last-child) {
      margin-right: 1rem;
    }
  }
}

header {
  background: url('https://picsum.photos/1920/1080');
  background-size: cover;
  background-position: center center;
  grid-row: 2;
  grid-column: span 12;
}

main {
  grid-row: 3;
  grid-column: span 12;
}