1 import React, { useState } from "react";
2    
3    return function AmazingModal() {
4      const [isOpen, setIsOpen] = useState(false);
5    
6      return (
7        <section className="min-h-screen bg-gradient-to-b from-gray-900 to-black flex items-center justify-center text-white px-4">
8          <div className="text-center">
9            <h2 className="text-3xl md:text-4xl font-bold mb-6">
10              Amazing Modal Showcase
11            </h2>
12            <button
13              onClick={() => setIsOpen(true)}
14              className="px-6 py-3 bg-gradient-to-r from-indigo-500 via-purple-500 to-pink-500 rounded-xl text-lg font-semibold shadow-lg hover:shadow-2xl transition-all"
15            >
16              Open Modal
17            </button>
18          </div>
19    
20          {/* Modal Overlay */}
21          {isOpen && (
22            <div
23              className="fixed inset-0 bg-black/60 backdrop-blur-sm flex items-center justify-center z-50 animate-fadeIn"
24              onClick={() => setIsOpen(false)}
25            >
26              {/* Modal Box */}
27              <div
28                onClick={(e) => e.stopPropagation()}
29                className="relative bg-gradient-to-br from-gray-800 via-gray-900 to-black rounded-2xl shadow-2xl p-8 w-11/12 max-w-md border border-white/10 transform transition-all scale-95 opacity-0 animate-modalIn"
30              >
31                {/* Close Button */}
32                <button
33                  onClick={() => setIsOpen(false)}
34                  className="absolute top-3 right-3 text-gray-400 hover:text-white transition"
35                  aria-label="Close modal"
36                >
37                  ✕
38                </button>
39    
40                <h3 className="text-2xl font-semibold mb-4">
41                  Welcome to the Future
42                </h3>
43                <p className="text-gray-300 mb-6 leading-relaxed">
44                  This is an amazing modal window crafted with Tailwind CSS and pure
45                  React animations. It works perfectly in SSR environments without
46                  needing external animation libraries.
47                </p>
48    
49                <div className="flex gap-3 justify-end">
50                  <button
51                    onClick={() => setIsOpen(false)}
52                    className="px-4 py-2 bg-gray-700 hover:bg-gray-600 rounded-lg transition"
53                  >
54                    Cancel
55                  </button>
56                  <button
57                    onClick={() => alert("Confirmed!")}
58                    className="px-5 py-2 bg-gradient-to-r from-indigo-500 to-pink-500 rounded-lg font-medium hover:opacity-90 transition"
59                  >
60                    Confirm
61                  </button>
62                </div>
63              </div>
64            </div>
65          )}
66    
67          <style jsx>{`
68            @keyframes fadeIn {
69              from {
70                opacity: 0;
71              }
72              to {
73                opacity: 1;
74              }
75            }
76            .animate-fadeIn {
77              animation: fadeIn 0.3s ease-out forwards;
78            }
79    
80            @keyframes modalIn {
81              from {
82                transform: scale(0.95);
83                opacity: 0;
84              }
85              to {
86                transform: scale(1);
87                opacity: 1;
88              }
89            }
90            .animate-modalIn {
91              animation: modalIn 0.3s ease-out forwards;
92            }
93          `}</style>
94        </section>
95      );
96    }
97