JSFiddle - React, Tailwind, and code Playground

by ckissi

HTML

<body>
  <header>
    <h1>Header</h1>
  </header>
  <div class="flex-container">
    <aside>
      <h2>Sidebar</h2>
      <ul>
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
      </ul>
    </aside>
    <main>
      <p>Main content goes here</p>
    </main>
  </div>
  <footer>
    <p>Footer content goes here</p>
  </footer>
</body>

CSS

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

header {
  background-color: #333;
  color: #fff;
  padding: 1rem;
}

.flex-container {
  display: flex;
  flex-grow: 1;
}

aside {
  background-color: #eee;
  width: 200px;
  padding: 1rem;
}

main {
  flex-grow: 1;
  padding: 1rem;
}

footer {
  background-color: #333;
  color: #fff;
  padding: 1rem;
}