JSFiddle - React, Tailwind, and code Playground

by panamaprophet

HTML

<ul class="archive-list">
  <li>
    <article>
      <a href="#article" title="Article Title">
        <span class="archive-img-wrap" style="background-image: url('https://i.imgur.com/2MAsv6e.jpg')" alt="Article Title"></span>
        <h1 class="archive-title">The Amazing Article Title is Shown Here</h1>
      </a>
    </article>
  </li>
  <li>
    <article>
      <a href="#article" title="Article Title">
        <span class="archive-img-wrap" style="background-image: url('https://i.imgur.com/2MAsv6e.jpg')"></span>
        <h1 class="archive-title">The Amazing Article Title is Shown Here</h1>
      </a>
    </article>
  </li>
  <li>
    <article>
      <a href="#article" title="Article Title">
        <span class="archive-img-wrap" style="background-image: url('https://i.imgur.com/2MAsv6e.jpg')"></span>
        <h1 class="archive-title">The Amazing Article Title is Shown Here</h1>
      </a>
    </article>
  </li>
</ul>

CSS

ul.archive-list > li {
	display: block;
}
ul.archive-list > li {
	padding: 0 20px;
	width: 25%;
	float: left;
	text-align: center;
	position: relative;
	margin-bottom: 40px;

}
ul.archive-list .archive-img-wrap {
	height: 200px;
	display: block;
	overflow: hidden;
	border-radius: 8px;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
}
ul.archive-list img.archive-img {
	width: 100%;
}
ul.archive-list h1.archive-title {
	margin: 25px 0 0 0;
	font-size: 1.2em;
	color: #535353;
}