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 470

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

Home page 2
Отзывчивый логотип по центру. Интерактивные кнопки призыва к действию.

Alla Telegina

1 year ago

1.4k
Modal popup
Working modal in tailwind CSS Simple snippet for creating models with tailwind and javascript

Lukas Müller

3 years ago

44.1k
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

1 year ago

3.8k
Incense Meditation
material used to produce a fragrant odor when burned.

Augustin

1 year ago

1.3k
Login screen
Reward login screen

ehmasuk

1 year ago

869
Login popup modal
centered modal for gaining more attention from users, it also has social login buttons.

R Thapa

3 years ago

18.3k
iOS 16 Popup
iOS 16 Popup — Alpine.js

Omer fils ELENGA

10 months ago

452
Confirmation Dialog Box

Anonymous

3 years ago

17.3k
File Upload

Rajesh Maheshwari

1 year ago

1.4k
popup modal contact form
Working modal popup contact form in tailwind CSS Simple snippet for creating a popup contact form with tailwind and javascript

Ti To

2 years ago

8.9k
Confirmation modal with blurred background

Orion.c

3 years ago

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

Sherry Lynne

2 months ago

179