JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<span class=" fa-stack fa-1x"  style="margin-bottom:.6em;margin-right: 1em;padding-top: .6em;vertical-align:bottom;">
	<i class="fa fa-file-o  fa-stack-1x fa-3x"></i>
	<span style="top:1em;left:.25em" class="fa fa-stack-1x">
		<i class="fa fa-camera fa-stack-1x"></i>
		<i style="color:red;" class="fa fa-ban fa-stack-2x"></i>
	</span>
</span>
blablabla

<br />
<span class=" fa-stack fa-2x"  style="margin-bottom:.6em;margin-right: 1em;padding-top: .6em;vertical-align:bottom;">
	<i class="fa fa-file-o  fa-stack-1x fa-3x"></i>
	<span style="top:1em;left:.25em" class="fa fa-stack-1x">
		<i class="fa fa-camera fa-stack-1x"></i>
		<i style="color:red;" class="fa fa-ban fa-stack-2x"></i>
	</span>
</span>
blablabla
<br />
<span class=" fa-stack fa-3x"  style="margin-bottom:.6em;margin-right: 1em;padding-top: .6em;vertical-align:bottom;">
	<i class="fa fa-file-o  fa-stack-1x fa-3x"></i>
	<span style="top:1em;left:.25em" class="fa fa-stack-1x">
		<i class="fa fa-camera fa-stack-1x"></i>
		<i style="color:red;" class="fa fa-ban fa-stack-2x"></i>
	</span>
</span>
blablabla
<br />
<span class=" fa-stack fa-4x" style="margin-bottom:.6em;margin-right: 1em;padding-top: .6em;vertical-align:bottom;">
	<i class="fa fa-file-o  fa-stack-1x fa-3x"></i>
	<span style="top:1em;left:.25em" class="fa fa-stack-1x">
		<i class="fa fa-camera fa-stack-1x"></i>
		<i style="color:red;" class="fa fa-ban fa-stack-2x"></i>
	</span>
</span>
blablabla
<br />
<!-- bordering components to understand stacking...-->
<span class=" fa-stack fa-5x" style="margin-bottom:.6em;margin-right: 1em;padding-top: .6em;vertical-align:bottom;">
	<i class="fa fa-file-o  fa-stack-1x fa-3x" style="border: 1px solid purple;"></i>
	<span style="top:1em;left:.25em;border: 1px solid blue;" class="fa fa-stack-1x">
		<i class="fa fa-camera fa-stack-1x"></i>
		<i style="color:red;" class="fa fa-ban...