JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>
  <head>
    <title>Trickbd.com - Know for sharing | Bangladeshi first mobile based tech forum and community.</title>
    <link rel="stylesheet" type="text/css" href="style.css">
  </head>

  <body>
    <!-- header -->
    <div class="header">
      <div class="logo">
        <a href="https://trickbd.com/?theme_change=mobile"><img src="https://trickbd.com/wp-content/uploads/2022/01/23/logo.png" alt="Logo"></a>
      </div>
      <div class="login">
        <button type="button"> <a href="https://trickbd.com/wp-login.php">Log in</a></button>
        <button type="button"><a href="https://trickbd.com/wp-register.php">Sign up</a></button>
      </div>
    </div>

    <!-- navigation -->
    <div class="nav">
      <div class="left">
        <a href="https://trickbd.com/"><i class="fa fa-home"></i> Home</a>&nbsp;|&nbsp;
        <a href="https://trickbd.com/notification?tunseen=true"><i class="fa fa-bell"></i> Notifications</a>
      </div>
      <div class="right">
        <a href="https://trickbd.com/?payment_dashboard"> ৳ </a>
      </div>
    </div>

    <!-- featured post block -->
    <div class="container">

      <!-- featured  -->
      <div class="featured-post">
        <div class="left">
          <strong>Featured Post</strong>
        </div>
      </div>

      <!-- post block -->
      <div class="post-block">
         <div class="image">
            <img src="https://trickbd.com/wp-content/uploads/2021/09/18/right_back-200x200.png" alt="trickbd notice">
           </div>
        <div class="content">
          <h3>
            <a href="https://trickbd.com/trickbd-notice/751138">[Official Notice] সকল নোটিশ ও গুরুত্বপূর্ণ তথ্যসমূহ।</a>
          </h3>
          <p>Jan 24, 2022<span>&nbsp;|&nbsp;</span><a href="https://trickbd.com/trickbd-notice/751138#comments">253 Comments</a></p>
          <p>48,726</p>
        </div>
      </div>
    </div>


    <!-- hot post block -->
    <div class="container">

      <!-- hot  -->
      <div...

CSS

/* css reset */
* {
  outline: 0;
  padding: 0;
  margin: 0;
  border: 0;
}

html {
  background-color: #dcdee3;
  font-size: 14px;
  font-family: Verdana, Arial, sans-serif;
  scroll-behavior: smooth;
  overflow-x: hidden;
  font-size: 16px;

}

a {
  text-decoration: none;
}
a:visited {
  color: blue;
}

/* header */
.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #fff;
}
.logo {
  flex: 1;
}
.login {
  flex: 1;
  text-align: right;
}
button {
  cursor: pointer;
  padding: 6px;
  color: #fff;
  border: 1px solid #d9d9d9;
  background-color: transparent;
}

/* navigation */
.nav {
  background-color: #333;
  border-bottom: 2px solid #ff2f2f;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 4px 8px;
}
.nav .left {
  flex: 1;
}
.nav .right {
  flex: 1;
  text-align: right;
}
.nav .left a {
  color: #bdc1c9;
  text-decoration: none;
}
.nav .left a:hover, .nav .right a:hover {
  background-color: #ff2f2f;
  transition: 0.5s; 
}

.nav .right a {
  color: #000;
  background-color: #fff;
  border-radius: 50%; 
  padding: 4px 8px; 
}

.nav i {
  color: #fff;
  font-size: 18px;
}
/* featured post block */
.container {
  display: flex;
  flex-direction: column;
  padding: 14px 12px 8px 18px;
  margin: 0 -28px;
}
/* featured  */
.featured-post {
  display: flex;
  justify-content: space-between;
}
.featured-post .left {
  flex: 1;
  background-color: #f5f5f5;
  border: 1px solid #e6e8ed;
  padding: 4px;
  margin-left: 16px;
  margin-right: 16px;
}
.featured-post strong {
  font-weight: bold;
  color: black;
}

/* post block */
.post-block {
  display: flex;
  justify-content: space-between;
  background-color: #ffffff;
  padding: 6px;
  margin: 0 16px 0 16px;
  border-top: 1px solid #d9d9d9;
}
.post-block .image {
   flex: 1;
   display: flex;
}
.post-block .image img {
  object-fit: cover;
  width: 70px;
  height: 70px;
  border: solid 1px #ccc;
  margin-left: -15px;
}
.post-block...