PROCESS SELECTOR

Created was one shot generated using https://inspi.me

This tailwind example is contributed by yogourt, on 13-Jan-2026. Component is made with Tailwind v3.4. It is responsive. similar terms for this example are popup,dialog

Modal

Author yogourt

Tailwind v3.4 472

Fork Fullscreen

<div class="dialog-overlay">
  <div class="kinetic-container">
    <div class="dialog-header">
      <h2 class="title">PROCESS SELECTOR</h2>
      <div class="status-indicator">
        <div class="pulse">
        </div>READY
      </div>
    </div>
    <div class="control-row">
      <div class="custom-select-wrapper">
        <select class="kinetic-select">
              <option>PRIMARY ENGINE</option>
                <option>THERMAL CORE</option>
                  <option>FLUID DYNAMICS</option>
                  </select>
        <div class="select-arrow">
        </div>
      </div>
      <button class="kinetic-btn" onclick="triggerLoading(this)">
                  <span>INITIATE</span>
                    <div class="spinner">
                    </div>
                  </button>
    </div>
    <div id="display-section" class="reveal-section">
      <div class="data-grid">
        <div class="data-item">
          <span class="label">STABILITY</span>
          <span class="value">99.8%</span>
        </div>
        <div class="data-item">
          <span class="label">OUTPUT</span>
          <span class="value">420kw</span>
        </div>
      </div>
      <div class="silhouette-graphic">
      </div>
    </div>
    <style>
      @import url('https://fonts.googleapis.com/css2?family=Inter:wght@700&family=JetBrains+Mono&display=swap');

:root {
        --bg: #0a0a0a;
        --accent: #e0e0e0;
        --dim: #333;
        --transition: cubic-bezier(0.2, 0.8, 0.2, 1);
      }
      body {
        margin: 0;
        min-height: 100dvh;
        display: flex;
        justify-content: center;
        align-items: center;
        background: #000;
      }
      .dialog-overlay {
        background: var(--bg);
        padding: 40px;
        border-radius: 2px;
        border-left: 4px solid var(--accent);
        max-width: 400px;
        font-family: 'Inter', sans-serif;
        box-shadow: 0 30px 60px rgba(0, 0, 0, 0.5);
        
      }

.dialog-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 30px;
      }

.title {
        font-size: 12px;
        letter-spacing: 4px;
        color: var(--accent);
        margin: 0;
      }

.status-indicator {
        font-family: 'JetBrains Mono';
        font-size: 10px;
        color: var(--dim);
        display: flex;
        align-items: center;
        gap: 8px;
      }

.pulse {
        width: 6px;
        height: 6px;
        background: var(--accent);
        border-radius: 50%;
        animation: blink 2s infinite;
      }

.control-row {
        display: flex;
        gap: 1px;
        background: var(--dim);
        border: 1px solid var(--dim);
      }

.custom-select-wrapper {
        position: relative;
        flex-grow: 1;
        background: var(--bg);
      }

.kinetic-select {
        width: 100%;
        appearance: none;
        background: transparent;
        border: none;
        color: var(--accent);
        padding: 15px;
        font-family: 'JetBrains Mono';
        font-size: 11px;
        outline: none;
        cursor: pointer;
      }

.kinetic-btn {
        background: var(--accent);
        border: none;
        color: var(--bg);
        font-weight: 700;
        font-size: 11px;
        padding: 0 25px;
        cursor: pointer;
        transition: all 0.3s var(--transition);
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
      }

.kinetic-btn:hover {
        filter: invert(1);
      }

.spinner {
        width: 14px;
        height: 14px;
        border: 2px solid var(--bg);
        border-top-color: transparent;
        border-radius: 50%;
        position: absolute;
        display: none;
        animation: spin 0.8s linear infinite;
      }

.loading .spinner {
        display: block;
      }

.loading span {
        visibility: hidden;
      }

.reveal-section {
        height: 0;
        overflow: hidden;
        transition: height 0.8s var(--transition);
        opacity: 0;
        transform: translateY(10px);
      }

.reveal-section.active {
        height: 160px;
        opacity: 1;
        transform: translateY(0);
        margin-top: 20px;
        border-top: 1px solid var(--dim);
        padding-top: 20px;
      }

.data-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 20px;
        font-family: 'JetBrains Mono';
      }

.label {
        display: block;
        font-size: 9px;
        color: var(--dim);
        margin-bottom: 4px;
      }

.value {
        display: block;
        font-size: 18px;
        color: var(--accent);
      }

.silhouette-graphic {
        height: 60px;
        margin-top: 20px;
        background: linear-gradient(90deg, transparent 0%, var(--dim) 50%, transparent 100%);
        clip-path: polygon(0% 100%, 10% 20%, 20% 80%, 30% 0%, 40% 90%, 50% 10%, 60% 70%, 70% 30%, 80% 100%);
        animation: wave 4s infinite linear;
      }

@keyframes spin {
        to {
          transform: rotate(360deg);
        }
      }

@keyframes blink {

0%,
        100% {
          opacity: 1;
        }

50% {
          opacity: 0.3;
        }
      }

@keyframes wave {
        0% {
          filter: contrast(1.2) brightness(1);
        }

50% {
          filter: contrast(1.5) brightness(1.5);
        }

100% {
          filter: contrast(1.2) brightness(1);
        }
      }
    </style>
    <script>
      function triggerLoading(btn){
                            btn.classList.add('loading');
                            setTimeout(()=>{
                            btn.classList.remove('loading');
                            document.getElementById('display-section').classList.add('active');
                            }
                            ,2000);
                            }
    </script>
  </div>
</div>

Related Examples

Créer une story
Créer une story

Omer fils ELENGA

10 months ago

1k
User list
User list

Anonymous

1 year ago

975
Modal with background overlay
Reduce the opacity of the page content to bring the focus to the modal.

Abigail

3 years ago

12.6k
The Free AI Tools Grid Section (210+ Tools, No Signup)
A responsive and SEO-optimized grid section showcasing over 210 free AI tools. Designed with Tailwind CSS, fully responsive, fast-loading, and built for high user engagement. No sign-up required, privacy-friendly, and optimized for performance and discoverability.https://www.thefreeaitools.com/

Hasan AlDoy (McDoy)

6 months ago

481
Donate Hero section
Best New tailwindcss,help save the children

ORGIN_DREAMS

1 year ago

1.4k
LoginModal-1
Popup modal with close

Rohan Babu

2 years ago

4.1k
Social media login modal
Popup model for social media login. i.e. google and GitHub. you can add more buttons according to your need

Sameer Sultana

3 years ago

15.8k
Tailwind CSS Modal

Krishna Gudpalle

4 years ago

12.9k
Modal with Tailwind CSS

EliteAI Tools

1 year ago

2.3k
Error popup modal

Jindřich Stoklasa

2 years ago

2.5k
Content and Image Modals using Dialogs - No Javascript
No javascript needed.

Sherry Lynne

2 months ago

182
Modal
Responsive model

inbarajan P

2 years ago

3.7k