JSFiddle - React, Tailwind, and code Playground

by Softlink

HTML

<section>
<input type="radio" id="tab1" name="radiobutton" checked="checked" class="first"/>
<label for="tab1" class="tabs">qutIM 0.1</label>
<input type="radio" id="tab2" name="radiobutton" class="second"/>
<label for="tab2" class="tabs">qutIM 0.2</label>
<article class="first-article">
qutIM 0.1 — Однопротокольный клиент, вышедший в 2008 году.
</article>
<article class="second-article">
qutIM 0.2 — Многопротокольный клиент, вышедший в 2010 году.
</article>
</section>

CSS

input { 
    display: none;
}
            
input:checked + label {
    background: #CCC;
}
            
.first:checked ~ .first-article { /* Страшно? */
    display: block;
}
            
.second:checked ~ .second-article {
    display: block;
}
section {
    -webkit-animation: 0.1s hack infinite;
}
            
@-webkit-keyframes hack {
    from {margin: 0; padding: 0;}
    to {margin: 0; padding: 0;}
}
            
article {
    display: none;
}