Vue component for some alignment buttons. Demo at https://share.getcloudapp.com/2Nu5bL1B

AlignmentWidget.vue

<template>
  <span class="p-1 inline-flex items-center rounded-lg bg-gray-200">
    <button
      @click="alignmentSelected = 'left'"
      :class="alignmentSelected == 'left' ? 'bg-white shadow' : 'hover:bg-gray-400'"
      class="p-1 rounded-lg"
    >
      <svg class="h-6 w-6 text-gray-200" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 333 333">
        <path
          stroke="currentColor"
          d="M323 31.5H10c-5.5 0-10 4.5-10 10s4.5 10 10 10h313c5.5 0 10-4.5 10-10s-4.5-10-10-10zM230 114.5H10c-5.5 0-10 4.5-10 10s4.5 10 10 10h220c5.5 0 10-4.5 10-10s-4.5-10-10-10zM323 198.5H10c-5.5 0-10 4.5-10 10s4.5 10 10 10h313c5.5 0 10-4.5 10-10s-4.5-10-10-10zM151 281.5H10c-5.5 0-10 4.5-10 10s4.5 10 10 10h141c5.5 0 10-4.5 10-10s-4.5-10-10-10z"
        />
      </svg>
    </button>
    <button
      @click="alignmentSelected = 'center'"
      :class="alignmentSelected == 'center' ? 'bg-white shadow' : 'hover:bg-gray-400'"
      class="p-1 rounded-lg"
    >
      <svg
        class="h-6 w-6 text-gray-200"
        xmlns="http://www.w3.org/2000/svg"
        viewBox="0 0 334.367 334.367"
      >
        <path
          stroke="currentColor"
          d="M10.449 52.245h313.469c5.771 0 10.449-4.678 10.449-10.449s-4.678-10.449-10.449-10.449H10.449C4.678 31.347 0 36.025 0 41.796s4.678 10.449 10.449 10.449zM57.469 114.939c-5.771 0-10.449 4.678-10.449 10.449s4.678 10.449 10.449 10.449h219.429c5.771 0 10.449-4.678 10.449-10.449s-4.678-10.449-10.449-10.449H57.469zM323.918 198.531H10.449C4.678 198.531 0 203.209 0 208.98s4.678 10.449 10.449 10.449h313.469c5.771 0 10.449-4.678 10.449-10.449s-4.678-10.449-10.449-10.449zM237.714 282.122H96.653c-5.771 0-10.449 4.678-10.449 10.449s4.678 10.449 10.449 10.449h141.061c5.771 0 10.449-4.678 10.449-10.449s-4.678-10.449-10.449-10.449z"
        />
      </svg>
    </button>
    <button
      @click="alignmentSelected = 'right'"
      :class="alignmentSelected == 'right' ? 'bg-white shadow' : 'hover:bg-gray-400'"
      class="p-1 rounded-lg"
    >
      <svg class="h-6 w-6 text-gray-200" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 333 333">
        <path
          stroke="currentColor"
          d="M323 31.5H10c-5.5 0-10 4.5-10 10s4.5 10 10 10h313c5.5 0 10-4.5 10-10s-4.5-10-10-10zM323 114.5H104c-5.5 0-10 4.5-10 10s4.5 10 10 10h219c5.5 0 10-4.5 10-10s-4.5-10-10-10zM323 198.5H10c-5.5 0-10 4.5-10 10s4.5 10 10 10h313c5.5 0 10-4.5 10-10s-4.5-10-10-10zM323 281.5H182c-5.5 0-10 4.5-10 10s4.5 10 10 10h141c5.5 0 10-4.5 10-10s-4.5-10-10-10z"
        />
      </svg>
    </button>
    <button
      @click="alignmentSelected = 'justified'"
      :class="alignmentSelected == 'justified' ? 'bg-white shadow' : 'hover:bg-gray-400'"
      class="p-1 rounded-lg"
    >
      <svg class="h-6 w-6 text-gray-200" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 333 333">
        <path
          stroke="currentColor"
          d="M323 31.5H10c-5.5 0-10 4.5-10 10s4.5 10 10 10h313c5.5 0 10-4.5 10-10s-4.5-10-10-10zM323 114.5H10c-5.5 0-10 4.5-10 10s4.5 10 10 10h313c5.5 0 10-4.5 10-10s-4.5-10-10-10zM323 198.5H10c-5.5 0-10 4.5-10 10s4.5 10 10 10h313c5.5 0 10-4.5 10-10s-4.5-10-10-10zM323 281.5H10c-5.5 0-10 4.5-10 10s4.5 10 10 10h313c5.5 0 10-4.5 10-10s-4.5-10-10-10z"
        />
      </svg>
    </button>
  </span>
</template>

<script>
export default {
  data() {
    return {
      alignmentSelected: 'left',
    }
  },

}
</script>