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"></div>
					<div class="server-two-info"></div>
					<div class="server-three-info"></div>
					<div class="server-four-info"></div>
				</div>
				<div class="col-md-5 server-titles-wrapper">
					<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 textOne = "Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Donec id elit non mi porta gravida at eget metus.";
    var textTwo = "Nulla vitae elit libero, a pharetra augue. Etiam porta sem malesuada magna mollis euismod.";
    var textThree = "Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam quis risus eget urna mollis ornare vel eu leo.";
    var textFour = "Donec id elit non mi porta gravida at eget metus. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.";

    $('#server-titles li:first').addClass('ui-selected');

    var $one = $('.server-one');
    var $two = $('.server-two');
    var $three = $('.server-three');
    var $four = $('.server-four');

    $('#server-titles').selectable({
        selected: function (event, ui) {
            console.log(event, ui);
            if ($('#server-titles .server-one').hasClass('ui-selected')) {
                $(".server-one-info").addClass("server-one-info-image");
                $(".server-one-info")
                .append("<button><a href='/clans'>MORE<two</button>");
                $(".server-one-info").append("<p>"+textOne+"</p>");
            }
            if ($('#server-titles .server-two').hasClass('ui-selected')) {
                $(".server-one-info").addClass("server-two-info-image");
                $(".server-one-info")
                .append("<button><a href='/clans'>MORE</a></button>");
                $(".server-one-info").append("<p>"+textTwo+"</p>");
            }

            if ($('#server-titles .server-three').hasClass('ui-selected')) {
                $(".server-one-info").addClass("server-three-info-image");
                $(".server-one-info")
                .append("<button><a href='/clans'>MORE</a></button>");
                $(".server-one-info").append("<p>"+textThree+"</p>");
            }

            if ($('#server-titles...