JSFiddle - React, Tailwind, and code Playground

by mehulkar

HTML

<div id="section">
      <ul class="grid"><li><a class="thumb" href="/moonshots/ahRkZXZ-Z29vZ2xlLXNvbHZlZm9yeHIPCxIITW9vbnNob3QYjQEM/agriculture-productivity-a-really-long-titleagriculture-productivity-a-really-long-titleagriculture-productivity-a-really-long-title"><img src="http://img.youtube.com/vi/eBJku04ma0E/0.jpg"></a><div class="description"><h4>agriculture productivity A Really long TitleAgriculture Productivity A Really Long TitleAgriculture Productivity A Really Long Title</h4><p></p></div></li><li><a class="thumb" href="/moonshots/ahRkZXZ-Z29vZ2xlLXNvbHZlZm9yeHIPCxIITW9vbnNob3QYjgEM/drug-delivery"><img src="http://img.youtube.com/vi/lxHkSNnB13A/0.jpg"></a><div class="description"><h4>drug delivery</h4><p></p></div></li><li class="no-margin"><a class="thumb" href="/moonshots/ahRkZXZ-Z29vZ2xlLXNvbHZlZm9yeHIPCxIITW9vbnNob3QYjwEM/resource-reclamation"><img src="http://img.youtube.com/vi/NePslxLgS9M/0.jpg"></a><div class="description"><h4>resource reclamation</h4><p></p></div></li><li><a class="thumb" href="/moonshots/ahRkZXZ-Z29vZ2xlLXNvbHZlZm9yeHIPCxIITW9vbnNob3QYkAEM/higher-education-impact"><img src="http://img.youtube.com/vi/-iYXPPX24WY/0.jpg"></a><div class="description"><h4>higher education impact</h4><p></p></div></li><li><a class="thumb" href="/moonshots/ahRkZXZ-Z29vZ2xlLXNvbHZlZm9yeHIPCxIITW9vbnNob3QYkQEM/carbon-negative-liquid-fuels"><img src="http://img.youtube.com/vi/zkYVlZ9v_0o/0.jpg"></a><div class="description"><h4>carbon negative liquid fuels</h4><p></p></div></li><li class="no-margin"><a class="thumb" href="/moonshots/ahRkZXZ-Z29vZ2xlLXNvbHZlZm9yeHIPCxIITW9vbnNob3QYkgEM/solve-for-x-neal-stephenson-on-getting-big-stuff-done"><img src="http://img.youtube.com/vi/TE0n_5qPmRM/0.jpg"></a><div class="description"><h4>Solve for X: Neal Stephenson on getting big stuff done</h4><p></p></div></li><li><a class="thumb" href="/moonshots/ahRkZXZ-Z29vZ2xlLXNvbHZlZm9yeHIPCxIITW9vbnNob3QYkwEM/synthetic-life-toolkits"><img...

CSS

* { box-sizing:border:box; }

ul.grid li {
  background: rgba(0,0,0,0.2);
  display: inline-block;
  width: 310px;
  padding:10px;
  margin-right: 5px;
  margin-bottom: 5px;
  max-height: 110px;
  overflow: hidden;
}
ul.grid li.no-margin {
  margin-right: 0;
}
ul.grid .thumb {
  float:left;
  margin-right: 5px;
}

ul.grid img {
  border:none;
}
ul.grid li .description h4 {
  overflow: hidden;
  text-overflow:ellipsis;
  white-space: nowrap;
  text-transform: capitalize;

}
.thumb {
  overflow: hidden;
  height:90px;
}
.thumb img {
  height: 127px;
  width: 142px;
  margin-top: -16px;
}