JSFiddle - React, Tailwind, and code Playground

by mehulkar

HTML

<ul class="grid">
    <li>
        <a class="thumb">
            <img src="http://img.youtube.com/vi/lxHkSNnB13A/0.jpg">
        </a>
        <div class="description">
            <h4>long titl erft wef wef wef wef wefitle long title</h4>
            <p>stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff </p>
        </div>
    </li>
    <li>
        <a class="thumb">
            <img src="http://img.youtube.com/vi/lxHkSNnB13A/0.jpg">
        </a>
        <div class="description">
            <h4>long titl erft wef wef wef wef wefitle long title</h4>
            <p>stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff </p>
        </div>
    </li>
    <li>
        <a class="thumb">
            <img src="http://img.youtube.com/vi/lxHkSNnB13A/0.jpg">
        </a>
        <div class="description">
            <h4>long titl erft wef wef wef wef wefitle long title</h4>
            <p>stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff </p>
        </div>
    </li>
    <li>
        <a class="thumb">
            <img src="http://img.youtube.com/vi/lxHkSNnB13A/0.jpg">
        </a>
        <div class="description">
            <h4>long titl erft wef wef wef wef wefitle long title</h4>
            <p>stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff...

CSS

* { box-sizing: border-box; }

ul.grid li {
  background: rgba(0,0,0,0.2);
  display: inline-block;
  width: 310px;
  padding: 10px;
  padding-left: 162px;
  min-height: 150px;
  margin-right: 5px;
  margin-bottom:5px;
  position:relative;
}
ul.grid .thumb {
  position: absolute;
  left: 10px; top: 10px;
}

ul.grid img {
  border:none ;
}
ul.grid li h4 {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.thumb {
  overflow: hidden;
  height:95px;
}
.thumb img {
  height: 127px;
  width: 142px;
  margin-top: -16px;
}