JSFiddle - React, Tailwind, and code Playground

by Terry Mun

HTML

<html>
<head>
<title> Holy Grail </title>
</head>
<body>

<div id = "container">

  <div class = "section1">
    <div class = "header show"> header </div>
  </div>
  
  <div class = "section2">
    <div class = "column">
      <div class = "content1 show"> content 1</div>
      <div class = "content2 show"> content 2</div>
    </div>  
      <div class = "content3 show"> content 3</div>
  </div>

  <div class = "section3">
    <div class = "footer show"> footer</div>
  </div>

</div>

</body>
</html>

CSS

* {
  box-sizing: border-box;
}

body{
  background-color: #D3D3D3;
}

#container{
  display: flex;
  flex-direction: column;
  width: 100%;
  gap: 10px;
  padding: 20px;
}

.section1{
  display: flex;
  justify-content: center;
}

.section2{
  display: flex;
  justify-content: center;
  gap: 10px;
}

.column{
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.show{
  padding: 20px;
  border: 2px black solid;
  width: 100%;
}
.section3{
  display: flex;
  justify-content: center;
}