Vue + TailwindCSS (Transitions)

Dropdown.vue

<template>
  <transition
      enter-active-class="ease-out duration-300"
      enter-class="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
      enter-to-class="opacity-100 translate-y-0 sm:scale-100"
      leave-active-class="ease-in duration-200"
      leave-class="opacity-100 translate-y-0 sm:scale-100"
      leave-to-class="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
  >
      <div v-if="show">DROPDOWN</div>
  </transition>
</template>

<script>
export default {
  data() {
    return {
      show: false,
    };
  },
};
</script>

Modal.vue

<template>
    <transition
        enter-active-class="ease-out duration-300"
        enter-class="opacity-0"
        enter-to-class="opacity-100"
        leave-active-class="ease-in duration-200"
        leave-class="opacity-100"
        leave-to-class="opacity-0"
    >
        <div v-if="renderOverlay" class="fixed transition-opacity inset-0 bg-gray-800 bg-opacity-70 z-10">
            <transition
                enter-active-class="ease-out duration-300"
                enter-class="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
                enter-to-class="opacity-100 translate-y-0 sm:scale-100"
                leave-active-class="ease-in duration-200"
                leave-class="opacity-100 translate-y-0 sm:scale-100"
                leave-to-class="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
            >
                <div
                    class="relative transform transition-all bg-white rounded-xl max-w-3xl mx-auto max-h-9/12 h-full flex flex-col"
                    v-click-outside="closeModal"
                    v-if="renderModal"
                >
                    MODAL
                </div>
            </transition>
        </div>
    </transition>
</template>

<script>
import ClickOutside from 'vue-click-outside';
import AppIcon from '@/Components/Icon';

export default {
    components: {
        AppIcon,
    },
    directives: {
        ClickOutside,
    },
    props: {
        show: {
            type: Boolean,
            default: false,
        },
    },
    data() {
        return {
            renderModal: false,
            renderOverlay: false,
        };
    },
    methods: {
        closeModal() {
            this.$emit('close');
        },
    },
    watch: {
        show(show) {
            if (show) {
                this.renderOverlay = true;
                setTimeout(() => this.renderModal = true, 200);
            } else {
                this.renderModal = false;
                setTimeout(() => this.renderOverlay = false, 100);
            }
        },
    },
};
</script>