Hire me modal struture

Author: zlrundefined

src/components/shared/Header.vue

@@ -94,6 +94,65 @@
 				</div>
 			</div>
 		</div>
+
+		<transition name="fade">
+			<div v-show="show_modal" class="fixed inset-0 z-30">
+				<!--       background -->
+				<div
+					v-show="show_modal"
+					@click="showModal()"
+					class="bg-filter bg-white opacity-25 fixed inset-0 w-full h-full z-20"
+				></div>
+				<!--          -->
+				<main
+					class="flex flex-col items-center justify-center h-full w-full"
+				>
+					<transition name="fade-up-down">
+						<div
+							v-show="show_modal"
+							class="modal-wrapper inline-block flex items-center z-30"
+						>
+							<div
+								class="modal max-w-md mx-auto xl:max-w-5xl lg:max-w-5xl md:max-w-2xl bg-white max-h-screen shadow-lg flex-row rounded relative"
+							>
+								<div
+									class="modal-header p-5 bg-gray-900 text-gray-900 rounded-t"
+								>
+									<h5 class="text-white text-2xl uppercase">
+										this is header
+									</h5>
+								</div>
+								<div
+									class="modal-body p-5 w-full h-full overflow-y-auto "
+								>
+									<p class="text-justify">
+										cilis omnis nam illum maiores, porro
+										velit deserunt neque. Lorem ipsum dolor,
+										sit amet consectetur adipisicing elit.
+										Esse, voluptates eveniet labore dolorum
+										molestiae, modi saepe fugiat minima
+										repudiandae repellendus obcaecati
+										voluptatibus ab tenetur recusandae eius
+										quos at maiores atque consectetur
+										facilis! Nisi fuga
+									</p>
+								</div>
+								<div
+									class="modal-footer py-3 px-5 border0-t text-right"
+								>
+									<button
+										class="bg-green-500 px-5 py-2 text-white"
+										@click="showModal()"
+									>
+										OK
+									</button>
+								</div>
+							</div>
+						</div>
+					</transition>
+				</main>
+			</div>
+		</transition>
 	</nav>
 </template>