JSFiddle - React, Tailwind, and code Playground

by Chuan Shao

HTML

<div class="content container_12">
         <ul id="list-content">
                <li> 
                  <img src="https://img1.doubanio.com/lpic/s27653128.jpg" alt="inferno cape">
                  <div class="desc">
                    <h2 class="header-content text-content">This is a heading</h2>
                   <time datetime="2017-01-01" class="text-content">Game Updates | January 1st, 2017</time>
                   <p class="paragraph-content text-content">This is the content</p>
                  </div>
                </li>
                <li> <img src="https://img3.doubanio.com/lpic/s4554820.jpg" alt="find option">
                  <div class="desc">
                    <h2 class="header-content text-content">This is a heading</h2>
                   <time datetime="2017-01-01" class="text-content">Game Updates | January 1st, 2017</time>
                   <p class="paragraph-content text-content">This is the content</p>
                  </div>
                </li>
                <li> <img src="https://img3.doubanio.com/lpic/s8958650.jpg" alt="duel arena">
<div class="desc">
                    <h2 class="header-content text-content">This is a heading</h2>
                   <time datetime="2017-01-01" class="text-content">Game Updates | January 1st, 2017</time>
                   <p class="paragraph-content text-content">This is the content</p>
                  </div>
                </li>
        </ul>
    </div>

CSS

* {
  margin: 0;
}
.content {
  background-color: #3d4b5b;
}
#list-content li {
  list-style-type: none;
  padding-top: 2em;
}
#list-content li img {
  width: 200px;
  float: left;
}
#list-content li .desc {
  float: right;
}
#list-content li .desc .text-content {
  margin-bottom: 5px;
  display: block;
}
#list-content li:after {
  content: "";
  clear: both;
  display: block;
}