JSFiddle - React, Tailwind, and code Playground

by Ruslan Polin

HTML

<div class="blog__row">
          <div class="blog__video">
            <div class="vidres">
              <iframe width="560" height="315" src="https://www.youtube.com/embed/iC0zr9k0XjM?controls=0&amp;showinfo=0" frameborder="0" allowfullscreen></iframe>
            </div>
          </div><!-- END BLOG__VIDEO -->

          <div class="blog__nav">
            <ul class="blog__nav-list">
              <li class="blog__nav-item blog__nav-item--active">
                <a class="blog__nav-link">Дропшипинг</a>
              </li>
              <li class="blog__nav-item">
                <a href="#" class="blog__nav-link">Выбор ниши</a>
              </li>
              <li class="blog__nav-item">
                <a href="#" class="blog__nav-link">Продвижение</a>
              </li>
              <li class="blog__nav-item">
                <a href="#" class="blog__nav-link">Ответы на вопросы</a>
              </li>
              <li class="blog__nav-item">
                <a href="#" class="blog__nav-link">Дропшипинг</a>
              </li>
              <li class="blog__nav-item">
                <a href="#" class="blog__nav-link">Выбор ниши</a>
              </li>
              <li class="blog__nav-item">
                <a href="#" class="blog__nav-link">Продвижение</a>
              </li>
              <li class="blog__nav-item">
                <a href="#" class="blog__nav-link">Ответы на вопросы</a>
              </li>
              <li class="blog__nav-item">
                <a href="#" class="blog__nav-link">Дропшипинг</a>
              </li>
              <li class="blog__nav-item">
                <a href="#" class="blog__nav-link">Выбор ниши</a>
              </li>
              <li class="blog__nav-item">
                <a href="#" class="blog__nav-link">Продвижение</a>
              </li>
              <li class="blog__nav-item">
                <a href="#" class="blog__nav-link">Ответы на вопросы</a>
              </li>
              <li...

CSS

.vidres {
   position: relative;
  display: block;
  overflow: hidden;
	padding-bottom: 56%;
  height: 0;
	margin-bottom: 30px;
}

.vidres iframe {
 position: absolute;
  top: 0;
  left: 0;
  border: none;
  width: 100%;
	max-width:100%;
  height: 100%;
}

.blog__video {
	width: 70%;
	float: right;
}

.blog__nav {
	display: inline-block;
	vertical-align: middle;	
	width: 30%;	
}
@media (max-width: 768px) {
.blog__video, .blog__nav{
    width: 100%;
    float: none;
}
}