<!--HTML-->

    <div class="tabs">

    <input type="radio" name="tab-btn" id="tab-btn-1" value="" checked>
    <label for="tab-btn-1">Политика</label>

    <input type="radio" name="tab-btn" id="tab-btn-2" value="">
    <label for="tab-btn-2">Закон и порядок</label>

    <input type="radio" name="tab-btn" id="tab-btn-3" value="">
    <label for="tab-btn-3">Медицина</label>

        <input type="radio" name="tab-btn" id="tab-btn-4" value="">
    <label for="tab-btn-4">Культура</label>

     <input type="radio" name="tab-btn" id="tab-btn-5" value="">
    <label for="tab-btn-5">Сфера обслуживания</label>

     <input type="radio" name="tab-btn" id="tab-btn-6" value="">
    <label for="tab-btn-6">СМИ</label>

     <input type="radio" name="tab-btn" id="tab-btn-7" value="">
    <label for="tab-btn-7">Криминал</label>

     <input type="radio" name="tab-btn" id="tab-btn-8" value="">
    <label for="tab-btn-8">Разное</label>

    <div id="content-1">
      Содержимое 1...
    </div>
    <div id="content-2">
      Содержимое 2...
    </div>
    <div id="content-3">
      Содержимое 3...
    </div>
   <div id="content-4">
      Содержимое 4...
    </div>
 <div id="content-5">
      Содержимое 5...
    </div>
 <div id="content-6">
      Содержимое 6...
    </div>
 <div id="content-7">
      Содержимое 7...
    </div>
 <div id="content-8">
      Содержимое 8...
    </div>


  </div>         	
         
<style>
*,
*::before,
*::after {
box-sizing: border-box;
    }

.tabs {
font-size: 0;
width: 600px;
margin-left: auto;
margin-right: auto;
height: 615px;
background-image: url(https://i.imgur.com/9IDPC5F.png);
background-size: 100%;
}


.tabs>input[type="radio"] {
display: none;
}

.tabs>div {
 /* скрыть контент по умолчанию */
display: none;
border: 1px solid #e0e0e0;
padding: 10px 15px;
font-size: 16px;
}

/* отобразить контент, связанный с вабранной радиокнопкой (input type="radio") */
#tab-btn-1:checked~#content-1,
#tab-btn-2:checked~#content-2,
#tab-btn-3:checked~#content-3, 
#tab-btn-4:checked~#content-4,
#tab-btn-5:checked~#content-5,
#tab-btn-6:checked~#content-6,
#tab-btn-7:checked~#content-7,
#tab-btn-8:checked~#content-8 {
display: block;
}

.tabs>label {
padding: 58.5px 0px 0 0px;
text-align: center;
user-select: none;
font-size: 11px;
font-family: tahoma;
color: #58654b;
text-transform: uppercase;
line-height: 1.5;
transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out;
cursor: pointer;
width: 200px;
display: flex;
flex-flow: column;
top: -27px;
position: relative; 
}

.tabs>label:not(:first-of-type) {
border-left: none;
}

.tabs>input[type="radio"]:checked+label {
border-bottom: ;
}

#content-1 {
left: 250px; 
top: -560px;
position: relative;
width: 300px;
height: auto;
}

#content-2 {
left: 250px; 
top: -200px;
position: relative;
width: 300px;
height: auto;
}


#content-3 {
left: 250px; 
top: -200px;
position: relative;
width: 300px;
height: auto;
}

#content-4 {
left: 250px; 
top: -200px;
position: relative;
width: 300px;
height: auto;
}

#content-5 {
left: 250px; 
top: -200px;
position: relative;
width: 300px;
height: auto;
}

#content-6 {
left: 250px; 
top: -200px;
position: relative;
width: 300px;
height: auto;
}

#content-7 {
left: 250px; 
top: -200px;
position: relative;
width: 300px;
height: auto;
}

#content-8 {
left: 250px; 
top: -200px;
position: relative;
width: 300px;
height: auto;
}


</style>