JSFiddle - React, Tailwind, and code Playground
by mgoetzke
HTML
<div class="content">
<div>
<div class="document-marker">
<svg class="centerv" width="16px" height="16px" version="1.1" xmlns="http://www.w3.org/2000/svg">
<rect x="0" y="0" width="100%" height="100%" style="fill:orange" />
</svg>
</div>
<span class="line-item centerv">
<strong title="{{data.description}}">Tset setsetet</strong>
</span>
</div>
<div>
<img class="centerv folder-icon document-icon-small" src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KCgo8IS0tIFRoZSBpY29uIGNhbiBiZSB1c2VkIGZyZWVseSBpbiBib3RoIHBlcnNvbmFsIGFuZCBjb21tZXJjaWFsIHByb2plY3RzIHdpdGggbm8gYXR0cmlidXRpb24gcmVxdWlyZWQsIGJ1dCBhbHdheXMgYXBwcmVjaWF0ZWQuIApZb3UgbWF5IE5PVCBzdWItbGljZW5zZSwgcmVzZWxsLCByZW50LCByZWRpc3RyaWJ1dGUgb3Igb3RoZXJ3aXNlIHRyYW5zZmVyIHRoZSBpY29uIHdpdGhvdXQgZXhwcmVzcyB3cml0dGVuIHBlcm1pc3Npb24gZnJvbSBpY29ubW9uc3RyLmNvbSAtLT4KCgo8IURPQ1RZUEUgc3ZnIFBVQkxJQyAiLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4iICJodHRwOi8vd3d3LnczLm9yZy9HcmFwaGljcy9TVkcvMS4xL0RURC9zdmcxMS5kdGQiPgoKPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgoKCSB3aWR0aD0iNTEycHgiIGhlaWdodD0iNTEycHgiIHZpZXdCb3g9IjAgMCA1MTIgNTEyIiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCA1MTIgNTEyIiB4bWw6c3BhY2U9InByZXNlcnZlIj4KCjxwYXRoIGlkPSJmb2xkZXItNS1pY29uIiBkPSJNNDYyLDQyMi4zNEg1MFYyMDAuMDM5aDQxMlY0MjIuMzR6IE00NjIsMTY1LjA3OHYtNDIuODEySDIwMC4wMjFjLTguODc3LDAtMTcuMzk1LTMuNTEzLTIzLjY5Mi05Ljc3MQoKCUwxNTMuMzUsODkuNjZINTB2NzUuNDE4SDQ2MnoiLz4KCjwvc3ZnPgoK"></img>
<span class="line-item centerv">
<strong>Test</strong>
</span>
</div>
</div>
CSS
.content {
margin-left: 15px;
}
.line-item {
line-height: 24px;
}
.document-marker {
display:inline-block;
margin-right: 2px;
}
.centerv {
vertical-align:middle;
}
img.document-icon-small {
width:24px;
height:24px;
margin-left: -4px;
margin-right: -2px;
}