JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//use.fontawesome.com/05799db3cf.js"></script>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container">
    <div class="row">
        <div class="col-xs-12">
            <div class="panel" id="panel_1">
                <div class="panel-heading">
                    <h3>Speech Audiometry</h3>
                    <div class="current-test">
                        <span>Binaural (Not Fitted), Fixed voice: 65dB SPL, BLU, Female, Airport</span>
                    </div>
                </div>

                <div class="panel-body">
                    <ul class="nav nav-pills">
                        <li><span class="button"><i class="fa fa-long-arrow-left"></i></span></li>
                        <li class="current">12 dB</li>
                        <li>9 dB</li>
                        <li>6 dB</li>
                        <li>3 dB</li>
                        <li>0 dB</li>
                        <li><span class="button"><i class="fa fa-long-arrow-right"></i></span></li>
                    </ul>
                    <div class="vocal-test-content">
                        <div class="panel-inner">
                            <div class="judge">
                                <span class="yes"><i class="fa fa-thumbs-o-up"></i></span>
                                <span class="no"><i class="fa fa-thumbs-o-down"></i></span>
                            </div>
                            <div class="current-question">
                                <div class="question-inner">
                                    <div class="default">
                                        <label>Louche</label>
                                    </div>
                                    <div class="error-detail">
                                        <div...

CSS

@import url('https://fonts.googleapis.com/css?family=Open+Sans');
body {
    background: #f4f4f4;
    font-family: 'Open Sans', sans-serif;
}
ul {
	padding:0;
	margin:0;
	text-align: left;
	padding-left: 10px;
	list-style: none;
}
.container { 
	white-space: nowrap; 
}
.current-test span {
    color: #4489C5;
}

.nav {
    border-top: 2px solid #eee;
}

.nav li {
    padding: 10px 4%;
}

.nav li.current {
    border-top: 3px solid #4489C5;
}

.nav li span.button {
    color: #4489C5;
    width: 30px;
    height: 30px;
    border-radius: 100px;
    display: inline-block;
    border: 2px solid #4489C5;
    text-align: center;
    line-height: 1.7;
}

.vocal-test-content {
    background: #E7E7E7;
    padding: 10px;
}

.panel-inner {
    background: #fff;
}

.judge {
    text-align: center;
    padding: 16px 0;
}

.judge span {
    width: 50px;
    height: 50px;
    border-radius: 100px;
    display: inline-block;
    color: #fff;
    margin: 0 10px;
}

.judge span .fa {
    font-size: 26px;
    line-height: 2;
}

.judge span.yes {
    background: #79CC53;
}

.judge span.no {
    background: #F94C43;
}

.current-question {
    background: #F8F8F8;
    border-top: 1px solid #e8e8e8;
    border-bottom: 1px solid #e8e8e8;
    text-align: center;
    width: 100%;
    position: relative;
}

.current-question .question-inner {
	width: 198%;
}

.current-question .question-inner > div {
	display: inline-block;
	width: 50%;
	vertical-align: middle;
}
.current-question label {
    font-size: 30px;
	font-weight: 400;
	margin-top: 8px;
    margin-bottom: 11px;
}
.current-question .error-detail {
	opacity: 0;
}
.current-question .error-detail > div {
	width: 50%;
	display: inline-block;
	padding: 12px 0;
	vertical-align: middle;
	white-space: initial;
}
.current-question .error-detail .green {
	background: #DBF9C0;
}
.current-question .error-detail .red {
	background: #FCCCC8;
}
.current-question .error-detail .red li {
	display: inline-block;
	padding: 3px...

JavaScript

setTimeout(function() {
	$('.question-inner .error-detail').animate({
		"opacity": "1"
	}, 600);
	$('.question-inner .default').animate({
		"margin-left": '-100%',
		"opacity": '0'
	}, 600, 'swing', function() {
		$('.play-control span').html('<i class="fa fa-volume-up"></i>Scoring in progress...');
	});
}, 3000);