JSFiddle - React, Tailwind, and code Playground

by justjohn

HTML

<div class="bar">
    
</div>
<div class="outer">
    <div class="inner">
    </div>
</div>

CSS

.bar {
    position:absolute;
    left:5px;
    top:17px;
    right:5px;
    height: 40px;
    
    border: 1px solid rgb(225,225,225);
    
    -moz-border-radius: 0 0 120px 120px / 0 0 6px 6px;
    border-radius: 0 0 120px 120px / 0 0 6px 6px;
    
    background-image: linear-gradient(bottom, rgb(225,225,225) 0%, rgb(255,255,255) 100%);
    background-image: -o-linear-gradient(bottom, rgb(225,225,225) 0%, rgb(255,255,255) 100%);
    background-image: -moz-linear-gradient(bottom, rgb(225,225,225) 0%, rgb(255,255,255) 100%);
    background-image: -webkit-linear-gradient(bottom, rgb(225,225,225) 0%, rgb(255,255,255) 100%);
    background-image: -ms-linear-gradient(bottom, rgb(225,225,225) 0%, rgb(255,255,255) 100%);
    
    background-image: -webkit-gradient(
        linear,
        left bottom,
        left top,
        color-stop(0, rgb(225,225,225)),
        color-stop(1, rgb(255, 255, 255))
    );
    
    -webkit-box-shadow:0 1px 5px rgba(0, 0, 0, 0.3);
    -moz-box-shadow:0 1px 5px rgba(0, 0, 0, 0.3);
    box-shadow:0 1px 5px rgba(0, 0, 0, 0.3);
}

.outer {
    position:absolute;
    right:25px;
    overflow:hidden;
    width: 60px;
    padding-bottom: 40px;
}

.inner {
    position:relative;
    background: rgba(150, 0, 0, 1);
    width: 100%;
    height: 100px;
    
    -moz-border-radius: 3px 3px 0 0 / 10px 10px 0 0;
    border-radius: 3px 3px 0 0  / 10px 10px 0 0;
    
    background-image: linear-gradient(bottom, rgb(150, 0, 0) 70%, rgb(50, 0, 0) 100%);
    background-image: -o-linear-gradient(bottom, rgb(150, 0, 0) 70%, rgb(50, 0, 0) 100%);
    background-image: -moz-linear-gradient(bottom, rgb(150, 0, 0) 70%, rgb(50, 0, 0) 100%);
    background-image: -webkit-linear-gradient(bottom, rgb(150, 0, 0) 70%, rgb(50, 0, 0) 100%);
    background-image: -ms-linear-gradient(bottom, rgb(150, 0, 0) 70%, rgb(50, 0, 0) 100%);
    
    background-image: -webkit-gradient(
        linear,
        left bottom,
        left top,
        color-stop(0.85, rgb(150, 0,...