JSFiddle - React, Tailwind, and code Playground

by Arnold Daniels

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/jasny-bootstrap/3.1.3/css/jasny-bootstrap.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/jasny-bootstrap/3.1.3/js/jasny-bootstrap.js"></script>
<div class="container">
    <div class="page-header">
        <h1>interesting.bin <span class="label label-danger pull-right">malicious</span></h1>
        <p class="text-muted">Analysed on September 4th 2014 15:12:58</p>
    </div>
    
    <h2>Signatures</h2>

    <ul class="list-group">
        <li class="list-group-item list-group-item-header list-group-item-danger"><h4>Malicious threats <span class="badge pull-right badge-danger">4</span></h4></li>
        <li class="list-group-item list-group-item-group">
            <span class="list-group-item-heading">Ransomware/Banking</span>
            <ul>
                <li class="list-group-item">
                    Disables Windows Task Manager (taskmgr) <a href="#details-static-1" data-toggle="collapse" class="pull-right"><small>(details)</small></a>
                    <div id="details-static-1" class="signature-details collapse">
                        <dl class="dl-horizontal small">
                            <dt>type</dt> <dd>What is type 3?</dd>
                            <dt>sources</dt> <dd>02998010-00003484-1822839841</dd>
                            <dt>db</dt> <dd>"interesting.bin" (Path: "\REGISTRY\USER\S-1-5-21-329068152-492894223-854245398-1003\SOFTWARE\MICROSOFT\WINDOWS\CURRENTVERSION\POLICIES\SYSTEM", Key: "DISABLETASKMGR", Value: "31000000")</dd>
                        </dl>
                    </div>
                </li>
                <li class="list-group-item">Disables Windows Registry Editor (regedit) <a href="#" class="pull-right"><small>(details)</small></a></li>
                <li...

CSS

h2 {
    margin-bottom: 20px;
}
.container {
    margin-top: 20px;
}

.list-group-item-group {
    padding-left: 0;
    padding-right: 0;
    padding-bottom: 0;
}
.list-group-item-group > .list-group-item-heading {
    display: block;
    padding-left: 15px;
    font-weight: bold;
}
.list-group-item-group > ul {
    margin-top: 10px;
    padding-left: 0;
}
.list-group-item-group > ul > .list-group-item {
    padding-left: 30px;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    border-left-width: 0;
    border-right-width: 0;
}
.list-group-item-group > ul > .list-group-item:last-child {
    border-bottom-width: 0;
}

.badge-danger {
    background-color: #d9534f;
}
.badge-warning {
    background-color: #f0ad4e;
}

.signature-details dl {
    margin-top: 10px;
    margin-bottom: 10px;
}
.signature-details dt {
    width: 60px;
}
.signature-details dd {
    margin-left: 70px;
}