JSFiddle - React, Tailwind, and code Playground

HTML

<h1>Pure CSS Tabs</h1>
    <div class="tabs">
        <ul>
            <li class="tab">
                <input type="radio" name="tabs" id="tab1" checked="">
                <label for="tab1">MySQL</label>
                <div id="tab-content1" class="tab-content">
                  <p>MySQL is (as of July 2013) the world's most widely used open-source relational database management system (RDBMS), enabling the cost-effective delivery of reliable, high-performance and scalable Web-based and embedded database applications. It is widely-used as the database component of LAMP (Linux, Apache, MySQL, Perl/PHP/Python) web application software stack.
MySQL was developed by Michael Widenius and David Axmark in 1994. Presently MySQL is maintained by Oracle (formerly Sun, formerly MySQL AB).
MySQL tutorial of w3resource is a comprehensive tutorial to learn MySQL(5.6). We have hundreds of examples covered, often with PHP code. This helps you to learn how to create PHP-MySQL based web applications.
Production Releases MySQL 5.6 : Latest General Availability (Production) release
</p>
                </div>
            </li>

            <li class="tab">
                <input type="radio" name="tabs" id="tab2">
                <label for="tab2">PostgreSQL</label>
                <div id="tab-content2" class="tab-content">
                  <p>This document gives you an overview of PostgreSQL and lists what you will learn in the following documents of w3resource PostgreSQL tutorial.	PostgreSQL is claimed to be the most advanced open source database solution. PostgreSQL is an object-relational database management system (ORDBMS).
PostgreSQL is pronounced Post-Gres-Q-L. PostgreSQL development is performed by a team of mostly volunteer developers spread throughout the world and communicating via the Internet. It is a community project and is not controlled by any company.
PostgreSQL is distributed under a license similar to BSD and MIT. Basically, it allows users to do anything...

CSS

.tabs {
    width: 100%;
    overflow: auto
}
.tabs li.tab {
    float: none;
    display: inline;
}
.tabs input[type="radio"] {
    display: none;
}
.tabs .tab>label {
    padding: 8px;
    border-radius: 5px 5px 0 0;
    border: 1px solid #ddd;
    cursor: pointer;
    top: 0;
    z-index: 3;
    background-color: #eee;
}
.tabs .tab-content {
    z-index: 2;
    display: none;
    float: left;
    padding: 1em;
    left: 0;
    border: 1px solid #ddd;
    margin-top: 8px;
    min-width: 90%;
}
.tabs [id^="tab"]:checked + label {
    background-color: #fff;
    border-bottom: 1px solid #fff;
}
.tabs [id^="tab"]:checked ~ [id^="tab-content"] {
    display: block;
}