I'm currently working on building a modal using Tailwind in Vue, but I've run into some challenges with aligning the elements inside the modal as desired.
I've experimented with removing certain Tailwind classes and have tried implementing grids, flexbox, and other positioning techniques, but the images still appear aligned to the left.
My goal is to have the image centered with some text below it, followed by two additional boxes containing links beneath that. Any suggestions on how to achieve this layout?
Below is the snippet of my code:
<template>
<div id="app">
<div class="flex items-center">
<vue-tailwind-modal
class="bg-grey-lighter border-b-2 border-grey ml-2 hover:bg-grey-lightest text-grey-darkest font-bold py-4 px-6 rounded "
:showing="modal"
@close="modal = false"
>
<img class="h-32 w-32 object-center" src="./assets/discord.png" />
<div
v-for="item in links"
:key="item.link"
class="relative p-8 bg-white w-full max-w-md m-auto flex-col"
>
<div>{{ item.name }}</div>
<div>{{ item.link }}</div>
</div>
</vue-tailwind-modal>
<button @click="toggleModal">Toggle</button>
</div>
</div>
</template>
<script>
//import PopUp from "./components/PopUp.vue";
import VueTailwindModal from "vue-tailwind-modal";
export default {
name: "App",
components: {
VueTailwindModal,
//PopUp,
},
data: () => ({
modal: true,
links: [
{
name: "Google",
link: "google.com",
},
{
name: "Bing",
link: "bing.com",
},
],
}),
methods: {
toggleModal() {
this.modal = !this.modal;
},
},
};
</script>
<style></style>