JSFiddle - React, Tailwind, and code Playground

HTML

<div id="app">

  <bullshit-component
    v-for="(item, i) in items"
    :msg="item.msg"
    :show-help="i === active"
    @show="active = active === i ? null : i"
  ></bullshit-component>
  
</div>

CSS

.bullshit {
  margin: 10px;
  border: 1px solid silver;
}

.bullshit p {
  color: red;
  font-size: 1.5em;
}

JavaScript

Vue.component('bullshit-component', {
  template: `
<div @click="$emit('show')" class="bullshit">
  <div>
    <slot></slot>
  </div>
  <div :style="helpStyle">
    click me
    <p :style="hintStyle">{{ msg }}</p>
  </div>
</div>`,
  props: {
    showHelp: {
      default: false,
      type: Boolean,
    },
    msg: {
      default: 'empty',
      type: String,
    },
  },
  computed: {
    hintStyle() {
      return {
        opacity: this.showHelp ? 1 : 0,
      };
    },
    helpStyle() {
      return {
        overflow: this.showHelp ? 'visible' : 'transparent',
      };
    },
  }
});

new Vue({
  el: '#app',
  data: {
    active: null,
    items: [
      { msg: 'hello, world!!' },
      { msg: 'fuck the world' },
      { msg: 'fuck everything' },
    ],
  },
});