JSFiddle - React, Tailwind, and code Playground

by booktu8

HTML

<div class="top">
top
</div>
<div class="banner">
banner
</div>
<div class="box clearfix">
<div class="left">
left
</div>
<div class="right">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
</ul>
</div>

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

CSS

* {
  margin: 0;
  padding: 0;
}

li {
  list-style: none;
}

.top {
  height: 50px;
  background-color: pink;
}

.banner {
  margin: 10px auto;
  width: 500px;
  height: 300px;
  background-color: #999;
}

.clearfix::before,
.clearfix::after {
  content: "";
  display: table;
}

.clearfix::after {
  clear: both;
}

.clearfix {
  *zoom: 1;
}

.box {
  width: 500px;
  /* height: 300px; */
  margin: 0 auto;
margin-top:30px;
}

.left,
.right {
  float: left;
}



.left {
  width: 100px;
  height: 300px;
  background-color: deeppink;
}

.right {
  width: 400px;
  height: 300px;
  background-color: skyblue;
}

.right li {
  float: left;
  margin-left: 10px;
  margin-bottom: 10px;
  width: 90px;
  height: 145px;
  background-color: yellow;

}

.footer {
  margin-top: 10px;
  height: 50px;
  background-color: #000;
}