JSFiddle - React, Tailwind, and code Playground

by Victor

HTML

<div class="example bbar">
<p>
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure velit recusandae molestias dolorum, ullam voluptatem eveniet voluptate aspernatur veritatis suscipit quod harum necessitatibus laborum, nesciunt eum obcaecati error debitis? A!
</p>
  
</div>

SCSS

$bbarBasePadding : 15px;
$bbarHeight: 20px;
$bbarRadius: 5px 5px 0 0;
$bbarLeftOffset: ($bbarHeight / 2);
$bbarRed: red;
$bbarYellow: yellow;
$bbarGreen: green;

.example {
  font-family: sans-serif;
  font-weight: lighter;
  font-size: 14px;
  line-height: 18px;

  min-height: 50px;
  /* overflow:scroll; */
  width: 400px;
  background:white;
  padding: $bbarBasePadding;
  box-sizing:border-box;
  transition: all 0.3s linear;
  &:hover {
    min-height: none;
  }
  
}

.bbar {
  
  position:relative;
  padding-top: ($bbarBasePadding + $bbarHeight);
      border-radius: $bbarRadius;

  &:before {
    content: '';
    display:block;
    width: 100%;
    height: $bbarHeight;
    position: absolute;
    top: 0;
    left: 0;
    background:#e3e3e3;
    border-radius: $bbarRadius;
  }
   &:after {
    content: '';
    display:block;
    width: ($bbarHeight / 2);
    height: ($bbarHeight / 2);
    position: absolute;
    top: ($bbarHeight / 2);
    left: $bbarLeftOffset;
    transform:translateY(-($bbarHeight / 4));
    border-radius: 20px;
    background:$bbarRed;
    box-shadow: ($bbarHeight * 0.75) 0 0 $bbarYellow, ($bbarHeight * 1.5) 0 0 $bbarGreen;
  }
  
}