JSFiddle - React, Tailwind, and code Playground

HTML

<body>
<p class="container">
 text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text <div class="floatright">I'm floating right! text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text </div>
<div class="floatleft">I'm floating left! text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text </div>
<div class="floatabove">I'm floating above! text text text text text text text text text text text text text text text text text text text text text text </div>
text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text 
</p>
</body>

CSS

body {border: 1px green solid; margin: 50px; padding: 10px;}
.container {border: 1px red solid; margin: 30px; padding: 20px;}
.floatright {width: 100%; float: right; border: 1px blue solid; margin: 10px;}
.floatleft {width: 60%; float: left; border: 1px blue solid; margin: 10px;}
.floatabove {width: 30%; border: 1px blue solid; float: right; position: relative; margin-top: -230px;}