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>

<header>
  <h1>this is a header</h1>
</header>
<div class="wrapper">
  <div class="container">
  <main class="main">
    <h2>Comme in join us</h2>
    <p>The Franklin Running club meets at 6:00pm every Thursday at the town square.Runs are three to five miles , at your own pace.
    </p>
  </main>
  <aside class="sidebar">
    <div class="widget"></div>
    <div class="widget"></div>
  </aside>
</div>
</div>


</body>
</html>

CSS

body {
  background-color: #eee;
}

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

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

header {
  color: #fff;
  background-color: #0072b0;
  border-radius: 0.5em;
}

.container {
  display: flex;
  width: 100%;
  border-spacing: 1.5rem 0;
}

/* 用于抵消  border-spacing，产生的边距 */
 

main {
  background: white;
  border-radius: 0.5em;
  width: 70%;
}

aside { 
  width: 30%;
  background: orange;
  border-radius: 0.5em;
  padding: 1.5em;
}