JSFiddle - React, Tailwind, and code Playground

by Lloyd Atkinson

HTML

<div id="inline-update" v-cloak>
  <div v-if="isUpdating">
    <span>{{ current }}</span>
    <span class="inline-update-alignment" v-on:click="isUpdating = !isUpdating">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 53.255 53.255">
        <path d="M39.598 2.343a8 8 0 0 1 11.314 11.314L39.598 2.343z" fill="#d75a4a" />
        <path fill="#ed8a19" d="M42.426 17.899L16.512 43.814l-.53 4.773L44.548 20.02zM10.325 42.93l4.773-.53 25.914-25.915-4.242-4.242-25.915 25.914zM35.356 10.829l-2.122-2.122L4.668 37.273l4.773-.53z" />
        <path fill="#c7cac7" d="M48.79 15.778l2.122-2.121L39.598 2.343l-2.122 2.122h.001zM36.062 5.879l-1.414 1.414 11.314 11.313 1.414-1.414z" />
        <path d="M14.424 44.488l-5.122.569a.995.995 0 0 1-.109.006h-.002a.995.995 0 0 1-.109-.006c-.039-.004-.071-.026-.108-.035a.982.982 0 0 1-.207-.067 1.016 1.016 0 0 1-.138-.084 1.002 1.002 0 0 1-.257-.261.974.974 0 0 1-.145-.346c-.007-.032-.024-.059-.028-.092-.004-.038.01-.073.01-.11 0-.038-.014-.072-.01-.11l.569-5.122-5.122.569a1.046 1.046 0 0 1-.111.006c-.079 0-.152-.024-.227-.042L.442 51.399l2.106-2.106a.999.999 0 1 1 1.414 1.414l-2.106 2.106 12.03-2.864a.983.983 0 0 1-.03-.339l.568-5.122z"
        fill="#fbce9d" />
        <path d="M3.962 49.293a.999.999 0 0 0-1.414 0L.442 51.399 0 53.255l1.856-.442 2.106-2.106a1 1 0 0 0 0-1.414z" fill="#38454f" />
        <path fill="#f2ecbf" d="M48.79 15.778L37.477 4.465h-.001l-1.414 1.414 11.314 11.313 1.414-1.414z" />
        <path d="M41.012 16.485L15.098 42.4l-4.773.53.53-4.773L36.77 12.243l-1.414-1.414L9.441 36.743l-4.773.53-1.133 1.133-.228.957c.075.018.147.042.227.042.036 0 .074-.002.111-.006l5.122-.569-.569 5.122c-.004.038.01.073.01.11 0 .038-.014.072-.01.11.004.033.021.06.028.092a1.016 1.016 0 0 0 .245.473c.047.05.1.094.157.134a.924.924 0 0 0 .138.084c.065.031.135.05.207.067.038.009.069.03.108.035a.982.982 0 0 0 .109.006h.004c.035 0 .072-.002.109-.006l5.122-.569-.569 5.122a.981.981 0 0 0 .03.339l.963-.229 1.133-1.132.53-4.773L42.426...

CSS

[v-cloak] {
  display: none;
}

.inline-update-alignment {
  display: inline-block;
  vertical-align: middle;
  width: 16px;
  color: blue;
  cursor: pointer;
}

.tick-icon-svg {
  background: url(data:image/svg+xml;utf8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTYuMC4wLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgd2lkdGg9IjUxMnB4IiBoZWlnaHQ9IjUxMnB4IiB2aWV3Qm94PSIwIDAgNDQ4LjggNDQ4LjgiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDQ0OC44IDQ0OC44OyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+CjxnPgoJPGcgaWQ9ImRvbmUiPgoJCTxwb2x5Z29uIHBvaW50cz0iMTQyLjgsMzIzLjg1IDM1LjcsMjE2Ljc1IDAsMjUyLjQ1IDE0Mi44LDM5NS4yNSA0NDguOCw4OS4yNSA0MTMuMSw1My41NSAgICIgZmlsbD0iIzkxREM1QSIvPgoJPC9nPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+Cjwvc3ZnPgo=)
  no-repeat;
}

JavaScript

new Vue({
  el: '#inline-update',
  data: {
    current: 'Hello',
    isUpdating: true
  }
})