Content and Image Modals using Dialogs - No Javascript

No javascript needed.

This tailwind example is contributed by Sherry Lynne, on 28-Jul-2026. Component is made with Tailwind v3.4. It is responsive. similar terms for this example are popup,dialog

Modal

Author Sherry Lynne

Tailwind v3.4 182

Fork Fullscreen

<div class="bg-white font-sans font-light text-black w-screen min-h-screen">
  <div class="p-5">
    <h1 class="text-4xl lg:text-5xl xl:text-6xl font-light font-extralight">Modals and Dialogs (No JS Needed)</h1>
    <div class="mt-5">
      <h2 class="text-2xl lg:text-3xl my-2">Dialog Modals</h2>
      <button class="my-2 px-6 py-2 text-white bg-blue-950 rounded-full hover:bg-indigo-950 focus:ring-2 focus:ring-blue-400 
          focus:ring-offset-2 transition-colors duration-200 text-base"
       command="show-modal" commandfor="dialog2">Open a dialog</button>
      <dialog id="dialog2" class="m-auto p-3 text-md max-w-3/4 lg:max-w-2xl xl:max-w-3xl backdrop:bg-neutral-800/60 backdrop:backdrop-blur-xs border bg-neutral-100 border-neutral-300">
        
        <div class="bg-white border-b -m-3 border-neutral-300">
          <button commandfor="dialog2" command="close" aria-label="close modal"
          class="absolute top-1 right-0 text-current size-[2.75rem] text-xl">&#x2715;</button>
          <h2 class="px-7 mr-1 py-3 text-left lg:text-center text-2xl font-normal">This is a dialog.</h2>
        </div>
        
        <div class="bg-white px-4 rounded-lg border mt-6 border-neutral-300">
          <p class="my-3">This focus-trapping dialog uses attribute closedby="none" so it can only be closed by clicking its close button.
            The user cannot interact with background content or tab to other parts of the page.</p>
          
          <form method="dialog" class="my-3 text-right">
            <button class="my-2 px-6 py-2 text-white bg-blue-950 rounded-full hover:bg-indigo-950 focus:ring-2 focus:ring-blue-400 
          focus:ring-offset-2 transition-colors duration-200 text-base">Ok</button>
          </form>
        </div>
      </dialog>
      <hr class="my-4">
      <dialog id="dialog3" open class="m-auto autofocus p-3 text-md max-w-3/4 lg:max-w-2xl xl:max-w-3xl backdrop:bg-neutral-800/60 backdrop:backdrop-blur-xs border shadow-lg bg-neutral-100 border-neutral-300">
        
        <div class="bg-white border-b -m-3 border-neutral-300">
          <button commandfor="dialog3" command="close" aria-label="close modal"
          class="absolute top-1 right-0 text-current size-[2.75rem] text-xl">&#x2715;</button>
          <h2 class="px-7 mr-1 py-3 text-left lg:text-center text-2xl font-normal">This dialog defaults to open on page load.</h2>
        </div>
        
        <div class="bg-white px-4 rounded-lg border mt-6 border-neutral-300">
          <p class="my-3">When dialogs are open on page load, you cannot shade or blur the backdrop behind them.</p> 
          <p class="my-3">You can add the attribute closed-by="none" to make them trap focus and prevent interaction with other page elements.
          
          <form method="dialog" class="my-3 text-right">
            <button class="my-2 px-6 py-2 text-white bg-blue-950 rounded-full hover:bg-indigo-950 focus:ring-2 focus:ring-blue-400 
          focus:ring-offset-2 transition-colors duration-200 text-base">Close</button>
          </form>
        </div>
      </dialog> 
      <div class="[dialog[open]+&]:hidden">
        <button class="rounded-full bg-blue-950 hover:bg-indigo-950 my-2 py-2 px-5 text-center align-middle text-white"
        command="show-modal" commandfor="dialog3">Re-open initial dialog</button>     
      <hr class="my-4">
      </div>
      <button class="rounded-full bg-blue-950 hover:bg-indigo-950 my-2 py-2 px-5 text-center align-middle text-white"
       command="show-modal" commandfor="dialog4">Open a large dialog</button>
      <dialog id="dialog4" class="m-auto p-3 text-md max-w-3/4 lg:max-w-5xl backdrop:bg-neutral-800/60 backdrop:backdrop-blur-xs border bg-neutral-100 border-neutral-300">
        
        <div class="bg-white border-b -m-3 border-neutral-300">
          <button commandfor="dialog4" command="close" aria-label="close modal"
          class="absolute top-1 right-0 text-current size-[2.75rem] text-xl">&#x2715;</button>
          <h2 class="px-7 mr-1 py-3 text-left lg:text-center text-2xl font-normal">This is a large dialog.</h2>
        </div>
        
        <div class="bg-white px-4 rounded-lg border mt-6 border-neutral-300">
          
          <div class="grid md:grid-cols-2 gap-x-4">
            <div>
              <p class="my-3">The Big Oxmox advised her not to do so, because there were thousands of bad Commas, wild Question Marks and devious Semikoli, but the Little Blind Text didn’t listen. She packed her seven versalia, put her initial into the belt and made herself on the way. When she reached the first hills of the Italic Mountains, she had a last view back on the skyline of her hometown Bookmarksgrove, the headline of Alphabet Village and the subline of her own road, the Line Lane. Pityful a rethoric question ran over her cheek, then</p>
              <p class="my-3"><img class="block mx-auto" alt="placeholder 1" src="https://placecats.com/350/200"></p>
            </div>
            <div>
              <p class="my-3">Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean. A small river named Duden flows by their place and supplies it with the necessary regelialia.</p>
              <p class="my-3">It is a paradisematic country, in which roasted parts of sentences fly into your mouth. Even the all-powerful Pointing has no control about the blind texts it is an almost unorthographic life One day however a small line of blind text by the name of Lorem Ipsum decided to leave for the far World of Grammar.</p>
            </div>
          </div>
          
          <form method="dialog" class="my-3 text-right">
            <button class="my-2 px-6 py-2 text-white bg-blue-950 rounded-full hover:bg-indigo-950 focus:ring-2 focus:ring-blue-400 
          focus:ring-offset-2 transition-colors duration-200 text-base">Close</button>
          </form>
        </div>
      </dialog>
      <hr class="my-4">
      <h2 class="text-2xl lg:text-3xl my-2">Content Popover</h2>
      <p>IMO, having a popover that looks/acts like a standard dialog just creates extra code, but this is an example.</p>
      <button class="rounded-full bg-blue-950 hover:bg-indigo-950 my-2 py-2 px-5 text-center align-middle text-white" 
       popovertarget="dialog1">Open popover</button>
      <dialog id="dialog1" popover class="m-auto p-3 mx-5 md:mx-auto text-md md:max-w-lg lg:max-w-2xl backdrop:bg-neutral-800/60 backdrop:backdrop-blur-xs border border-neutral-300 bg-neutral-100">
        
        <div class="bg-white border-b -m-3 border-neutral-300">
          <button popovertarget="dialog1" popovertargetaction="hide" aria-label="close modal"
          class="absolute top-1 right-0 text-current size-[2.75rem] text-xl">&#x2715;</button>
          <h2 class="px-7 mr-1 py-3 text-left lg:text-center text-2xl font-normal">This is a popover.</h2>
        </div>
        
        <div class="bg-white px-4 rounded-lg border mt-6 border-neutral-300">
          <p class="my-3">Not only can this popover can be closed by clicking the escape key or its close buttons, it can also be closed by clicking anywhere outside of itself.</p>     
          
          <div class="my-3 text-right">
            <button popovertarget="dialog1" popovertargetaction="hide" class="my-2 px-6 py-2 text-white bg-blue-950 rounded-full hover:bg-indigo-950 focus:ring-2 focus:ring-blue-400 
          focus:ring-offset-2 transition-colors duration-200 text-base">Close</button>
          </div>
        </div>
      </dialog>
      <hr class="my-4">
      <h2 class="text-2xl lg:text-3xl my-2">Image Popover</h2>
      <p>IMO, best use for popover is a unique usage, like image expansion.</p>
      <button popovertarget="popover" aria-label="open image in a modal" class="text-base my-3">
        <img alt="cat thumbnail" src="https://placecats.com/350/280">
        <p class="my-1 font-normal">Enlarge Image 
          <span class="ml-1 inline-block size-[2.1rem] text-2xl font-light text-white bg-sky-700 rounded-full">&#65291;</span></p>
      </button>
      <dialog id="popover" popover class="m-auto bg-white border border-neutral-500 md:mx-auto max-h-svh shadow-lg backdrop:bg-neutral-800/60 backdrop:backdrop-blur-xs">
        <div class="text-right">
          <button class="absolute top-2 right-2 text-current size-[2.5rem] text-xl bg-white rounded-full font-bold" 
          popovertarget="popover" popovertargetaction="hide" aria-label="close modal" >&#x2715;</button>
        </div>
        <figure class="block mx-auto">
        <img alt="big cat pic" src="https://placecats.com/700/560">   
        <figcaption class="text-base font-light p-3">
          <p>I'm the caption.</p>
        </figcaption>
        <figure> 
      </dialog>
    </div>
  </div>
</div>

Related Examples

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

R Thapa

3 years ago

18.4k
Login popup
with social media login buttons

Nikolai

2 years ago

4.4k
images games
images games

Bonimater

1 year ago

721
Confirmation Modal for Critical Actions
A clean and responsive warning dialog component built with Tailwind CSS. Includes a title, descriptive text, and action buttons for confirmation or cancellation of critical actions.

Indra

1 year ago

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

Abigail

3 years ago

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

1k
Créer une story
Créer une story

Omer fils ELENGA

10 months ago

1k
button
Background Studio

nickosamba.nh21

9 months ago

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

Augustin

1 year ago

1.3k
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/

Achraf Testq

6 months ago

630
Blurred Background Modal

Prem..

3 years ago

14.5k
Modal multiple window

Maxim

2 years ago

3.1k