JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<section id="picturesSection" class="background-image" data-bind="foreach: { data: people, as: 'person'}">
    <div class="cardPositioning panel panel-primary">
        <div class="panel-heading my-panel-heading">
            <h3 class="panel-title cardTitle" data-bind="text: person.Name"></h3>
            <button type="button" class="btn btn-primary btn-xs removeButton fa fa-minus" >-</button>
        </div>
        <header>
            <!--<img width="256" height="256" src="app/Images/horse.jpg">-->
            <img width="256" height="256" data-bind="attr:{src: 'app/' + person.srcImage}">
        </header>
        <footer>
            <!-- $data.firstName-->
            <p class="nameEmployeePos" data-bind="text: person.DateOfBirth"></p>
            <p class="nameEmployeePos" data-bind="text: person.Role"></p>
            <p class="nameEmployeePos" data-bind="text: person.Email"></p>
        </footer>
    </div>
</section>

CSS

#picturesSection{
width: 100%; overflow: hidden;
}

.cardPositioning{
float: left;
margin:20px;
}

.background-image {
background-image: url("../Images/back.png");
width: 100%;
z-index: 10;
background-position-x: 1400px;
background-position-y: 400px;
background-repeat: no-repeat;
background-attachment: fixed;
}

.removeButton{
margin-bottom: 2px;
margin-left: 0px;
margin-right: 0px;
position : relative;
left : 90%;
}