Multi-Step Modal

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
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93

<!-- Multi-Step Modal -->
<div id="multi-step-modal" class="fixed inset-0 z-50 hidden">
  <!-- Backdrop -->
  <div class="fixed inset-0 bg-black/50 backdrop-blur-sm" onclick="closeModal('multi-step-modal')"></div>
  
  <!-- Modal Container -->
  <div class="fixed inset-0 flex items-center justify-center p-4">
    <div class="relative bg-white dark:bg-gray-900 rounded-2xl shadow-2xl w-full max-w-xl transform transition-all" role="dialog" aria-modal="true">
      
      <!-- Header -->
      <div class="p-6 pb-0">
        <div class="flex items-center justify-between mb-6">
          <h3 class="text-xl font-bold text-gray-900 dark:text-white">Create New Workspace</h3>
          <button onclick="closeModal('multi-step-modal')" class="p-2 rounded-lg text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors">
            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
            </svg>
          </button>
        </div>
        
        <!-- Progress Steps -->
        <div class="flex items-center justify-between mb-8">
          <div class="flex items-center gap-2">
            <div class="w-8 h-8 bg-blue-600 text-white rounded-full flex items-center justify-center text-sm font-medium">1</div>
            <span class="text-sm font-medium text-blue-600 dark:text-blue-400 hidden sm:block">Details</span>
          </div>
          <div class="flex-1 h-0.5 bg-gray-200 dark:bg-gray-700 mx-2">
            <div class="h-full bg-blue-600 w-1/2"></div>
          </div>
          <div class="flex items-center gap-2">
            <div class="w-8 h-8 bg-blue-600 text-white rounded-full flex items-center justify-center text-sm font-medium">2</div>
            <span class="text-sm font-medium text-gray-500 dark:text-gray-400 hidden sm:block">Members</span>
          </div>
          <div class="flex-1 h-0.5 bg-gray-200 dark:bg-gray-700 mx-2"></div>
          <div class="flex items-center gap-2">
            <div class="w-8 h-8 bg-gray-200 dark:bg-gray-700 text-gray-500 dark:text-gray-400 rounded-full flex items-center justify-center text-sm font-medium">3</div>
            <span class="text-sm font-medium text-gray-500 dark:text-gray-400 hidden sm:block">Review</span>
          </div>
        </div>
      </div>
      
      <!-- Step Content -->
      <div class="p-6">
        <!-- Step 1: Details -->
        <div id="step-1" class="space-y-4">
          <div>
            <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Workspace Name</label>
            <input type="text" placeholder="My Awesome Team" class="w-full px-4 py-3 border border-gray-200 dark:border-gray-700 rounded-xl bg-white dark:bg-gray-800 text-gray-900 dark:text-white placeholder-gray-400 focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all">
          </div>
          <div>
            <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Description</label>
            <textarea rows="3" placeholder="Describe your workspace..." class="w-full px-4 py-3 border border-gray-200 dark:border-gray-700 rounded-xl bg-white dark:bg-gray-800 text-gray-900 dark:text-white placeholder-gray-400 focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all resize-none"></textarea>
          </div>
          <div>
            <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Template</label>
            <div class="grid grid-cols-3 gap-3">
              <button class="p-4 border-2 border-blue-600 bg-blue-50 dark:bg-blue-900/20 rounded-xl text-center">
                <svg class="w-6 h-6 text-blue-600 mx-auto mb-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"/>
                </svg>
                <span class="text-xs font-medium text-blue-600">Blank</span>
              </button>
              <button class="p-4 border border-gray-200 dark:border-gray-700 rounded-xl text-center hover:border-gray-300 dark:hover:border-gray-600 transition-colors">
                <svg class="w-6 h-6 text-gray-400 mx-auto mb-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"/>
                </svg>
                <span class="text-xs font-medium text-gray-500 dark:text-gray-400">Marketing</span>
              </button>
              <button class="p-4 border border-gray-200 dark:border-gray-700 rounded-xl text-center hover:border-gray-300 dark:hover:border-gray-600 transition-colors">
                <svg class="w-6 h-6 text-gray-400 mx-auto mb-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4"/>
                </svg>
                <span class="text-xs font-medium text-gray-500 dark:text-gray-400">Engineering</span>
              </button>
            </div>
          </div>
        </div>
      </div>
      
      <!-- Footer -->
      <div class="flex items-center justify-between p-6 border-t border-gray-100 dark:border-gray-800">
        <button class="px-4 py-2 text-sm font-medium text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300 transition-colors">Back</button>
        <div class="flex gap-3">
          <button onclick="closeModal('multi-step-modal')" class="px-5 py-2.5 text-sm font-medium text-gray-700 dark:text-gray-300 bg-gray-100 dark:bg-gray-800 rounded-xl hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors">Cancel</button>
          <button class="px-5 py-2.5 text-sm font-medium text-white bg-blue-600 rounded-xl hover:bg-blue-700 transition-colors shadow-lg shadow-blue-500/30">Next Step</button>
        </div>
      </div>
    </div>
  </div>
</div>

<!-- Demo Trigger Button -->
<button onclick="openModal('multi-step-modal')" class="px-6 py-3 bg-blue-600 text-white font-medium rounded-xl hover:bg-blue-700 transition-colors focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2">Open Multi-Step Modal</button>

1
2
3
4
5
6
7
8
9
10
11
12

# Multi Step Modal

Multi-step wizard modal.

## Usage
```bash
npx devsnips add Tailwind/Components/Modals/multi-step-modal
```
Copy from `code.html`.

## File Structure
`code.html` · `preview.html` · `metadata.json` · `README.md`