Preview:
<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>
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