JSFiddle - React, Tailwind, and code Playground

by Matias Guijarro

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.isotope/2.2.2/isotope.pkgd.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/x-editable/1.5.0/bootstrap3-editable/js/bootstrap-editable.min.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/x-editable/1.5.0/bootstrap3-editable/css/bootstrap-editable.css">
<div class='samples-grid'>
    <div class='samples-grid-item'>
        <div class='dot'></div>
        <a href="#" id="protein-acronym" class="protein-acronym" data-type="text" data-pk="1" data-url="/post" data-title="Enter username">Protein acronym</a>
        <div class="sample-id">
            <span class="dm">HA12345678</span>
            <span class="location">1:1:1</span>
            <p style="float:clear;">&nbsp;</p>
        </div>
        <span class="label label-primary">Char.</span>  
        <span class="label label-primary">mxpressO</span>  
        <span class="label label-primary">XX</span>  
    </div>
    
</div>

CSS

.samples-grid-item {
    width: 190px;
    height: 90px;
    border: 1px solid #AAA;
    background: #FFF;
    box-shadow: 0px 2px 3px 0px #AAA;
    padding: 5px;
    margin-top: 5px;
    margin-right: 3px;
    margin-bottom: 5px;
    margin-left: 3px;
    overflow: hidden;
    border-radius: 3px;
}
.samples-grid-item > .protein-acronym {
    font-variant: small-caps;
    font-size: small;
    font-weight: bold;
}
.sample-id {
}
.sample-id .dm {
    float: left;
    font-variant: small-caps;
    font-size: small;
    font-style: italic;
}
.sample-id .location {
    float: right;
    font-variant: small-caps;
    font-size: small;
}
.dot {
    height: 7px;
    width: 7px;
    margin-top: 1px;
    margin-right: 1px;
    border-radius: 100%;
    background: green;
    position: absolute;
    right: 0;
    top: 0;
}
.samples-grid-item-selected {
    background: #CEE3F6;
}
}

JavaScript

$('.samples-grid').isotope({
    itemSelector: '.samples-grid-item',
    layoutMode: 'fitRows'
});

$("#protein-acronym").editable({ placement: "right", container: "body" });

$(".samples-grid-item").click(function() {
    $(this).toggleClass("samples-grid-item-selected");
});