JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>


<html lang="en">

  <head>
    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">

    <!-- jQuery library -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

    <!-- Popper JS -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>

    <!-- Latest compiled JavaScript -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>

    <!-- font awesome -->
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous">

    <link rel="stylesheet" type="text/css" href="/static/news/style.css" />

    <title>News</title>
  </head>

  <body>
    <div id="sidebar">


    </div>

    <div id="content" class="container">


      <ul id="news_list">

        <li class="container">
          <img src="https://static01.nyt.com/images/2018/05/27/us/27dc-trump1/27dc-trump1-superJumbo.jpg?quality=90&auto=webp"></img>
          <h3>
            <a href="/news/5/">کم</a>
            <span class="fa-stack fa-xs">
				<i class="far fa-comment fa-stack-2x"></i>
				<strong class="fa-stack-1x fa-stack-text fa-inverse">0</strong>
			</span>
          </h3>
          <p>کم</p>
          <div class="d-flex justify-content-between foot">
            31 مه 2018، ساعت 12:47
            <a href="https://stackoverflow.com/questions/ask">کم</a>
          </div>
          <div class="clear"></div>
        </li>
        <tr>

          <li class="container">
            <img src="https://www.gannett-cdn.com/-mm-/8ad8e8880a1916d760c126ecb6524a140cbfe01f/c=0-54-1022-631/local/-/media/2016/06/29/USATODAY/USATODAY/636028101795412756-543415630-82979084.JPG?width=240&quality=50"></img>
            <h3>
              <a...

CSS

li a {
  color: green;
}

.foot{
    background-color: red;
}
#news_list {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

#news_list li+li {
  border-top: 2px solid lightgray;
}

#news_list li {
  padding: 30px 20px 30px 0;
}

#news_list li img {
  max-width: 300px;
  max-height: 200px;
  padding-right: 20px;
  float: left;
}

.clear {
  clear: both;
}

@font-face {
  font-family: IRANSans;
  font-style: normal;
  font-weight: 500;
  src: url(https://cdn.alibaba.ir/fonts/IRANSansWeb_Medium.c18ca26.eot);
  src: url(https://cdn.alibaba.ir/fonts/IRANSansWeb_Medium.c18ca26.eot?#iefix) format("embedded-opentype"), url(https://cdn.alibaba.ir/fonts/IRANSansWeb_Medium.7c1c84d.woff2) format("woff2"), url(https://cdn.alibaba.ir/fonts/IRANSansWeb_Medium.7bfa046.woff) format("woff"), url(https://cdn.alibaba.ir/fonts/IRANSansWeb_Medium.8948958.ttf) format("truetype");
}

body {
  text-align: right;
  direction: rtl;
  /*background: white url("images/bg.jpg") no-repeat;*/
  font-family: IRANSans, Helvetica, Arial, sans-serif;
  font-variant: normal;
  word-spacing: 0px;
  letter-spacing: 0px;
  text-indent: 0px;
  text-rendering: auto;
  text-transform: none;
}