<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="container">
<div class="row">
<h2>Create your snippet's HTML, CSS and Javascript in the editor tabs</h2>
<div class="custom-tabs">
<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist">
<li role="presentation"><a href="#home" aria-controls="home"
role="tab" data-toggle="tab"> Telinen per e-mail </a></li>
<li role="presentation"><a href="#profile"
aria-controls="profile" role="tab" data-toggle="tab">Telinen
sie Einen link</a></li>
<li role="presentation"><a href="#messages"
aria-controls="messages" role="tab" data-toggle="tab">auf
facebook Telinen </a></li>
<li role="presentation" class="active"><a href="#settings"
aria-controls="settings" role="tab" data-toggle="tab">auf
Twitter Telinen</a></li>
</ul>
<!-- Tab panes -->
<div class="tab-content custom-tab-content">
<div role="tabpanel" class="tab-pane" id="home">
<p>Home Tab Clicked</p>
</div>
<div role="tabpanel" class="tab-pane" id="profile">
<form>
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<div class="row">
<div class="col-md-6">
<input type="email" class="form-control"
id="exampleInputEmail1"
placeholder="http://taf.gurmondo.com/ECGDyGY">
</div>
<div class="col-md-2">
<button type="submit" class="btn btn-default btn-black">Kopieren</button>
</div>
</div>
</div>
</form>
</div>
<div role="tabpanel" class="tab-pane" id="messages">
<div class="media">
<div class="media-left">
<a href="#"> <img alt="64x64" class="media-object"
src="https://images.prd.mris.com/image/V2/1/Yu59d899Ocpyr_RnF0-8qNJX1oYibjwp9TiLy-bZvU9vRJ2iC1zSQgFwW-fTCs6tVkKrj99s7FFm5Ygwl88xIA.jpg">
</a>
</div>
<div class="media-body">
<h5 class="media-heading">Media heading</h5>
<a href="#" class="external-link">http://gourmondo.tellafriend.com
</a>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Nullam ornare venenatis augue, nec suscipit lectus eleifend nec.
Morbi nisi ligula, consequat ac tincidunt quis, posuere id
metus. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Nullam ornare venenatis augue, nec suscipit lectus eleifend nec.
Morbi nisi ligula, consequat ac tincidunt quis, posuere id
metus. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Nullam ornare venenatis augue, nec suscipit lectus eleifend nec.
Morbi nisi ligula, consequat ac tincidunt quis, posuere id
metus. Lorem Morbi nisi ligula,</p>
</div>
</div>
<form>
<div class="form-group">
<div class="row">
<div class="col-md-6">
<input type="email" class="form-control facebook-input"
id="exampleInputEmail1"
placeholder="Lorem ipsum dolor sit amet, consectetur adipiscing">
</div>
<div class="col-md-2">
<button type="submit" class="btn btn-default btn-black">Kopieren</button>
</div>
</div>
</div>
</form>
</div>
<div role="tabpanel" class="tab-pane active" id="settings">
<div class="form">
<div class="form-group">
<div class="row">
<div class="col-md-7">
<textarea class="form-control twitter-box" rows="3"></textarea>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
.custom-tabs > .nav-tabs {
border: none;
margin: 0px;
}
.nav-tabs li {
margin-right: 2px;
}
.nav-tabs li.active{
border:none;
border-bottom: 2px solid #e5c16d;
position: relative;
}
.nav-tabs li.active a{
color: #333;
font-weight: 700;
}
.nav-tabs li:hover{
border-bottom: 2px solid rgba(229, 193, 109, 0.5);
background:none;
}
.nav-tabs li:hover a{
color: #333;
}
.nav-tabs li a{
border: 0;
margin-right: 0;
font-family: Georgia;
color: #333;
font-size: 14px;
font-weight: 400;
text-align: left;
text-transform:uppercase;
cursor: pointer;
padding:15px 15px 5px 15px;
}
ul li a:hover{
background:none;
}
.custom-tab-content {
margin-top: 0;
background-color: #fff;
border: 0;
padding: 15px 0;
}
.media-body,
.media-left,
.media-right {
display: table-cell;
vertical-align: top;
}
.media-left{
padding-right: 25px;
}
.media-body p{
padding-top:10px;
}
.btn-black{
border-radius: 5px;
border: 1px solid #010c12;
background-color: #00040a;
font-family: Georgia;
color: #e5c16d;
font-size: 14px;
font-weight: 700;
text-align: center;
text-transform:uppercase;
}
.media-heading{
font-family: Georgia;
color: #333;
font-size: 14px;
font-weight: 700;
text-align: left;
}
.external-link{
font-family: Verdana;
color: #737373;
font-size: 12px;
font-weight: 400;
text-align: left;
}
.facebook-input{
border-radius: 5px;
border:1px solid #010c12;
}
.twitter-box{
border-radius: 5px;
border:1px solid #010c12;
resize:none;
}
label{
font-family: Verdana;
color: #333;
font-size: 15px;
font-weight: 700;
text-align: left;
}
