tailwind-ui-components/modal.html at main · ThanfordHQ/tailwind-ui-components · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Modal | TailGrids</title>
    <link
      rel="shortcut icon"
      href="assets/images/favicon.svg"
      type="image/x-icon"
    />
    <link rel="stylesheet" href="assets/css/tailwind.css" />

    <script defer src="assets/js/alpine.min.js"></script>
  </head>
  <body>
    <!-- ====== Modal Section Start -->
    <section x-data="{modalOpen: false}">
      <div class="container mx-auto py-20">
        <button
          @click="modalOpen = true"
          class="rounded-full bg-primary px-6 py-3 text-base font-medium text-white"
        >
          Open Modal
        </button>
      </div>

      <div
        x-show="modalOpen"
        x-transition
        class="fixed left-0 top-0 flex h-full min-h-screen w-full items-center justify-center bg-dark/90 px-4 py-5"
      >
        <div
          @click.outside="modalOpen = false"
          class="w-full max-w-[570px] rounded-[20px] bg-white px-8 py-12 text-center dark:bg-dark-2 md:px-[70px] md:py-[60px]"
        >
          <h3
            class="pb-[18px] text-xl font-semibold text-dark dark:text-white sm:text-2xl"
          >
            Your Message Sent Successfully
          </h3>
          <span
            class="mx-auto mb-6 inline-block h-1 w-[90px] rounded bg-primary"
          ></span>
          <p
            class="mb-10 text-base leading-relaxed text-body-color dark:text-dark-6"
          >
            Lorem Ipsum is simply dummy text of the printing and typesetting
            industry. Lorem Ipsum has been the industry's standard dummy text
            ever since
          </p>
          <div class="-mx-3 flex flex-wrap">
            <div class="w-1/2 px-3">
              <button
                @click="modalOpen = false"
                class="block w-full rounded-md border border-stroke p-3 text-center text-base font-medium text-dark transition hover:border-red-600 hover:bg-red-600 hover:text-white dark:text-white"
              >
                Cancel
              </button>
            </div>
            <div class="w-1/2 px-3">
              <button
                class="block w-full rounded-md border border-primary bg-primary p-3 text-center text-base font-medium text-white transition hover:bg-blue-dark"
              >
                View Details
              </button>
            </div>
          </div>
        </div>
      </div>
    </section>
    <!-- ====== Modal Section End -->
  </body>
</html>