<div class="row d-flex justify-content-center mt-100">
<div class="col-md-4">
<div class="main-card mb-3 card">
<div class="card-header"> <i class="fa fa-wifi mr-2 mb-1"> </i> Marketing Tips <div class="btn-actions-pane-right actions-icon-btn">
<div role="group" class="btn-group-sm nav btn-group"> <a data-toggle="tab" href="#tab-eg3-0" class="btn-shadow btn btn-dark show active" data-abc="true">Tab 1</a> <a data-toggle="tab" href="#tab-eg3-1" class="btn-shadow btn btn-dark show" data-abc="true">Tab 2</a> <a data-toggle="tab" href="#tab-eg3-2" class="btn-shadow btn btn-dark show" data-abc="true">Tab 3</a> </div>
</div>
</div>
<div class="card-body">
<div class="tab-content">
<div class="tab-pane show active" id="tab-eg3-0" role="tabpanel">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div class="tab-pane show" id="tab-eg3-1" role="tabpanel">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Sit amet mattis vulputate enim nulla aliquet porttitor lacus. Eros donec ac odio tempor orci dapibus ultrices in iaculis. Hac habitasse platea dictumst quisque sagittis purus sit amet. Non consectetur a erat nam at lectus urna duis convallis. Nec tincidunt praesent semper feugiat. Orci sagittis eu volutpat odio facilisis mauris sit. Velit aliquet sagittis id consectetur purus. Lacus luctus accumsan tortor posuere. At erat pellentesque adipiscing commodo elit.</p>
</div>
<div class="tab-pane show" id="tab-eg3-2" role="tabpanel">
<p>Vestibulum lorem sed risus ultricies tristique. Volutpat consequat mauris nunc congue nisi vitae suscipit. Pretium fusce id velit ut. Magna sit amet purus gravida quis blandit. Duis at tellus at urna condimentum mattis pellentesque id nibh. Metus vulputate eu scelerisque felis imperdiet proin. Libero enim sed faucibus turpis in eu mi bibendum neque. Aliquam eleifend mi in nulla posuere sollicitudin aliquam. Cras fermentum odio eu feugiat. Semper eget duis at tellus at urna condimentum mattis pellentesque. Eget mauris pharetra et ultrices neque ornare. Platea dictumst quisque sagittis purus sit amet volutpat consequat.</p>
</div>
</div>
</div>
<div class="d-block text-right card-footer"> <button class="mr-2 btn-icon btn-icon-only btn btn-outline-danger"><i class="fa fa-trash"> </i></button> <button class="btn-wide btn btn-success">Save</button> </div>
</div>
</div>
</div>
body {
margin: 0;
font-family: "sans-serif";
font-size: .88rem;
font-weight: 400;
line-height: 1.5;
color: #495057;
text-align: left;
background-color: #E91E63
}
.card {
box-shadow: 0 0.46875rem 2.1875rem rgba(4, 9, 20, 0.03), 0 0.9375rem 1.40625rem rgba(4, 9, 20, 0.03), 0 0.25rem 0.53125rem rgba(4, 9, 20, 0.05), 0 0.125rem 0.1875rem rgba(4, 9, 20, 0.03);
border-width: 0;
transition: all .2s
}
.mt-100 {
margin-top: 100px
}
.card-header:first-child {
border-radius: calc(.25rem - 1px) calc(.25rem - 1px) 0 0
}
.card-header {
display: flex;
align-items: center;
border-bottom-width: 1px;
padding-top: 0;
padding-bottom: 0;
padding-right: .625rem;
height: 3.5rem
}
.card-header {
padding: .75rem 1.25rem;
margin-bottom: 0;
color: inherit;
background-color: #fff;
border-bottom: 1px solid rgba(26, 54, 126, 0.125)
}
.card-header,
.card-title {
text-transform: uppercase;
color: rgba(13, 27, 62, 0.7);
font-weight: bold;
font-size: .88rem
}
.btn-actions-pane-right {
margin-left: auto;
white-space: nowrap
}
.card-body {
flex: 1 1 auto;
padding: 1.25rem
}
.card-footer {
padding: .75rem 1.25rem;
background-color: #fff;
border-top: 1px solid rgba(26, 54, 126, 0.125)
}
.btn.btn-wide {
padding: .375rem 1.5rem;
font-size: .8rem;
line-height: 1.5;
border-radius: .25rem
}
.btn {
font-size: 0.8rem;
font-weight: 500
}
.btn-dark:not(:disabled):not(.disabled):active:focus,
.btn-dark:not(:disabled):not(.disabled).active:focus,
.show>.btn-dark.dropdown-toggle:focus {
box-shadow: 0 0 0 0 rgba(82, 88, 93, 0.5)
}