Tabs for Donation support

by vovkasolovev

HTML

<div class="tabs_container">
<div class="tabs">
<input type="radio" id="radio-1" name="tabs" checked />
<label class="tab" for="radio-1">Yandex.Money</label>
<input type="radio" id="radio-2" name="tabs"  />
<label class="tab" for="radio-2">PayPal</label>
<input type="radio" id="radio-3" name="tabs" />
<label class="tab" for="radio-3">Bitcoin</label>
<input type="radio" id="radio-4" name="tabs" />
<label class="tab" for="radio-4">Sberbank</label>
<span class="glider"></span>
<div class="tabs_content">
<article class="tab_content radio-1">
<h3><a href="https://money.yandex.ru/to/4100144196397">Яндекс.Деньги</a></h3>
<div class="donate_item"><iframe src="https://money.yandex.ru/embed/shop.xml?account=4100144196397&amp;quickpay=shop&amp;payment-type-choice=on&amp;mobile-payment-type-choice=on&amp;writer=seller&amp;targets=%D0%92%D0%BB%D0%B0%D0%B4%D0%B8%D0%BC%D0%B8%D1%80%D1%83%20%D0%A1%D0%BE%D0%BB%D0%BE%D0%B2%D1%8C%D1%91%D0%B2%D1%83&amp;targets-hint=&amp;default-sum=1000&amp;button-text=03&amp;comment=on&amp;hint=%D0%9A%D0%BE%D0%BD%D1%82%D0%B0%D0%BA%D1%82%D0%BD%D1%8B%D0%B5+%D0%B4%D0%B0%D0%BD%D0%BD%D1%8B%D0%B5%2C+%D0%B5%D1%81%D0%BB%D0%B8+%D1%85%D0%BE%D1%82%D0%B8%D1%82%D0%B5+%D1%87%D1%82%D0%BE%D0%B1%D1%8B+%D1%8F+%D1%81%D0%B2%D1%8F%D0%B7%D0%B0%D0%BB%D1%81%D1%8F&amp;successURL=http%3A%2F%2Fvovkasolovev.ru%2Fdonate" width="100%" height="300" frameborder="0" scrolling="no"></iframe>
</div>
</article>
<article class="tab_content radio-2">
<h3><a href="https://www.paypal.me/vovkasolovev/">Paypal</a></h3>
<div class="donate_item" style="background-color: rgb(255, 255, 255); text-align: center; box-shadow: rgba(139, 139, 139, 0.5) 0px 2px 7px 0px; padding: 40px;">
<img src="https://pics.paypal.com/00/p/NWIwYTUwNjQtMDZlZC00ODQ4LWFkMzQtOWQ1YTNmNjFhMmRj/$_58.jpg" style="width: 96px;height: 96px; box-shadow: rgba(2, 2, 2, 0.3) 0px 5px 12px 0px;overflow: hidden; border-radius: 50%;">
<h4>Соловьёв Владимир</h4>
<a href="http://paypal.me/vovkasolovev/10"><div class="donate_item"...

CSS

:root { --primary-color: #55aa33; --secondary-color: #f0f0f0; --secondary-color-transparent: #f0f0f000; --third-color: #ddf7ba; --tabs-number: 4; --tab-width: 140px; }
#page{background: transparent; box-shadow:none;}
#content h1 {color: var(--primary-color);}
.tabs_container {display: flex; align-items: flex-start; justify-content: center; max-width: calc(var(--tabs-number)*var(--tab-width));min-height: 420px; margin: auto; overflow: hidden; box-shadow: 0 0 5px 0 rgba(47, 100, 197, 0.15), 0 8px 15px 0 rgba(93, 106, 115, 0.15); border-radius: 40px;padding: 20px;margin-top: 20px;background: white;}
.tabs { display: flex; flex-wrap: wrap; align-items: stretch; position: relative;  box-sizing: border-box; width: calc(var(--tabs-number)*var(--tab-width)); min-height: 100%;}
.tabs * { z-index: 2;}
input[type="radio"] { display: none; }
.tab { display: -webkit-box; display: flex; align-items: center; justify-content: center; height: 54px; width: calc( 100% / var(--tabs-number) ); border-radius: 50px; cursor: pointer;  transition: color 0.15s ease-in; color: #0088bb;}
.glider { position: absolute; display: -webkit-box; display: flex; height: 54px; width: calc( 100% / var(--tabs-number) ); background-color: var(--third-color); z-index: 1; border-radius: 50px; -webkit-transition: 0.25s ease-out; transition: 0.25s ease-out;}
.tabs_content{width:100%;margin-top: 20px;}
.tab_content{padding: 10px; flex-basis: 100%; min-height: 410px;}

.tabs>input, .tab_content {display: none;}
label {  cursor: pointer;text-transform: uppercase; font-weight: 700; font-family: sans-serif; font-size: 0.9em;}

input[type="radio"]:checked + label { color: var(--primary-color); }
input[id="radio-1"]:checked ~ .glider { -webkit-transform: translateX(0); transform: translateX(0); }
input[id="radio-2"]:checked ~ .glider { -webkit-transform: translateX(100%); transform: translateX(100%); }
input[id="radio-3"]:checked ~ .glider { -webkit-transform: translateX(200%); transform: translateX(200%);...