JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<ul class = "media-list">
<li class = "media">
<a class = "pull-left" href = "#">
<img class="media-object" src="http://images.all-free-download.com/images/wallpapers_large/sunny_flowers_wallpaper_flowers_nature_wallpaper_1383.jpg" alt="Media Object" style="
width: 100px;
">
</a>
<div class = "media-body">
<h4 class = "media-heading">Media heading</h4>
<p>
This is some sample text. This is some sample text.
This is some sample text. This is some sample text.
This is some sample text. This is some sample text.
This is some sample text. This is some sample text.
</p>
<!-- Nested media object -->
<div class = "media">
<a class = "pull-left" href = "#">
<img class="media-object" src="http://images.all-free-download.com/images/wallpapers_large/sunny_flowers_wallpaper_flowers_nature_wallpaper_1383.jpg" alt="Media Object" style="
width: 100px;
">
</a>
<div class = "media-body">
<h4 class = "media-heading">Nested media heading</h4>
This is some sample text. This is some sample text.
This is some sample text. This is some sample text.
This is some sample text. This is some sample text.
This is some sample text. This is some sample text.
<!-- Nested media object -->
<div class = "media">
<a class = "pull-left" href = "#">
<img class="media-object" src="http://images.all-free-download.com/images/wallpapers_large/sunny_flowers_wallpaper_flowers_nature_wallpaper_1383.jpg" alt="Media Object" style="
width: 100px;
">
...