JSFiddle - React, Tailwind, and code Playground

by tnhu

HTML

<body>
  <main id="react_root">
    <header>
      <auto-span-section>
        <img src="https://octoverse.github.com/assets/img/GitHub-Universe.svg" title="Logo" />
        <nav>
          <a href="#">Dashboard</a>
          <a href="#">Continuous Verification</a>
          <a href="#">Continuous Security</a>
          <a href="#">Setup</a>
        </nav>
      </auto-span-section>
    </header>
    
    <section>This section always has full width</section>
    
    <auto-span-section>Auto Span Section</auto-span-section>

    <footer>Footer</footer>
  </main>
</body>

CSS

:root {
  --black: #000;
  --white: #fff;
  --max-container-width: 1230px;
  --min-container-width: 768px;
}

html,
body,
body > main {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  min-width: var(--min-container-width);
}

auto-span-section {
  height: 100%;
  width: var(--max-container-width);
  margin: 0 auto;
  display: flex;
  align-items: center;
}

@media only screen and (max-width: 1230px) {
  auto-span-section {
    width: auto;
  }  
}

/* app specific styles */
body > main > header {
  height: 60px;
  background-color: var(--black);
  color: var(--white);
}

body > main > header > auto-span-section > img {
  height: 48px;
}

body > main > header > auto-span-section > nav {
  flex-grow: 1;
  text-align: right;
}

body > main > header > auto-span-section > nav a {
  display: inline-flex;
  margin-left: 15px;
  color: var(--white);
  text-decoration: none;
}