JSFiddle - React, Tailwind, and code Playground

by James

HTML

<div class="tabs">

    <div class="tab">
        <input type="radio" id="tab-1" name="tab-group-1">
        <label for="tab-1">Inventory<i>&#9660;</i></label>
        
        <div class="tab" id="close-tab">
            <input type="radio" id="tab-close" name="tab-group-1">
            <label for="tab-close">Inventory<i>&#9650;</i></label>
        </div> <!-- closes <div class="tab" id="close-tab">-->

        <div class="content">
           
            Hi
            
                <div class="tab">
        <input type="radio" id="tab-8" name="tab-group-2">
        <label for="tab-8">2    <i>&#9660;</i></label>
        
        <div class="tab" id="close-tab">
            <input type="radio" id="tab-close" name="tab-group-2">
            <label for="tab-close">2    <i>&#9650;</i></label>
        </div> <!-- closes <div class="tab" id="close-tab">-->

        <div class="content">
            
            
            Hi
            
                            <div class="tab">
        <input type="radio" id="tab-15" name="tab-group-3">
        <label for="tab-15">3    <i>&#9660;</i></label>
        
        <div class="tab" id="close-tab">
            <input type="radio" id="tab-close" name="tab-group-3">
            <label for="tab-close">3    <i>&#9650;</i></label>
        </div> <!-- closes <div class="tab" id="close-tab">-->

        <div class="content">
            
            
            Hi
            
            
                            <div class="tab">
        <input type="radio" id="tab-22" name="tab-group-4">
        <label for="tab-22">4<i>&#9660;</i></label>
        
        <div class="tab" id="close-tab">
            <input type="radio" id="tab-close" name="tab-group-4">
            <label for="tab-close">4<i>&#9650;</i></label>
  <!--          Close multiple tab groups
            <input type="radio" id="tab-close" name="tab-group-3">
            <label for="tab-close">3<i>&#9650;</i></label>
                
            <input...

CSS

html { overflow-y: scroll; }

.tabs {
    position: relative; /* relative will make the tabs content area push the footer down! */
    top: 40px;
    min-height: 100px; /* This part sucks */
    clear: both;
    margin: 25px 0 60px 0;
}

.tab {
    float: left;
}

.tab label {
    background: #eee;
    padding: 10px;
    cursor: pointer;
    width: 90px;
    text-align: center;
    display: block;
    border: 1px solid #ccc;
    margin-left: -1px;
    position: relative;
    left: 1px;
}

.tab label i {
    font-style: normal;
    font-size: 10px;
    color: #aaa;
}

.tab [type=radio] {
    display: none;
}

.content {
    position: absolute;
    top: 40px;
    opacity: 0;
    left: 0;
    background: white;
    right: 0;
    bottom: 0;
    padding: 0px 20px;
    border: 1px solid #ccc;
    height: 0;
/* ------ Change transition to fade!!! Fade in slower than fade out!!! ------ */
-webkit-transition: all 400ms cubic-bezier(0.250, 0.460, 0.450, 0.940); 
   -moz-transition: all 400ms cubic-bezier(0.250, 0.460, 0.450, 0.940); 
    -ms-transition: all 400ms cubic-bezier(0.250, 0.460, 0.450, 0.940); 
     -o-transition: all 400ms cubic-bezier(0.250, 0.460, 0.450, 0.940); 
        transition: all 400ms cubic-bezier(0.250, 0.460, 0.450, 0.940);
/* ------ Change transition to fade!!! Fade in slower than fade out!!! ------ */ 
}

/* I realize I don't really need separate classes for all of the content above each tab in this demo, but they're to represent different slideshows that will run based on tab selection */
.contentaboveone {
    position: absolute;
    top: -80px;
    left: 30px;
    border: 2px solid #999933;
}

.contentabovetwo {
    position: absolute;
    top: -80px;
    left: 30px;
    border: 2px solid #999933;
}

.contentabovethree {
    position: absolute;
    top: -80px;
    left: 30px;
    border: 2px solid #999933;
}

[type=radio]:checked ~ label {
    z-index: 2;
}
[type=radio]:checked ~ label ~ .content {
    z-index: 1;
    opacity: 1;
    height:...

JavaScript

// requires JQuery
(function( $ ){

    $.fn.uncheckableRadio = function() {

        return this.each(function() {
            $(this).mousedown(function() {
                $(this).data('wasChecked', this.checked);
            });

            $(this).click(function() {
                if ($(this).data('wasChecked'))
                    this.checked = false;
            });
        });

    };

})( jQuery );

$('input[type=radio]').uncheckableRadio();