JSFiddle - React, Tailwind, and code Playground

by Keith Jeter

HTML

<div class="c-pane">
  <div class="c-pane__content">
    <h1 class="c-pane__title js-editable">
      Java Sun Reflections
    </h1>
    <div class="c-pane__meta">
      Thursday, April 9th
      <time>8:15 p.m.</time>
    </div>
  </div>
  <div class="c-tools">
    <div class="c-tools__row">
      <div class="c-btn-group">
        <button class="c-btn">
          <svg width="20px" height="20px" viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <defs></defs>
    <g id="add-user" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
        <g id="if_Account_add_2202248" fill-rule="nonzero" fill="#000000">
            <path d="M10,10.9090909 C13,10.9090909 15.4545455,8.45454545 15.4545455,5.45454545 C15.4545455,2.45454545 13,0 10,0 C7,0 4.54545455,2.45454545 4.54545455,5.45454545 C4.54545455,8.45454545 7,10.9090909 10,10.9090909 Z M10,0.909090909 C12.5,0.909090909 14.5454545,2.95454545 14.5454545,5.45454545 C14.5454545,7.95454545 12.5,10 10,10 C7.5,10 5.45454545,7.95454545 5.45454545,5.45454545 C5.45454545,2.95454545 7.5,0.909090909 10,0.909090909 Z" id="Shape"></path>
            <path d="M14.0909091,11.8181818 L5.90909091,11.8181818 C2.63636364,11.8181818 0,14.4545455 0,17.7272727 L0,20 L0.909090909,20 L0.909090909,17.7272727 C0.909090909,14.9545455 3.13636364,12.7272727 5.90909091,12.7272727 L14.0909091,12.7272727 L14.0909091,11.8181818 Z" id="Shape"></path>
            <polygon id="Shape" points="20 16.3636364 17.2727273 16.3636364 17.2727273 13.6363636 16.3636364 13.6363636 16.3636364 16.3636364 13.6363636 16.3636364 13.6363636 17.2727273 16.3636364 17.2727273 16.3636364 20 17.2727273 20 17.2727273 17.2727273 20 17.2727273"></polygon>
        </g>
    </g>
</svg>
        </button>
        <button class="c-btn c-btn--hint">M</button>
        <button class="c-btn c-btn--hint">E</button>
        <button class="c-btn">+5</button>
      </div>
      <button class="c-btn js-edit">
       ...

CSS

body {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  height: 100vh;
  font-family: "Lato", sans-serif;
  font-size: 16px;
}

.c-pane {
  position: relative;
  border: 1px solid #D3DAD9;
  border-radius: 3px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  width: 400px;
  height: 400px;
  overflow: hidden;
}

.c-pane__content {
  text-align: center;
  max-width: 200px;
}

.c-pane__title {
  margin: 0 0 10px 0;
  padding: 20px 20px;
  border: 1px solid transparent;
  border-radius: 5px;
  -webkit-transition: border-color 0.3s cubic-bezier(0.59, 0.755, 0.05, 1.075);
  transition: border-color 0.3s cubic-bezier(0.59, 0.755, 0.05, 1.075);
}
.c-pane__title.is-editing {
  border: 1px solid #D3DAD9;
}

.c-pane__meta {
  font-style: italic;
  font-size: 0.9rem;
}
.c-pane__meta > time {
  display: block;
}

.c-tools {
  position: absolute;
  bottom: 0;
  left: 0;
  width: calc(100% - 40px);
  padding: 20px;
  -webkit-transition: all 0.3s cubic-bezier(0.59, 0.755, 0.05, 1.075);
  transition: all 0.3s cubic-bezier(0.59, 0.755, 0.05, 1.075);
}

.c-tools--edit {
  background-color: #7CD4C0;
  border: 1px solid #6CC4B0;
  border-radius: 0 0 3px 3px;
  -webkit-transform: translateY(90%);
          transform: translateY(90%);
}
.c-tools--edit.is-active {
  -webkit-transform: translateY(0);
          transform:...

JavaScript

const edit = document.querySelectorAll('.js-edit');
const editable = document.querySelector('.js-editable');
const toolbar = document.querySelector('.js-toolbar');

edit.forEach((el) => {
  el.addEventListener('click', () => {
    toolbar.classList.toggle('is-active');
    editable.classList.toggle('is-editing');
  })
})