CSS List UI Design

Disini saya akan membuat design list mengunakan HTML dan CSS

<div class="container">
    <div class="box">
        <h1>Latest Post</h1>
        <ul>
            <li>
                <div class="date">
                    <span>Mar</span>
                    <span>06</span>
                </div>
                <h3>
                    It is a long established fact that a reader will be distracted by the readable content of a page
                    when looking at its layout.
                </h3>
            </li>
            <li>
                <div class="date">
                    <span>July</span>
                    <span>18</span>
                </div>
                <h3>
                    Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown
                    printer took a galley of type and scrambled it to make a type specimen book.
                </h3>
            </li>
            <li>
                <div class="date">
                    <span>Aug</span>
                    <span>25</span>
                </div>
                <h3>
                    There are many variations of passages of Lorem Ipsum available, but the majority have suffered
                    alteration in some form, by injected humour, or randomised words which don't look even slightly
                    believable.
                </h3>
            </li>
            <li>
                <div class="date">
                    <span>Nov</span>
                    <span>09</span>
                </div>
                <h3>
                    Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of
                    classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock
                </h3>
            </li>
            <li>
                <div class="date">
                    <span>Dec</span>
                    <span>20</span>
                </div>
                <h3>
                    The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested.
                    Sections 1.10.32 and 1.10.33 from "de Finibus Bonorum et Malorum" by Cicero are also reproduced in
                    their exact original form
                </h3>
            </li>
        </ul>
    </div>
</div>

Berikut ini file css

@import url("https://fonts.googleapis.com/css2?family=Quicksand:wght@500&display=swap");
* {
  padding: 0;
  margin: 0;
  font-family: "Quicksand", sans-serif;
}
body {
  background: #fff;
}
.container {
  position: relative;
  width: 100%;
  min-height: 100vh;
  background: #ff6358;
}
.container .box {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 400px;
  background: #fff;
  padding: 20px 30px;
  box-sizing: border-box;
}
.container .box h1 {
  font-size: 25px;
  padding: 10px 0;
  border-bottom: 1px solid #ccc;
}
.container .box ul {
  position: relative;
  width: 100%;
}
.container .box ul li {
  list-style: none;
  position: relative;
  width: 100%;
  margin: 10px 0;
  cursor: pointer;
}
.container .box ul li:hover {
  background: #607d8b;
}
.container .box ul li .date {
  position: relative;
  width: 16%;
  display: inline-block;
  vertical-align: top;
  margin: 4px 4px;
}
.container .box ul li .date span {
  display: block;
  width: 100%;
  text-align: center;
}
.container .box ul li .date span:nth-child(1) {
  background: #f44336;
  color: #fff;
  font-size: 15px;
}
.container .box ul li .date span:nth-child(2) {
  background: #ccc;
  color: #607d8b;
  font-size: 30px;
}
.container .box ul li h3 {
  font-size: 13px;
  display: inline-block;
  width: 80%;
}