new Save Component tailwindflex

This tailwind example is contributed by Omer fils ELENGA, on 22-May-2026. Component is made with Tailwind v3.4. It is responsive. similar terms for this example are popup,dialog

Card Modal

Author Omer fils ELENGA

Tailwind v3.4 360 2

Fork Fullscreen

<div class="min-h-screen bg-slate-50 dark:bg-slate-950 p-8 flex items-center justify-center transition-colors duration-300">
  
  
  <div class="w-full max-w-lg bg-white/80 dark:bg-slate-900/80 backdrop-blur-md border border-slate-200 dark:border-slate-800 rounded-2xl p-6 shadow-xl">
    
    
    <div class="mb-6">
      <h2 class="text-xl font-bold text-slate-900 dark:text-white">Save Component</h2>
      <p class="text-xs text-slate-500 dark:text-slate-400 mt-1">Enregistrez votre snippet de code proprement pour vos futurs projets.</p>
    </div>

<form class="space-y-5" onsubmit="event.preventDefault();">
      
      
      <div>
        <label for="title" class="block text-xs font-semibold uppercase tracking-wider text-slate-600 dark:text-slate-400 mb-1.5">
          Title <span class="text-rose-500">*</span>
        </label>
        <input 
          type="text" 
          id="title" 
          required
          placeholder="Ex: Credit Card 3D Flip" 
          class="w-full px-4 py-2.5 rounded-xl border border-slate-200 dark:border-slate-800 bg-white dark:bg-slate-950 text-slate-900 dark:text-slate-100 placeholder-slate-400 dark:placeholder-slate-600 text-sm focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent transition-all"
        />
      </div>

<div>
        <label for="description" class="block text-xs font-semibold uppercase tracking-wider text-slate-600 dark:text-slate-400 mb-1.5">
          Description
        </label>
        <textarea 
          id="description" 
          rows="3"
          placeholder="Décrivez le fonctionnement ou les dépendances du composant..." 
          class="w-full px-4 py-2.5 rounded-xl border border-slate-200 dark:border-slate-800 bg-white dark:bg-slate-950 text-slate-900 dark:text-slate-100 placeholder-slate-400 dark:placeholder-slate-600 text-sm focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent transition-all resize-none"
        ></textarea>
      </div>

<div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
        
        
        <div>
          <label for="tags" class="block text-xs font-semibold uppercase tracking-wider text-slate-600 dark:text-slate-400 mb-1.5">
            Tags
          </label>
          <input 
            type="text" 
            id="tags" 
            placeholder="Tailwind, 3D, UI" 
            class="w-full px-4 py-2.5 rounded-xl border border-slate-200 dark:border-slate-800 bg-white dark:bg-slate-950 text-slate-900 dark:text-slate-100 placeholder-slate-400 dark:placeholder-slate-600 text-sm focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent transition-all"
          />
        </div>

<div>
          <label for="search-tags" class="block text-xs font-semibold uppercase tracking-wider text-slate-600 dark:text-slate-400 mb-1.5">
            Search Tags
          </label>
          <input 
            type="text" 
            id="search-tags" 
            placeholder="card, flip, animate, js" 
            class="w-full px-4 py-2.5 rounded-xl border border-slate-200 dark:border-slate-800 bg-white dark:bg-slate-950 text-slate-900 dark:text-slate-100 placeholder-slate-400 dark:placeholder-slate-600 text-sm focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent transition-all"
          />
        </div>

</div>

<div class="flex justify-end gap-3 pt-2 border-t border-slate-100 dark:border-slate-800/60 mt-6">
        <button 
          type="button" 
          class="px-4 py-2 text-xs font-medium text-slate-600 dark:text-slate-400 hover:bg-slate-100 dark:hover:bg-slate-800 rounded-xl transition-all"
        >
          Annuler
        </button>
        <button 
          type="submit" 
          class="px-5 py-2 text-xs font-semibold text-white bg-indigo-600 hover:bg-indigo-500 dark:bg-indigo-500 dark:hover:bg-indigo-400 rounded-xl shadow-md shadow-indigo-500/10 active:scale-95 transition-all"
        >
          Sauvegarder
        </button>
      </div>

</form>
  </div>

</div>

Related Examples

Confirmation model

Mr Robot

4 years ago

13.6k
Confirmation modal/card

Sophia Baker

3 years ago

16.6k
Otp-code template
This is an OTP code template that contains the one-time password, which can be sent to the user's email either when they are signing up for the first time or for multi-factor authentication (MFA) during the login process.

anandu ap

2 years ago

4k
File Upload

Rajesh Maheshwari

1 year ago

1.5k
Créer une story
Créer une story

Omer fils ELENGA

10 months ago

1k
Premium High-Performance Web Gaming Hub
Experience the future of browser-based gaming. I’ve developed a premium arcade hub designed for speed, clarity, and zero-latency gameplay. Built with modern web technologies, Ayyamperumal Games brings AAA-inspired visuals and high-octane mechanics directly to your browser—no downloads, no lag, just pure performance. Explore a curated library of titles ranging from minimalist logic puzzles like Sudoku Elite to fast-paced action in Neon Drift. This is where clean code meets high-level entertainment.

Ayyamperumal S

9 months ago

971
card section neon
card section neon

Omer fils ELENGA

8 months ago

1.3k
Game Character Cards
Simple game character cards selection

Diavox Jerome Soriano

1 year ago

1.8k
sidebar dash
sidebar dash

Omer fils ELENGA

9 months ago

977
Features grid

Sophia Baker

3 years ago

10.9k
Simple Alret Modal
Minimal Modal

_Amar_

4 years ago

12.7k
Card animate

Raul antonio de la cruz hernandez

1 year ago

1.6k