JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<main class="mt-5">
            <div class="container">
                <section id="services" class="text-center">
                    
                    <div class="row">
                        <div class="col-12">
                            <nav class="landscape-nav">
                                <div class="nav nav-tabs nav-fill" id="nav-tab" role="tablist">
                                    <a class="nav-item nav-link active" id="nav-test1-tab" data-toggle="tab" href="#nav-test1" role="tab" aria-controls="nav-test1" aria-selected="false"> Headline test1</a>
                                    <a class="nav-item nav-link" id="nav-test2-tab" data-toggle="tab" href="#nav-test2" role="tab" aria-controls="nav-test2" aria-selected="true"> Headline test2</a>
                                    <a class="nav-item nav-link" id="nav-test3-tab" data-toggle="tab" href="#nav-test3" role="tab" aria-controls="nav-test3" aria-selected="false"> Headline test3</a>
                                    </div>
                            </nav>
                            <div class="tab-content" id="nav-tabContent">

                                <div class="tab-pane fade active show" id="nav-test1" role="tabpanel" aria-labelledby="nav-test1-tab">
                                    <div class="servicecontent">
                                        <h4>Headline</h4>
                                        <p>Text</p>
                                        <div class="row tablecontainer">
                                            <div class="col-lg-4 col-md-12 col-sm-12 servicetable">
                                                <div class="item2">
                                                    <div class="classtitel">Headline</div>
          ...

CSS

.item {
    padding: 10px;
    border: 1px solid rgba(245,222,179,0.5);
    background-color: rgba(245,222,179,0.5);
    height:100%;
}
.item2 {
    padding: 10px;
    border: 1px solid rgba(232,223,221,0.5);
    background-color: rgba(232,223,221,0.5);
    height:100%;
}
.tablecontainer {
    display: flex;
    margin-top: 3%;
}
.servicetable{
    margin-bottom: 4%;
    border: 2px solid;
}
.classtitel{
    font-family: 'High Summit';
    font-size: 30px;
    text-align: center;
    margin-top: 20px;
}
.classtext{
    margin-top: 20px;
    text-align: left;
}