JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="http://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<div class="bg-white">
<div class="container py-4">
<div class="row">
<div class="col-9">
<div class="article_details_title mt-3">
<h1 class="font-weight-bold text-custom-blue-dark2">Example title test for test post</h1>
<p class="article_details_clue">Some text.</p>
</div>
<div class="article_details_img mt-3">
<img src="https://via.placeholder.com/768x350" alt="">
</div>
<div class="article_details_text">
<p class="article_details_text mt-3">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum dolores eligendi esse et
eum expedita fugiat inventore ipsum, necessitatibus nihil
optio, repellat suscipit tenetur totam ullam? Fugit ipsum itaque qui.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum dolores eligendi esse et
eum expedita fugiat inventore ipsum, necessitatibus nihil
optio, repellat suscipit tenetur totam ullam? Fugit ipsum itaque qui Lorem ipsum dolor sit amet,
consectetur adipisicing elit. Cum dolores eligendi esse et
eum expedita fugiat inventore ipsum, necessitatibus nihil
optio, repellat suscipit tenetur totam ullam? Fugit ipsum itaque qui.</p>
</div>
</div>
<div class="col-3 ml-auto">
<div class="bg-custom-light2 p-0">
<h2 class="font-weight-bold populars h5 text-center py-3 m-0 rounded-0">
Popular</h2>
<ul class="list-group list-popular-category border-0">
<li class="list-group-item d-flex justify-content-between align-items-center rounded-0 border-top-0">
<div>
<h6 class="font-weight-bold popular_article_title text-custom-blue-dark">Title</h6>
<p class="popular_article_date">date</p>
</div>
<img...
CSS
.populars{
background-color:gray;
}