JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.0/jquery-ui.js"></script>
<div class="container server-wrapper">
    <div class="col-md-12">
        <div class="row">
            <div class="col-md-7 server-info">
                <div class="server-one-info server-one-info-image"></div>
                <div class="server-two-info server-two-info-image"></div>
                <div class="server-three-info server-three-info-image"></div>
                <div class="server-four-info server-four-info-image"></div>
            </div>
            <div class="col-md-5 server-titles-wrapper">
                <div id="display"></div>
                <ul id="server-titles">
                    <li class="server-one light server ui-widget-content">
                        <h3>Title1</h3>
                    </li>
                    <li class="server-two dark server ui-widget-content">
                        <h3>Title2</h3>
                    </li>
                    <li class="server-three light server ui-widget-content">
                        <h3>Title3</h3>
                    </li>
                    <li class="server-four dark server ui-widget-content">
                        <h3>Title4</h3>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</div>

SCSS

/* Server Tabs */
/* line 423, ../sass/home.scss */
.server-titles-wrapper {
  padding: 0;
}
/* line 425, ../sass/home.scss */
.server-titles-wrapper ul {
  list-style: none;
  padding-left: 0;
}
/* line 429, ../sass/home.scss */
.server-titles-wrapper .server > h3 {
  color: white;
  margin: 0;
  padding: 15px 0 15px 15px;
}
/* line 434, ../sass/home.scss */
.server-titles-wrapper .light {
  background-color: #6bb3cc;
}
/* line 438, ../sass/home.scss */
.server-titles-wrapper .dark {
  background-color: #61a4ba;
}
/* line 442, ../sass/home.scss */
.server-titles-wrapper .active {
  background-color: #75c5e0;
}
/* line 445, ../sass/home.scss */
.server-titles-wrapper .ui-selected {
  background: #75c5e0;
}
/* line 448, ../sass/home.scss */
.server-titles-wrapper .ui-selecting {
  background: #75c5e0;
}

/* line 453, ../sass/home.scss */
.server-info {
  padding: 0;
}
/* line 455, ../sass/home.scss */
.server-info p {
  color: white;
  font-size: 12px;
  background: rgba(0, 0, 0, 0.5);
  padding: 10px;
  position: absolute;
  bottom: 0;
  margin-bottom: 0;
  font-family: Open-Sans, Trebuchet MS, Serif;
}
/* line 465, ../sass/home.scss */
.server-info button {
  background: #f4dab9;
  border-radius: 5px;
  margin: 10px 0 0 10px;
}
/* line 469, ../sass/home.scss */
.server-info button a {
  color: #946d3b;
  font-family: Open-Sans, Trebuchet MS, Serif;
  padding: 4px 8px;
  text-decoration: none;
}
/* line 476, ../sass/home.scss */
.server-info .server-one-info-image {
  background: url(../img/clans.jpg) no-repeat center right;
  height: 224px;
}
/* line 480, ../sass/home.scss */
.server-info .server-two-info-image {
  background: url(../img/test.jpg) no-repeat center right;
  height: 224px;
}

.server-info .server-one-info-image {
    background: url(http://wallpaperkick.com/wp-content/uploads/2015/02/gray-wallpaper.jpg) no-repeat center right;
    height:224px;
}
.server-info .server-two-info-image {
    background:...

JavaScript

$(document).ready(function () {
    var content = {
        "server-one": "Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Donec id elit non mi porta gravida at eget metus. <button><a href='/clans'>MORE<two</button>",
        "server-two": "Nulla vitae elit libero, a pharetra augue. Etiam porta sem malesuada magna mollis euismod. <button><a href='/clans'>MORE<two</button>",
        "server-three": "Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam quis risus eget urna mollis ornare vel eu leo. <button><a href='/clans'>MORE<two</button>",
        "server-four": "Donec id elit non mi porta gravida at eget metus. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. <button><a href='/clans'>MORE<two</button>"
    };

    $('#server-titles').selectable({
        selected: function (event, ui) {
            var sel = $(ui.selected).attr("class").split(" ")[0];
            var elem = $(".row [class^=" + sel.concat("-info") + "]");
            elem.html(content[sel]).show(500).siblings().hide(-500);
        }
    });
});