JSFiddle - React, Tailwind, and code Playground

HTML

<div class="md-fenced-code-tabs" id="tab-tab-group-4">
    <input name="tab-group-4" type="radio" id="tab-group-4-0_c" checked="checked" class="code-tab" data-lang="c" aria-controls="tab-group-4-0_c-panel" role="tab">
    <label for="tab-group-4-0_c" class="code-tab-label" data-lang="c" id="tab-group-4-0_c-label">C</label>
    <div class="code-tabpanel" role="tabpanel" data-lang="c" id="tab-group-4-0_c-panel" aria-labelledby="tab-group-4-0_c-label">
printf("Hello World!");
</div>
    <input name="tab-group-4" type="radio" id="tab-group-4-1_java" class="code-tab" data-lang="java" aria-controls="tab-group-4-1_java-panel" role="tab">
    <label for="tab-group-4-1_java" class="code-tab-label" data-lang="java" id="tab-group-4-1_java-label">Java</label>
    <div class="code-tabpanel" role="tabpanel" data-lang="java" id="tab-group-4-1_java-panel" aria-labelledby="tab-group-4-1_java-label">
    system.out.println("Hello World!");
    </div>
</div>

<br>
<br>
<br>
blahblahblah
<br>
<br>
<br>

<div class="md-fenced-code-tabs" id="tab-tab-group-5">
<input name="tab-group-5" type="radio" id="tab-group-5-0_c" checked="checked" class="code-tab" data-lang="c" aria-controls="tab-group-5-0_c-panel" role="tab">
<label for="tab-group-5-0_c" class="code-tab-label" data-lang="c" id="tab-group-5-0_c-label">C</label>
<div class="code-tabpanel" role="tabpanel" data-lang="c" id="tab-group-5-0_c-panel" aria-labelledby="tab-group-5-0_c-label">
printf("Hello World2!");
</div>
<input name="tab-group-5" type="radio" id="tab-group-5-1_java" class="code-tab" data-lang="java" aria-controls="tab-group-5-1_java-panel" role="tab">
<label for="tab-group-5-1_java" class="code-tab-label" data-lang="java" id="tab-group-5-1_java-label">Java</label>
<div class="code-tabpanel" role="tabpanel" data-lang="java" id="tab-group-5-1_java-panel" aria-labelledby="tab-group-5-1_java-label">
system.out.println("Hello World2!");
</div>
</div>

CSS

.md-fenced-code-tabs * {
    box-sizing: border-box;
}

.md-fenced-code-tabs {
    display: flex;
    position: relative;
    flex-wrap: wrap;
    width: 100%;
}

.md-fenced-code-tabs input {
    position: absolute;
    opacity: 0;
}

.md-fenced-code-tabs label {
    width: auto;
    padding: 4px;
    margin: 0 8px;
    cursor: pointer;
    color: #aaa;
}

.md-fenced-code-tabs input:checked + label {
    color: #333;
}

.md-fenced-code-tabs .code-tabpanel {
    display: none;
    width: 100%;
    margin-top: 10px;
    order: 99;
}

.md-fenced-code-tabs input:checked + label + .code-tabpanel {
    display: block;
}

.md-fenced-code-tabs pre,
.md-fenced-code-tabs .codehilite {
    width: 100%;
    margin: 0px;
}