<html> <body> <div class="dark relative min-h-screen transition-all ease-out" id="parent"> <label for="check" class="mx-auto mt-4 block w-fit border px-4 py-2"> <span>dark</span> <input type="checkbox" class="hidden" id="check" onclick="document.getElementById('parent').classList.toggle('dark')" /> </label> <div class="absolute left-1/2 top-1/2 mx-auto max-w-md -translate-x-1/2 -translate-y-1/2 rounded-lg border p-4 shadow-xl"> <h1 class="mb-2 border-b-2 border-indigo-400 pb-1 text-center text-xl">Lorem ipsum dolor sit amet.</h1> <div> <p class="text-emerald-600">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Soluta, illum rem.</p> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Laboriosam molestias laborum odio.</p> </div> </div> </div> </body> </html>
Preview:
downloadDownload PNG
downloadDownload JPEG
downloadDownload SVG
Tip: You can change the style, width & colours of the snippet with the inspect tool before clicking Download!
Click to optimize width for Twitter