84 lines
No EOL
4.4 KiB
HTML
84 lines
No EOL
4.4 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Modal, with Tailwind CSS & AlpineJS</title>
|
|
|
|
<!-- Favicon -->
|
|
<link rel="icon" type="image/png" href="../img/favicon.png" />
|
|
|
|
<!-- Tailwind CSS -->
|
|
<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">
|
|
|
|
<!-- Fonts -->
|
|
<link rel="preconnect" href="https://fonts.gstatic.com">
|
|
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@500;600;700;800;900&display=swap" rel="stylesheet">
|
|
|
|
<!-- Alpine JS -->
|
|
<script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.x.x/dist/alpine.min.js" defer></script>
|
|
</head>
|
|
|
|
<body x-data="{ isModalVisible: false }" class="antialiased bg-gray-200 min-h-screen" style="font-family: 'Montserrat';">
|
|
<div class="flex flex-col h-screen items-center justify-center">
|
|
<div class="bg-white p-8 shadow-md rounded-sm">
|
|
<!-- Title -->
|
|
<h1 class="text-lg font-extrabold">Modal</h1>
|
|
<h2 class="text-sm text-gray-400 mb-8">Alpine JS & Tailwind CSS</h2>
|
|
|
|
<!-- Button displaying the modal -->
|
|
<div class="flex">
|
|
<div class="flex-1">
|
|
<button
|
|
class="bg-blue-600 focus:outline-none text-white p-8 rounded-sm w-full hover:bg-blue-900 transition duration-300 ease-in-out"
|
|
@click="isModalVisible = ! isModalVisible"
|
|
>
|
|
Display
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="fixed top-0 left-0 w-full h-screen flex justify-center items-center bg-black bg-opacity-40 z-50"
|
|
x-show="isModalVisible"
|
|
x-transition:enter="transition ease-out duration-300"
|
|
x-transition:enter-start="transform -translate-y-48 md:-translate-y-16 opacity-0"
|
|
x-transition:enter-end="transform translate-y-0 opacity-1"
|
|
x-transition:leave="transition ease-in duration-300"
|
|
x-transition:leave-start="transform translate-y-0 opacity-1"
|
|
x-transition:leave-end="transform -translate-y-48 md:-translate-y-16 opacity-0"
|
|
>
|
|
|
|
<div class="bg-white rounded-sm shadow-md overflow-hidden max-w-3xl"
|
|
@click.away="isModalVisible = false"
|
|
>
|
|
<div class="flex">
|
|
<div class="flex-1 p-8">
|
|
<h2 class="font-extrabold text-4xl mb-4">Lorem Ipsum</h2>
|
|
<p class="text-sm text-gray-600 text-justify">
|
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
|
|
Donec quis tortor sodales, sodales neque placerat, gravida orci.
|
|
Integer et lectus feugiat, varius augue non, luctus augue.
|
|
Suspendisse potenti.
|
|
</p>
|
|
</div>
|
|
<div class="p-4">
|
|
<svg xmlns="http://www.w3.org/2000/svg"
|
|
viewBox="0 0 512 512"
|
|
height="16"
|
|
class="fill-current cursor-pointer text-black hover:text-gray-600 transition duration-300 ease-out"
|
|
@click="isModalVisible = false"
|
|
>
|
|
<!-- Font Awesome Free 5.15.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) -->
|
|
<path d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm0 448c-110.5 0-200-89.5-200-200S145.5 56 256 56s200 89.5 200 200-89.5 200-200 200zm101.8-262.2L295.6 256l62.2 62.2c4.7 4.7 4.7 12.3 0 17l-22.6 22.6c-4.7 4.7-12.3 4.7-17 0L256 295.6l-62.2 62.2c-4.7 4.7-12.3 4.7-17 0l-22.6-22.6c-4.7-4.7-4.7-12.3 0-17l62.2-62.2-62.2-62.2c-4.7-4.7-4.7-12.3 0-17l22.6-22.6c4.7-4.7 12.3-4.7 17 0l62.2 62.2 62.2-62.2c4.7-4.7 12.3-4.7 17 0l22.6 22.6c4.7 4.7 4.7 12.3 0 17z"/>
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
|
|
|
|
</html> |