JSFiddle - React, Tailwind, and code Playground

from http://codepen.io/jensimmons/pen/bedqqQ?editors=1100

by rulin shyu

HTML

<article>
  <h1 class="apples">Blackberry</h1>
  <img src="http://labs.jensimmons.com/examples/images/blackberry.png" class="apples">
  <p>What distinguishes the blackberry from its raspberry relatives is whether or not the torus (receptacle or stem) 'picks-with' (i.e. stays with) the fruit. When picking a blackberry fruit, the torus does stay with the fruit. With a raspberry, the torus remains on the plant, leaving a hollow core in the raspberry fruit.</p>
  <p>The term 'bramble', a word meaning any impenetrable thicket, has traditionally been applied specifically to the blackberry or its products, though in the United States it applies to all members of the Rubus genus. In the western US, the term caneberry is used to refer to blackberries and raspberries as a group rather than the term bramble.</p>
  <p>The usually black fruit is not a berry in the botanical sense of the word. Botanically it is termed an aggregate fruit, composed of small drupelets. It is a widespread and well-known group of over 375 species, many of which are closely related apomictic microspecies native throughout Europe, northwestern Africa, temperate western and central Asia and North and South America.</p>
</article>

CSS

* {box-sizing: border-box;}
html {
  font-family: georgia, serif;
  text-rendering: optimizeLegibility;
  font-kerning: normal;
  text-size-adjust: 100%;
  font-family: Georgia, serif;
  font-size: 18px;
}
body {
  width: 80%;
  margin: 20px; 
  max-width: 800px;
  background-color: #fff;
}
h1 {
  font-size: 5rem;
  color: #A13A45;
  margin: 0;
  line-height: 1.1em;
}
p {
  line-height: 1.75em;
}
h1, h2, h3, p {
  margin-left: 20vw;
}
img {
  width: 40vw;
  float: left;
  margin: 1em; 
  // shape-outside: attr(src url); 
  shape-outside: url("http://labs.jensimmons.com/examples/images/blackberry.png");
  shape-margin: 0.8em;
}
img:hover {
  shape-image-threshold: .9;
}