JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<div id="manage-batteries-container" class="col-md-12 col-xs-12 container-fluid">
    <div class="col-md-12 col-xs-12" id="batteries-list">
        <table class="table table-responsive" style="margin-top:4em">
            <tr>
                <td>dsfasdf</td>
                <td>dsfasdf</td>
                <td>dsfasdf</td>
                <td>dsfasdf</td>
            </tr>
            <tr>
                <td>dsfasdf</td>
                <td>dsfasdf</td>
                <td>dsfasdf</td>
                <td>dsfasdf</td>
            </tr>
            <tr>
                <td>dsfasdf</td>
                <td>dsfasdf</td>
                <td>dsfasdf</td>
                <td>dsfasdf</td>
            </tr>
        </table>
    </div>
</div>

CSS

body {
	font-family: 'Ubuntu', sans-serif;
	background-image: url('/images/batteries.jpg');
	color: #000;
	margin-bottom: 30px;
}

.top-buffer {
	margin-top: 20px;
}

.text-center {
	text-align: center;
}

#content {
	margin-top: 30px;
}

.table > thead > tr > th, .table > tbody > tr > th, .table > tfoot > tr > th, .table > thead > tr > td, .table > tbody > tr > td, .table > tfoot > tr > td {
	border-top: 1px solid #333;
}

.table > thead > tr > th {
	border-bottom: 2px solid #333;
}

/*.btn-default {
	background-color: #C9CCFF;
	border-color: #ABBFE8;
}*/

#manage-batteries-container {
	background-color: rgba(210,210,210,0.4);
	border-radius: 5px;
	box-shadow: 0px 0px 10px 10px rgba(0,0,0,0.5);
}

#main-tabs {
	border-bottom: none;
}

@media screen and (max-width: 767px) {
	.table-responsive {
		border: none;
		overflow: scroll;
		overflow: auto;
	}
}