JSFiddle - React, Tailwind, and code Playground

by Dawid Karwat

HTML

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css">
<div id=example1 class="window">
  <div class="title-bar">
    <div class=upper-bar>
      <div class="more"><i class="fas fa-angle-down"></i></div>
      <div class="between">Old style</div>
      <div class="close"><i class="fas fa-times-circle"></i></div>
    </div>
    <div class=lower-bar>
      (Current window styles)
    </div>
  </div>
  <div class="window-content"></div>
</div>

<div id=example2 class="window">
  <div class="title-bar">
    <div class=upper-bar>
      <div class="more"><i class="fas fa-angle-down"></i></div>
      <div class="between">New style</div>
      <div class="close"><i class="fas fa-times-circle"></i></div>
    </div>
    <div class=lower-bar>
      (suggested changes of the clickable area of closing a window)
    </div>
  </div>
  <div class="window-content"></div>
</div>

CSS

:root {
  --padding: 6px;
  --size: 26px;
}

body {
  background-color: #8A8;
}

.window {
  width: 100%;
  overflow: hidden;
  box-shadow: 0 0 7px black;
}

.title-bar {
  box-sizing: border-box;
  width: 100%;
  border-radius: 4px 4px 0 0;
  min-height: var(--size);
  padding: var(--padding);
  background-color: lightgrey;
}

.window + .window {
  margin-top: 30px;
}

.title-bar > * + * {
  margin-top: var(--padding);
}

.upper-bar {
  box-sizing: border-box;
  position: relative;
  height: var(--size);
}

.upper-bar > * {
  position: absolute;
}

.more,
.close {
  box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.25);
  cursor: pointer;
}

#example1 .more, #example1 .close {
  width: var(--size);
  height: var(--size);
}

#example1 .more {
  left: 0;
}

#example1 .close {
  right: 0;
}

#example2 .more, #example2 .close {
  top: calc(0px - var(--padding));
  width: calc(var(--size) + 2*var(--padding));
  height: calc(var(--size) + 2*var(--padding));
}

#example2 .more {
  left: calc(0px - var(--padding));
}

#example2 .close {
  right: calc(0px - var(--padding));
}

.between {
  pointer-events: none;
  box-sizing: border-box;
  width: calc(100% - 2*var(--size) - 2*var(--padding));
  height: 100%;
  margin: 0 var(--padding);
  padding: var(--padding) 0;
  left: var(--size);
  color: #222;
  font-family: 'Noto Sans', sans-serif;
  font-weight: bold;
  font-size: calc(var(--size) - 2*var(--padding));
  line-height: calc(var(--size) - 2*var(--padding));
}

.fas {
    position: relative;
}

.fas::before {
    position: absolute;
    left: calc(50% - 0.5em);
    top: calc(50% - 0.5em);
}

.fas.fa-times-circle,
.fas.fa-angle-down {
    width: var(--size);
    height: var(--size);
    font-size: calc(var(--size) - 1.5*var(--padding));
}


.fas.fa-times-circle {
    color: #7A7;
}

.fas.fa-angle-down {
    color: rgba(0, 0, 0, 0.5);
}

#example2 .fas.fa-times-circle,
#example2 .fas.fa-angle-down {
    width: calc(var(--size) + 2*var(--padding));
    height: calc(var(--size) +...