JSFiddle - React, Tailwind, and code Playground

by Michaël van de Weerd

HTML

<div class="tab-bar">

        <div class="tab">
            <div class="tab-content">
                <span class="tab-icon-wrap"><img class="tab-icon" src="http://amazon.com/favicon.ico" /></span>
                <span class="tab-text">Amazon.com: Online Shopping for Electronics, Apparel, Computers, Books, DVDs & more</span>
                <span class="tab-close"><span class="tab-close-img"></span></span>
            </div>
            <div class="tab-bottom-curve-left"></div>
            <div class="tab-bottom-curve-right"></div>
            <div class="tab-bottom-shadow"></div>
        </div>

        <div class="tab">
            <div class="tab-content">
                <span class="tab-icon-wrap"><img class="tab-icon" src="http://youtube.com/favicon.ico" /></span>
                <span class="tab-text">YouTube</span>
                <span class="tab-close"><span class="tab-close-img"></span></span>
            </div>
            <div class="tab-bottom-curve-left"></div>
            <div class="tab-bottom-curve-right"></div>
            <div class="tab-bottom-shadow"></div>
        </div>

        <div class="tab active-tab">
            <div class="tab-content">
                <span class="tab-icon-wrap"><img class="tab-icon" src="http://google.com/favicon.ico" /></span>
                <span class="tab-text">Google</span>
                <span class="tab-close"><span class="tab-close-img"></span></span>
            </div>
            <div class="tab-bottom-curve-left"></div>
            <div class="tab-bottom-curve-right"></div>
            <div class="tab-bottom-shadow"></div>
        </div>

        <div class="new-tab"></div>

    </div>

    <div id="content">
    </div>

CSS

body {
    background: #21C256;
    /* green windows theme */
    /* using transparency the tabbar should automatically adjust itself to whatever color is defined here */
}

.tab-bar {
    height: 26px;
    /* tab height */
    line-height: 26px;
    /* this is critical for vertical alligning */
    cursor: default;
    user-select: none;
    /* disable text selection */
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    margin: 0;
    padding: 0px 7px 0px 7px;
    z-index: 0;
    white-space: nowrap;
    display: block;
    overflow: hidden;
    width: 100%;
    margin: 0;
    font-size: 0;
}

.tab-bottom-curve-left {
    background: transparent;
    border: inherit;
    opacity: inherit;
    border-left: none;
    border-bottom: none;
    width: 10px;
    height: 4px;
    position: absolute;
    left: -5px;
    bottom: -2px;
    z-index: 5;
    transform: rotate(-31deg);
}

.tab-bottom-curve-right {
    background: transparent;
    border: inherit;
    opacity: inherit;
    border-left: none;
    border-bottom: none;
    width: 10px;
    height: 4px;
    position: absolute;
    right: -5px;
    bottom: -2px;
    transform: rotate(31deg);
    /* box-shadow: inherit; */
    z-index: 0;
}

.tab-icon {
    pointer-events: none;
    /* disable image drag */
}

.tab-text {
    width: 80%;
    height: 100%;
    padding-left: 4px;
}

.tab {
    background: #21C256;
    /* inactive tab background color */
    /*opacity: 0.726;*/
    /* inactive tab transparency */
    width: 213px;
    /* tab width */
    margin-left: 0px;
    /* tab overlap */
    overflow: hidden;
    height: 100%;
    /*padding-bottom: 1px;*/
    border-radius: 3px;
    /* tab curves */
    transform: perspective(100px) rotateX(20deg);
    /* tab shape angle */
    box-shadow: 0 0 2pt 0 rgba(0, 0, 0, 0.9), inset 0 0 0 100px RGBa(255, 255, 255, 0.726);
    /* tab outline */
    white-space: nowrap;
  ...

JavaScript

// To disable image drag cross browser
$(".tab-icon").on("mousedown", function(e) {
  e.preventDefault();
  return false;
});