JSFiddle - React, Tailwind, and code Playground

by mgibsonbr

HTML

<div class="container">
  <div class="row">
    <div class="col-md-2 text-center">
      <ul class="nav nav-stacked feed-adaptation">
          <li class="active"><a href="#"><img src="imagens/abc.png" class="img-responsive" /></a></li>
        <li><a href="#">ABOUT</a></li>
        <li><a href="#">PORTFOLIO</a></li>
        <li><a href="#">TEAM</a></li>
        <li><a href="#">CONTACT</a></li>
      </ul>

      <div class="container-feed">
          <div class="header-feed">
            <span class="feed-name">FEED</span>
          </div>

          <div class="thumbnail">
              <img class="img-thumbnail" src="imagens/social-icons/facebook.png" alt="" />
            <div class="caption">
              <p><b>Phellipe lins</b> citou <a href="#">#abc</a> em um post no facebook.</p>
            </div>
          </div>

          <div class="thumbnail">
              <img class="img-thumbnail" src="imagens/social-icons/twitter.png" alt="" />
            <div class="caption">
              <p><b>Phellipe lins</b> citou <a href="#">#abc</a> em um post no facebook.</p>
            </div>
          </div>

          <div class="thumbnail">
              <img class="img-thumbnail" src="imagens/social-icons/facebook.png" alt="" />
            <div class="caption">
              <p><b>Phellipe lins</b> citou <a href="#">#abc</a> em um post no facebook.</p>
            </div>
          </div>
        </div>

    </div>
  </div>
</div>

CSS

.col-md-2.text-center {
    padding-right: 0px;
    padding-left: 0px;
    background-color: #ebebeb;
    height: 300px;
    border: 1px solid green;
}

.thumbnail {
    background-color: transparent;
    border: none;
    display: inline-block;
    width: 90%;
    margin: 0 auto;
}

.row {
    height: auto;
    border: 1px solid red;
}

.container {
    height: auto;
    border: 1px solid blue;
}

.container-feed {
    height: 160px;
    overflow: auto;
}