JSFiddle - React, Tailwind, and code Playground

by powtac

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<!-- TODO: * -->
<nav class="navbar navbar-default navbar-fixed-top">
    <div class="container"> <a class="navbar-brand" href="#"><i class="fa fa-diamond"></i> Databox</a>
        <p class="navbar-text navbar-right">
            Lieferant #960 &nbsp;/&nbsp; PRO-WaWi-2015-Muster-m-Pseudo-VK.csv &nbsp;/&nbsp; katalogdaten_79
        </p>
    </div>
</nav>
<div class="container">
    <h5 class="page-header">Konvertierungsplan <span class="text-muted pull-right">Wawibox-Standard</span></h5>
    <ul class="list-group">
        <li class="list-group-item list-group-item-success" data-toggle="tooltip" data-placement="top" title="Selber zugeordnet">
            <span class="text-muted pull-right">Herstellernummer</span>
            LiefMatNr <i class="fa fa-user"></i>&nbsp;
        </li>
        <li class="list-group-item disabled" data-toggle="tooltip" data-placement="top" title="Nicht zugeordnet">
            <span class="text-muted pull-right">Beschreibung</span>
            &nbsp;
        </li>
        <li class="list-group-item list-group-item-warning" data-toggle="tooltip" data-placement="top" title="Automatisch zugeordnet">
            <span class="text-muted pull-right">Anzahl</span>
            Anzahl <i class="fa fa-code"></i>&nbsp;
        </li>
        <li class="list-group-item list-group-item-info" data-toggle="tooltip" data-placement="top" title="Über Konfigurations-Funktion zugeordnet">
            <span class="text-muted pull-right">Basismengeneinheit</span>
            Titel <i class="fa fa-code-fork"></i>&nbsp;
        </li>
    </ul>
</div>

CSS

body {
    padding-top: 70px;
}
.list-group-vendor-files .list-group-item {
    line-height: 2.5;
}

JavaScript

$(function () {
  $('[data-toggle="tooltip"]').tooltip();
});