JSFiddle - React, Tailwind, and code Playground

by chuangchen

HTML

<!doctype html>
<html lang="en">

  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
  </head>

  <body>

    <div class="container">
      <header>
        <h1 class="page-heading">Ink</h1>
      </header>

      <nav>
        <ul class="site-nav">
          <li><a href="/">Home</a></li>
          <li><a href="/features">Features</a></li>
          <li><a href="/pricing">Pricing</a></li>
          <li><a href="/support">Support</a></li>
          <li class="nav-right">
            <a href="/about">About</a>
          </li>
        </ul>
      </nav>

      <main class="main tile">
        <h1>Team collaboration done right</h1>
        <p>Thousands of teams from all over the world turn to <b>Ink</b> to communicate and get things done.</p>
      </main>

      <!--login-->
      <div class="sidebar-top tile">
        <form class="login-form">
          <h3>Login</h3>
          <p>
            <label for="username">Username</label>
            <input id="username" type="text" name="username" />
          </p>
          <p>
            <label for="password">Password</label>
            <input id="password" type="password" name="password" />
          </p>
          <button type="submit">Login</button>
        </form>
      </div>

      <!--price / sign up -->
      <div class="sidebar-bottom tile centered">
        <small>Starting at</small>
        <div class="cost">
          <span class="cost-currency">$</span>
          <span class="cost-dollars">20</span>
          <span class="cost-cents">.00</span>
        </div>
        <a class="cta-button" href="/pricing">
          Sign up <a>
          </a>
        </a>
      </div>
    </div>
  </body>
</html>

CSS

: root {
  box-sizing: border-box;
}

*.:: before,
::after {
  box-sizing: inherit;
}

body {
  background-color: #709b90;
  font-family: Helvetica, Arial, sans-serif;
}

.container {
  display: grid;
  grid-template-columns: 2fr 1fr;
  /* 定义4个水平轨道, 等同于 grid-template-rows:auto auto auto auto; */
  grid-template-rows: repeat (4, auto);
  grid-gap: 1.5em;
  max-width: 1080px;
  margin: 0 auto;
}


header,
nav {
  /*从1号垂直网格线跨越到3号垂直网格线*/
  grid-column: 1 / 3;
  /*
  该网格项将跨越一个网格行。span 表示所要跨越的网格数量。
  */
  grid-row: span 1;
}

.main {
  grid-column: 1 / 2;
  /* 元素起始于第3条水平网格线，结束于第5条水平网格线*/
  grid-row: 3 / 5;
}

.sidebar-top {
  grid-column: 2 / 3;
  grid-row: 3 / 4;
}

.sidebar-bottom {
  grid-column: 2 / 3;
  grid-row: 4 / 5;
}

.tile {
  padding: 1.5em;
  background-color: #Eff;
}

.tile > :first-child {
  margin-top: 0;
}

.tile *+* {
  margin-top: 1.5em;
}

header {
  background: yellow;
}

nav {
  background: orange;
} 

.sidebar-top {
  background: green;
}

.sidebar-bottom {
  background: purple;
}