JSFiddle - React, Tailwind, and code Playground

by Emanuele del Grande

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<div class="logo">
    <span>CSS</span> <span>Tabs</span>
    <div>CSS-styled tabs with trapezoid layout</div>
</div>
<p>Beautiful trapezoid tabs with CSS 3.<br />
    Typographic perfection. (Not yet responsive).
</p>

<ul class="tabs">
    <li>
        <a href="#">The Bear</a>
    </li>
    <li class="tab-active">
        <a href="#">A giant not so tender</a>
    </li>
    <li>
        <a href="#">Bad relation with humans</a>
    </li>
    <li>
        <a href="#">Tab without content</a>
    </li>
    <li>
        <a href="#">.</a>
    </li>
</ul>
<div class="tab-contents">
    <section>
        <h2>The bear</h2>
        Bears are carnivoran mammals of the family Ursidae.<br />
        They are classified as caniforms, or doglike carnivorans. Although only eight species of bears are extant, they are widespread, appearing in a wide variety of habitats throughout the Northern Hemisphere and partially in the Southern Hemisphere.<br />
        Bears are found on the continents of North America, South America, Europe, and Asia. Common characteristics of modern bears include large bodies with stocky legs, long snouts, small rounded ears, shaggy hair, plantigrade paws with five nonretractile claws, and short tails.
    </section>
    <section>
        <p><em>This tab is active by default.</em></p>
        <h2>A giant not so tender</h2>
        While the polar bear is mostly carnivorous, and the giant panda feeds almost entirely on bamboo, the remaining six species are omnivorous with varied diets. With the exception of courting individuals and mothers with their young, bears are typically solitary animals.<br />
        They may be diurnal or nocturnal and have an excellent sense of smell. Despite their heavy build and awkward gait, they are adept runners, climbers, and swimmers. Bears use...

CSS

@import url(https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap);

:root {
  --font-color: #444;
  --font-family: Inter, Roboto, Arial, Helvetica;
  --font-size: 14px;
  --font-weight: 300;
  --letter-spacing: -0.5px;
  --main-color: #607f8b; /* #4ae */
  --inner-border-width: 1px;
  --border-color: #ddd;
  --v-padding: 10px;
}


/* GENERIC STYLE */
*, *:before, *:after { margin; 0; padding: 0; box-sizing: border-box; outline: none; }
html, body {
    font: 14px var(--font-family); color: var(--font-color); line-height: 1.4em;
    font-weight: var(--font-weight); letter-spacing: var(--letter-spacing);
}
.logo { font: 42px var(--font-family); margin: 0; padding: 10px 0 0 20px; font-weight: 800; letter-spacing: -3px; white-space: nowrap; }
.logo span:first-child {
    position: relative; top: 0; left: 0; padding: 0 13px 0 10px; color: var(--main-color); background: var(--main-color); color: #fff;
    clip-path: ellipse(100% 125% at 100% 50%); z-index: 1;
}
.logo span:nth-child(2) { position: relative;top: 0; left: 0; margin: 0 0 0 -13px; background: transparent; z-index: 2; }

.logo div { font: 12px var(--font-family); padding: 0 0 0 70px; letter-spacing: -0.5px; }


/* TABS STYLE */
.tabs { margin: 20px 0 0 0; padding: 20px 25px 0 25px; }
.tabs:after { content: ""; display: block; width: 0; height: 0; font-size: 0; clear: both; }

.tabs li {
  list-style-type: none; display: block; float: left; position: relative;
  top: 0; left: 0; min-width: 18px; height: 36px; padding: 0 5px; margin: 0 10px;
  border: 1px solid #ddd; border-width: 1px 0; background: #f4f4f4;
  line-height: 36px; text-align: center;
}

.tabs li:before {
  content: ""; display: block; float: left; width: 20px; height: 36px; position: absolute;
  height: 36px; top: -1px; left: -10px; margin: 0; padding: 0;
  border: 1px solid #ddd;  border-width: 1px 0 1px 1px; border-bottom-color: inherit;
  border-top-left-radius: 4px; background: inherit;
 ...

JavaScript

$(document).ready(function(e) {
    var $tabsContainer = $('.tabs');
    var $tabs = $('.tabs li');
    var $content = $('.tab-contents');
    var activeClass = 'tab-active';

    var activeIndex = $tabsContainer.find('li.' + activeClass).index();

    // pre-hide tab contents
    $content.children().hide();
    $content.children().eq(activeIndex).show();

    $tabsContainer.on('mousedown', 'li', function(e) {
        $tabs.removeClass(activeClass);
        var $currentTab = $(this);
        $currentTab.addClass(activeClass);
        var selectedIndex = $currentTab.index();

        $content.children().hide();
        $content.children().eq(selectedIndex).show();

        e.preventDefault();
    }).on('click', 'li', function(e) {
        e.preventDefault();
    });
});