JSFiddle - React, Tailwind, and code Playground

by Kocsten

HTML

<label for="What">ZorNet.Ru: Создание сайта uCoz</label>
<input id="What" type="radio" name="nav" checked>
<article class="zotresak_tymilab">
    <p>В прошлом месяце в новостях появилась новая партнерская программа GeForce, внедренная Nvidia для того, чтобы углубить рынок на high-end графических процессорах, требуя от производителей графических процессоров «выровнять» свои бренды с Nvidia, если они хотят получать выделение GPU или рассматриваться для разных маркетинговые фонды.</p>
</article>

<label for="Where">Скрипты для uCoz</label>
<input id="Where" type="radio" name="nav">
<article class="zotresak_tymilab">    
    <p>Графические процессоры AMD, выпущенные AMD, были эффективно выбиты из уровней, выровненных по NV, что мы фактически видели, когда мы исследовали влияние GPP на партнерские бренды, хотя детали того, как была реализована программа, оставались оспариваемыми. Nvidia настаивала на том, что все дело было полезной программой для оказания помощи производителям. Теперь Nvidia объявила, что полностью отменила программу.</p>
    <p>Недавно было сказано о нашей партнерской программе GeForce. Слухи, догадки и недочеты выходят далеко за рамки его намерений. Вместо того, чтобы бороться с дезинформацией, мы решили отменить программу.</p>
</article>

<label for="Why">Шаблоны для uCoz</label>
<input id="Why" type="radio" name="nav">
<article class="zotresak_tymilab">
    <p>У GPP была простая цель - обеспечить, чтобы геймеры знали, что они покупают, и могут сделать четкий выбор ... С GPP мы попросили наших партнеров маркировать свои продукты таким образом, чтобы это было совершенно ясно. Выбор GPU значительно определяет игровую платформу. Таким образом, бренд GPU должен быть прозрачным - никаких заменяющих графических процессоров, скрытых за кучей техно-жаргона.</p>
</article>

CSS

* {
    margin: 0;
    padding: 0;
    font: normal 1em/150% Sans-Serif;
}

input,
.zotresak_tymilab {display: none;}

label,
input:checked + .zotresak_tymilab {display: block;}

label {
    cursor: pointer;
    background: -webkit-linear-gradient(#09277d, #092e9c);
    color: #f7f3f3;
    padding: 5px 26px;
    border: 1px solid #c7c6c6;
    margin-top: -1px;
}

label:hover {background: -webkit-linear-gradient(#0b2e94, #0c54b1);}

.zotresak_tymilab {
    padding: 26px;
    text-indent: 26px;  
    text-align: justify;
    border: 1px solid #d8d2d2;
    border-top: none;
}

p + p {margin:21px 0 0;}