JSFiddle - React, Tailwind, and code Playground

by Ruslan Polin

HTML

<div class="container">
		<div class="posts-list">
		  <article id="post-1" class="post">
				<div class="thumb-wrap">
				  <iframe src="https://www.youtube.com/embed/iC0zr9k0XjM?controls=0&amp;showinfo=0" webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen="" width="640" height="360" frameborder="0"></iframe>
				</div>
			</article>
    </div>
	  <aside>
		  <div class="widget">
		    <ul class="widget-category-list">
			    <li><a href="">Дропшипинг</a></li>
			    <li><a href="">Выбор ниши</a></li>
			    <li><a href="">Продвижение</a></li>
			    <li><a href="">Ответы на вопросы</a></li>
			    <li><a href="">Дропшипинг</a></li>
			    <li><a href="">Выбор ниши</a></li>
			    <li><a href="">Продвижение</a></li>
			    <li><a href="">Ответы на вопросы</a></li>
			    <li><a href="">Дропшипинг</a></li>
			    <li><a href="">Выбор ниши</a></li>
			    <li><a href="">Продвижение</a></li>
			    <li><a href="">Ответы на вопросы</a></li>
			    <li><a href="">Дропшипинг</a></li>
			    <li><a href="">Выбор ниши</a></li>
			    <li><a href="">Продвижение</a></li>
			    <li><a href="">Ответы на вопросы</a></li>
		    </ul>
		  </div>
    </aside>
  </div>

CSS

.posts-list {
  width: 70%;
	float: right;
}
.post {
	margin-bottom: 35px;
}

.thumb-wrap {
  position: relative;
  display: block;
  overflow: hidden;
	padding-bottom: 56%;
  height: 0;
	margin-bottom: 30px;
}
.thumb-wrap iframe {
  position: absolute;
  top: 0;
  left: 0;
  border: none;
  width: 100%;
	max-width:100%;
  height: 100%;
}
aside {
	width: 30%;
	float: left;
}
.widget {
	padding: 20px 15px;
  background: white;
  font-size: 13px;
	margin-bottom: 30px;
	box-shadow: 3px 3px 1px rgba(0,0,0,.05);
}
.widget-category-list{
   list-style-type:none;
 }
.widget-category-list li {
	border-bottom: 1px solid #EBEBE3;
	padding: 10px 0;
  color: #c6c6c6;
  font-style: italic;
}
.widget-category-list li:last-child {
	border-bottom: none;
}
.widget-category-list li a {
    color: #626262;
    margin-right: 6px;
    font-style: normal;
}
.widget-posts-list li {
	border-top: 1px solid #EBEBE3;
  padding: 15px 0;
}
.widget-posts-list li:nth-child(1){
	border-top: none;
}
@media (max-width: 768px) {
.posts-list, aside {
    width: 100%;
    float: none;
}
}