<!-- TABS -->
<div class="tab-container">
    <ul class="nav nav-tabs" role="tablist" aria-label="ez egy tablista">
        <li role="presentation" class="nav-item active"><a aria-selected="true" aria-controls="t-01" role="tab" id="a-01" class="nav-link active" href="#t-01" data-toggle="tab">tab 1</a></li>
        <li role="presentation" class="nav-item"><a aria-selected="false" aria-controls="t-02" role="tab" id="a-02" class="nav-link" href="#t-02" data-toggle="tab">tab 2</a></li>
        <li role="presentation" class="nav-item"><a aria-selected="false" aria-controls="t-03" role="tab" id="a-03" class="nav-link" href="#t-03" data-toggle="tab">tab 3</a></li>
    </ul>
    <div class="tab-content">
        <div id="t-01" class="tab-pane fade in active" role="tabpanel" aria-labelledby="a-01">
            <h4 class="head">TAB 1</h4>
            <p>Pellentesque non mi laoreet urna condimentum finibus sed nec est. Mauris laoreet consectetur purus id porta. Nulla eu nisl metus. Mauris tincidunt magna non tincidunt fringilla. Curabitur sodales porttitor leo, eu porta mauris fringilla sed. Pellentesque sem libero, dignissim eu sapien ac, laoreet faucibus ipsum. Maecenas lacinia massa at est sollicitudin, at bibendum lacus efficitur. Nam eget diam malesuada, volutpat mi vitae, hendrerit metus. Phasellus interdum feugiat libero, ullamcorper scelerisque tellus sodales ut.</p>
        </div>
        <div id="t-02" class="tab-pane fade" role="tabpanel" aria-labelledby="a-02">
            <h4 class="head">TAB 2</h4>
            <p>Pellentesque non mi laoreet urna condimentum finibus sed nec est. Mauris laoreet consectetur purus id porta. Nulla eu nisl metus. Mauris tincidunt magna non tincidunt fringilla. Curabitur sodales porttitor leo, eu porta mauris fringilla sed. Pellentesque sem libero</p>
        </div>
        <div id="t-03" class="tab-pane fade" role="tabpanel" aria-labelledby="a-03">
            <h4 class="head">TAB 3</h4>
            <p>Pellentesque non mi laoreet urna condimentum finibus sed nec est. Mauris laoreet consectetur purus id porta. Nulla eu nisl metus. Mauris tincidunt magna non tincidunt fringilla. Curabitur sodales porttitor leo, eu porta mauris fringilla sed. Pellentesque sem libero, dignissim eu sapien ac, laoreet faucibus ipsum. Maecenas lacinia massa at est sollicitudin, at bibendum lacus efficitur. Nam eget diam malesuada, volutpat mi vitae, hendrerit metus. Phasellus interdum feugiat libero, ullamcorper scelerisque tellus sodales ut.</p>
        </div>
    </div>
</div>

.nav-tabs>li>a {
	color: #000;
	font-size: 0.8rem;
	text-transform: uppercase;
}
.nav-tabs>li.active>a,
.nav-tabs>li.active>a:focus,
.nav-tabs>li.active>a:hover,
.nav-tabs>li>a:hover,
.nav-tabs>li>a:focus {
	border: 1px solid #e5e5e5;
	border-top-color: rgb(229, 229, 229);
	border-top-style: solid;
	border-top-width: 1px;
	border-bottom-color: transparent;
	font-weight: 700;
	background: #fff;
	border-radius: 0;
	border-top: 2px solid #00659f;
	padding-top: 9px;
}
.tab-content {
	border-right: 1px solid #e5e5e5;
	border-left: 1px solid #e5e5e5;
	border-bottom: 1px solid #e5e5e5;
	padding: 15px 25px;
	margin-bottom: 15px;
}