Home
Anonymous
ztailwindsnippet01

ztailwindsnippet01

This tailwind example is contributed by Anonymous, on 14-Jul-2026. Component is made with Tailwind CSS v3. It is responsive.

Other

Author Anonymous

196

Fork Fullscreen

<body class="bg-stone-50 text-stone-900 antialiased">
  <main class="max-w-7xl mx-auto px-6 py-4 space-y-5">
    <div class="grid grid-cols-1 lg:grid-cols-12 gap-6 lg:h-[min(calc(100vh-10rem),780px)]">
      <section class="lg:col-span-8 min-h-0 flex">
        <div class="rounded-xl border border-stone-200 bg-white p-5 flex-1 min-h-0 flex flex-col">
          <div class="flex items-baseline justify-between shrink-0 mb-4">
            <h2 class="text-sm font-semibold text-stone-700">New job</h2>
            <input 
              placeholder="Enter custom name for job" 
              name="name" 
              class="w-64 rounded-md bg-white border border-stone-300 px-3 py-2 text-sm font-mono leading-tight focus:outline-none focus:border-accent-400 focus:ring-1 focus:ring-accent-200 resize-y" />
            <span class="text-xs text-stone-400">Step 1 · create</span>
          </div>
          <div class="flex-1 min-h-0 overflow-y-auto pr-1 space-y-1">
        
            <div class="px-3 py-2 rounded-lg">
              <div class="flex pb-2">
                <h3 class="text-sm font-semibold text-amber-800 px-2">
                  1. Subject
                </h3>
                <span class="text-xs px-2 text-stone-500">
                  Upload images, add URLs, add PIDs, or list out
                </span>
              </div>
              <div class="space-y-3">
                <div
                  class="cursor-pointer rounded-lg border border-dashed p-5 text-center transition border-stone-300 hover:border-stone-400 bg-white">
                  <p class="text-sm text-stone-600">Drop images here, or click to choose files</p><input accept="image/*" multiple="" class="hidden" type="file">
                </div>
                <div class="flex gap-2 items-start">
                  <textarea 
                  placeholder="…or paste one or more image URLs (one per line, or comma-separated)" 
                  rows="2" 
                  class="flex-1 rounded-md bg-white border border-stone-300 px-3 py-2 text-sm font-mono leading-tight focus:outline-none focus:border-accent-400 focus:ring-1 focus:ring-accent-200 resize-y"></textarea><button type="button" 
                  class="w-36 shrink-0 rounded-md border border-stone-300 bg-white px-3 py-2 text-sm font-medium text-stone-700 hover:bg-stone-100">Add URLs</button>
                </div>
                <div class="flex gap-2 items-start">
                  <textarea 
                    placeholder="…or paste one or more Zazzle PIDs (digits only, one per line)" 
                    rows="2" 
                    class="flex-1 rounded-md bg-white border border-stone-300 px-3 py-2 text-sm font-mono leading-tight focus:outline-none focus:border-accent-400 focus:ring-1 focus:ring-accent-200 resize-y"></textarea>
                  <button type="button" class="w-36 shrink-0 rounded-md border border-stone-300 bg-white px-3 py-2 text-sm font-medium text-stone-700 hover:bg-stone-100">Add PIDs</button>
                </div> 
                <div class="flex gap-2">
                  <label class="flex items-center gap-2 text-xs text-stone-600 select-none cursor-pointer">
                    <input class="rounded border-stone-300 text-accent-500 focus:ring-accent-200" type="checkbox">
                    <span>
                      Front view <span class="text-stone-400 font-mono text-[10px]">(&amp;view=front&amp;envelopes=none)</span>
                    </span>
                  </label>
                  <label class="flex items-center gap-2 text-xs text-stone-600 select-none cursor-pointer">
                  <input class="rounded border-stone-300 text-accent-500 focus:ring-accent-200" type="checkbox">
                    <span>
                      Back view <span class="text-stone-400 font-mono text-[10px]">(&amp;view=back&amp;envelopes=none)</span>
                    </span>
                  </label>
                </div>
                <div class="flex gap-2 items-start">
                  <textarea 
                    placeholder="...or list anything else to add in here" 
                    rows="2" 
                    class="flex-1 rounded-md bg-white border border-stone-300 px-3 py-2 text-sm font-mono leading-tight focus:outline-none focus:border-accent-400 focus:ring-1 focus:ring-accent-200 resize-y"></textarea>
                  <button 
                    type="button" 
                    class="w-36 shrink-0 rounded-md border border-stone-300 bg-white px-3 py-2 text-sm font-medium text-stone-700 hover:bg-stone-100">
                    Add Subjects
                  </button>
                </div> 
              </div>
            </div>
            <hr />
            <div class="px-3 py-2 rounded-lg">
              <div class="flex pb-2">
                <h3 class="text-sm font-semibold text-amber-800 px-2">
                  2. Image Style
                </h3>
                <span class="text-xs px-2 text-stone-500">
                  Select from existing prompts, write your own, or upload reference images.
                </span>
                <div role="group" aria-label="Image model" class="inline-flex rounded-md border border-stone-300 bg-white overflow-hidden text-xs">
                  <button type="button" title="Simple Image Style" class="px-2.5 py-1 transition border-r last:border-r-0 border-stone-200 bg-amber-700 text-white" aria-pressed="true">Simple</button>
                  <button type="button" title="Image Style Wizard" class="px-2.5 py-1 transition border-r last:border-r-0 border-stone-200 bg-white text-stone-600 hover:bg-stone-50" aria-pressed="false">Open Wizard</button></div>
              </div>
              <div class="space-y-3">
                <div class="grid grid-cols-3 gap-3">
                  <label class="block">
                    <span class="block text-xs font-medium text-stone-500 mb-1">
                      Category
                    </span>
                    <select 
                     class="w-full rounded-md bg-white border border-stone-300 px-2 py-2 text-sm text-stone-900 focus:outline-none focus:border-accent-400 focus:ring-1 focus:ring-accent-200">
                      <option value="">
                        — all —
                      </option>
                      <option value="meta_feed_square">
                        Cover Photo
                      </option>
                      <option value="meta_feed_square">
                        Creative
                      </option>
                      <option value="meta_feed_square">
                        Stock Photo
                      </option>
                      <option value="meta_feed_square">
                        Graphics
                      </option>
                    </select>
                  </label>

<label class="block">
                    <span class="block text-xs font-medium text-stone-500 mb-1">
                      Prompt
                    </span>
                    <select 
                     class="w-full rounded-md bg-white border border-stone-300 px-2 py-2 text-sm text-stone-900 focus:outline-none focus:border-accent-400 focus:ring-1 focus:ring-accent-200">
                      <option value="">
                        — select —
                      </option>
                      <option value="meta_feed_square">
                        Generic
                      </option>
                      <option value="meta_feed_square">
                        Gift
                      </option>
                      <option value="meta_feed_square">
                        Wedding Stationery Suite
                      </option>
                      <option value="meta_feed_square">
                        Business Card
                      </option>
                    </select>
                  </label>

<label class="block">
                    <span class="block text-xs font-medium text-stone-500 mb-1">
                      Style
                    </span>
                    <select 
                     class="w-full rounded-md bg-white border border-stone-300 px-2 py-2 text-sm text-stone-900 focus:outline-none focus:border-accent-400 focus:ring-1 focus:ring-accent-200">
                      <option value="">
                        — select —
                      </option>
                      <option value="meta_feed_square">
                        Matrix
                      </option>
                      <option value="meta_feed_square">
                        Scatter
                      </option>
                      <option value="meta_feed_square">
                        Stack
                      </option>
                      <option value="meta_feed_square">
                        Flatlay
                      </option>
                    </select>
                  </label>

</div>
                <textarea placeholder="... or describe the image you want to create" rows="4" class="w-full rounded-md bg-white border border-stone-300 px-3 py-2 text-sm leading-relaxed text-stone-900 placeholder:text-stone-400 focus:outline-none focus:border-accent-400 focus:ring-1 focus:ring-accent-200 resize-y"></textarea>
                <div class="flex items-center gap-4 flex-wrap">
                  <div class="flex items-center gap-3 flex-wrap">
                    <button type="button" class="text-xs text-stone-500 hover:text-accent-700 underline-offset-2 hover:underline disabled:no-underline disabled:cursor-wait">
                      Generate random prompt →</button><span class="text-[11px] text-stone-400">~12s typical · last: 13s</span>
                  </div>
                  <div class="flex items-center gap-3">
                    <button type="button" class="text-xs text-stone-500 hover:text-accent-700 underline-offset-2 hover:underline">Describe an image →</button><span class="text-[11px] text-stone-400">~7.3s typical</span><span class="text-[11px] text-stone-400">last: 12s</span>
                  </div>
                </div>
              </div>
            </div>

<hr />

<div class="px-3 py-2 rounded-lg">
              <div class="flex pb-2">
                <h3 class="text-sm font-semibold text-amber-800 px-2">
                  3. Output
                </h3>
                <span class="text-xs px-2 text-stone-500">
                  Select output formatting
                </span>
              </div>
              <div class="space-y-3">
                <div class="grid grid-cols-1 md:grid-cols-[1fr_auto] gap-4 items-end">
                  <div class="grid grid-cols-1 sm:grid-cols-3 gap-3">
                    <label class="block"><span class="block text-xs font-medium text-stone-500 mb-1">Ad preset</span><select class="w-full rounded-md bg-white border border-stone-300 px-2 py-2 text-sm text-stone-900 focus:outline-none focus:border-accent-400 focus:ring-1 focus:ring-accent-200"><option value="">— custom —</option><option value="meta_feed_square">Meta Feed (1:1, 1080x1080)</option><option value="meta_feed_square_1200">Meta Feed (1:1, 1200x1200)</option><option value="meta_story_reel">Meta Story / IG Reel (9:16, 1080x1920)</option><option value="ig_portrait">Instagram Portrait (4:5, 1080x1350)</option><option value="google_square">Google Display Square (1:1)</option><option value="google_med_rect">Google Medium Rectangle (~5:4, 300x250)</option><option value="google_leaderboard">Google Leaderboard (8:1, 728x90)</option><option value="google_skyscraper">Google Skyscraper (1:4, 160x600)</option><option value="google_billboard">Google Billboard (4:1, 970x250)</option><option value="reddit_feed">Reddit Feed (1:1)</option><option value="reddit_portrait">Reddit Portrait (4:5, 1080x1350)</option><option value="linkedin_single">LinkedIn Single (~16:9)</option><option value="twitter_x_single">Twitter / X Single (16:9)</option><option value="pinterest_standard">Pinterest Standard (2:3, 1000x1500)</option><option value="youtube_thumbnail">YouTube Thumbnail (16:9)</option><option value="hero_4k_wide">Hero 4K Wide (16:9)</option><option value="hero_4k_ultrawide">Hero 4K Ultrawide (21:9)</option></select></label><label class="block"><span class="block text-xs font-medium text-stone-500 mb-1">Aspect ratio</span><select class="w-full rounded-md bg-white border border-stone-300 px-2 py-2 text-sm text-stone-900 focus:outline-none focus:border-accent-400 focus:ring-1 focus:ring-accent-200"><option value="1:1">1:1</option><option value="1:4">1:4</option><option value="1:8">1:8</option><option value="2:3">2:3</option><option value="3:2">3:2</option><option value="3:4">3:4</option><option value="4:1">4:1</option><option value="4:3">4:3</option><option value="4:5">4:5</option><option value="5:4">5:4</option><option value="8:1">8:1</option><option value="9:16">9:16</option><option value="16:9">16:9</option><option value="21:9">21:9</option></select></label><label class="block"><span class="block text-xs font-medium text-stone-500 mb-1">Resolution</span><select class="w-full rounded-md bg-white border border-stone-300 px-2 py-2 text-sm text-stone-900 focus:outline-none focus:border-accent-400 focus:ring-1 focus:ring-accent-200"><option value="512">512</option><option value="1K">1K</option><option value="2K">2K</option><option value="4K">4K</option></select></label>
                  </div>
                  <label class="block"><span class="block text-xs font-medium text-stone-500 mb-1">Number of images</span><input min="1" max="8" class="w-24 rounded-md bg-white border border-stone-300 px-3 py-2 text-sm text-stone-900 focus:outline-none focus:border-accent-400 focus:ring-1 focus:ring-accent-200" type="number" value="1"></label>
                </div>
              </div>
            </div>
            <div class="shrink-0 pt-4 mt-2 border-t border-stone-100 space-y-2">
              <button 
               type="button" 
               class="w-full rounded-md bg-amber-600 px-4 py-2.5 text-sm font-medium text-white hover:bg-accent-600 disabled:cursor-not-allowed transition disabled:opacity-50">
                Generate<span class="ml-2 text-white/70 text-xs font-normal">(~10s typical)</span>
              </button>
            </div>
        </div>
        <div></div>
      </section>
      
      <section class="lg:col-span-4 min-h-0 flex">
        <div class="rounded-xl border border-stone-200 bg-white p-5 flex-1 min-h-0">
          <div class="flex flex-col h-full min-h-0 gap-3">
            <div class="flex items-center justify-between shrink-0">
              <h2 class="text-sm font-semibold text-stone-700">Jobs · 100</h2>
              <button type="button" class="text-xs text-stone-500 hover:text-stone-900 disabled:opacity-40 disabled:hover:text-stone-500">Clear finished (100)</button>
            </div>
            <ul class="space-y-2 flex-1 min-h-0 overflow-y-auto pr-1">
              <li class="rounded-lg border bg-white p-3 transition border-stone-200 hover:border-stone-300">Jobs here
              </li>
            </ul>
          </div>
        </div>

</section>
    </div>
  </main>
</body>

Related Examples

simple responsive blog layout with sidebar

Author:
Isabella Kowalski

3 years ago

10.4k
BONIMATOR Responsive Tailwind Starter Template
Responsive Tailwind Starter Template

Author:
Bonimater

1 year ago

1.2k
background animation
background animation

Author:
Anonymous

9 months ago

1.2k
Custom Audio Player
🎧 Custom Audio Player (HTML, Tailwind CSS & Alpine.js) A modern, responsive custom audio player built with Tailwind CSS and Alpine.js, designed for a smooth user experience and elegant visuals in both light and dark mode. ✨ Features: 🎵 Play, pause, and mute/unmute controls 📈 Interactive progress bar with seek functionality 🔊 Dynamic volume slider with live preview 🖼️ Album art and track details display ⌨️ Keyboard support — toggle play/pause with the spacebar 🌓 Fully responsive and dark-mode compatible This player uses minimal JavaScript, relying on Alpine.js for reactivity, and can be easily customized or integrated into any web project. Perfect for portfolios, podcasts, or music web apps.

Author:
wavy kits

11 months ago

1.4k
Simple Login & Register Page
Login and Register Page using Tailwind, Alpine JS, and Fontawesome

Author:
Ahita Bisma Adlula

1 year ago

4.1k
NFT Header with Hero

Author:
Abdul Baset Bappy

1 year ago

1.8k
Popover
basic popover example

Author:
Dipti narayan

3 years ago

13.7k
random design

Author:
QQ-VVN

1 year ago

1.2k
Visernic Profile

Author:
MD Mostafa Niloy

10 months ago

1.1k
Responsive Cards with Hover Text Reveal Animation - Built with Tailwind CSS
nhance your website with these sleek, responsive cards designed using Tailwind CSS! Featuring a stylish hover animation, the text smoothly reveals when you hover over the card, adding a dynamic touch to your user interface. Perfect for portfolios, team profiles, or project showcases, this design adapts seamlessly to all screen sizes.

Author:
Abdul Baset Bappy

1 year ago

2.3k
super admin
super admin

Author:
Tanvir Hasan Bappy (Tanvir)

1 year ago

2.1k
Sticky fullpage pages / slides
Sticky full page

Author:
harinandana

10 months ago

972

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components