TailwindCSS Playground

This is a quick testing playground you can use to create some quick TailwindCSS templates and components.

Playground Editor

<div class="flex justify-center min-h-screen bg-gray-100">
    <div class="w-2/3 m-auto bg-white border-2 border-teal-700 rounded">
        <div class="p-4 lg:flex lg:justify-around lg:items-center sm:p-12">
            <div class="lg:text-center">
                <h1 class="text-2xl font-bold text-teal-700">Irene Sims</h1>
                <p class="text-sm">VP of Sales, SomeCompany</p>
            </div>
            <div class="w-16 h-1 my-4 bg-teal-700 rounded lg:w-1 lg:h-16"></div>
            <div>
                <div class="flex items-center py-1">
                    <svg class="text-teal-700 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"
                        fill="black" width="18px" height="18px">
                        <path d="M0 0h24v24H0V0z" fill="none" />
                        <path
                            d="M20 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm-.4 4.25l-7.07 4.42c-.32.2-.74.2-1.06 0L4.4 8.25c-.25-.16-.4-.43-.4-.72 0-.67.73-1.07 1.3-.72L12 11l6.7-4.19c.57-.35 1.3.05 1.3.72 0 .29-.15.56-.4.72z" />
                    </svg>
                    <span class="px-4">irene.sims@example.com</span>
                </div>
                <div class="flex items-center py-1">
                    <svg class="text-teal-700 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"
                        fill="black" width="18px" height="18px">
                        <path d="M0 0h24v24H0V0z" fill="none" />
                        <path
                            d="M19.23 15.26l-2.54-.29c-.61-.07-1.21.14-1.64.57l-1.84 1.84c-2.83-1.44-5.15-3.75-6.59-6.59l1.85-1.85c.43-.43.64-1.03.57-1.64l-.29-2.52c-.12-1.01-.97-1.77-1.99-1.77H5.03c-1.13 0-2.07.94-2 2.07.53 8.54 7.36 15.36 15.89 15.89 1.13.07 2.07-.87 2.07-2v-1.73c.01-1.01-.75-1.86-1.76-1.98z" />
                    </svg>
                    <span class="px-4">+123-456-7890</span>
                </div>
                <div class="flex items-center py-1">
                    <svg class="text-teal-700 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"
                        fill="black" width="18px" height="18px">
                        <path d="M0 0h24v24H0V0z" fill="none" />
                        <path
                            d="M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zm6.93 6h-2.95c-.32-1.25-.78-2.45-1.38-3.56 1.84.63 3.37 1.91 4.33 3.56zM12 4.04c.83 1.2 1.48 2.53 1.91 3.96h-3.82c.43-1.43 1.08-2.76 1.91-3.96zM4.26 14C4.1 13.36 4 12.69 4 12s.1-1.36.26-2h3.38c-.08.66-.14 1.32-.14 2s.06 1.34.14 2H4.26zm.82 2h2.95c.32 1.25.78 2.45 1.38 3.56-1.84-.63-3.37-1.9-4.33-3.56zm2.95-8H5.08c.96-1.66 2.49-2.93 4.33-3.56C8.81 5.55 8.35 6.75 8.03 8zM12 19.96c-.83-1.2-1.48-2.53-1.91-3.96h3.82c-.43 1.43-1.08 2.76-1.91 3.96zM14.34 14H9.66c-.09-.66-.16-1.32-.16-2s.07-1.35.16-2h4.68c.09.65.16 1.32.16 2s-.07 1.34-.16 2zm.25 5.56c.6-1.11 1.06-2.31 1.38-3.56h2.95c-.96 1.65-2.49 2.93-4.33 3.56zM16.36 14c.08-.66.14-1.32.14-2s-.06-1.34-.14-2h3.38c.16.64.26 1.31.26 2s-.1 1.36-.26 2h-3.38z" />
                    </svg>
                    <span class="px-4">example.com</span>
                </div>
                <div class="flex items-center py-1">
                    <svg class="text-teal-700 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"
                        fill="black" width="18px" height="18px">
                        <path d="M0 0h24v24H0V0z" fill="none" />
                        <path
                            d="M12 2C8.13 2 5 5.13 5 9c0 4.17 4.42 9.92 6.24 12.11.4.48 1.13.48 1.53 0C14.58 18.92 19 13.17 19 9c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z" />
                    </svg>
                    <span class="px-4">Austin, Texas</span>
                </div>
            </div>
        </div>
        <div class="text-white bg-teal-700">
            <div class="p-4 text-sm md:flex md:items-center md:justify-center">
                <a href="#_" class="block px-4 py-2 m-2 transition duration-500 ease-in-out rounded hover:bg-teal-800">
                    <span>Facebook</span>
                </a>
                <a href="#_" class="block px-4 py-2 m-2 transition duration-500 ease-in-out rounded hover:bg-teal-800">
                    <span>Twitter</span>
                </a>
                <a href="#_" class="block px-4 py-2 m-2 transition duration-500 ease-in-out rounded hover:bg-teal-800">
                    <span>Instagram</span>
                </a>
                <a href="#_" class="block px-4 py-2 m-2 transition duration-500 ease-in-out rounded hover:bg-teal-800">
                    <span>Behance</span>
                </a>
                <a href="#_" class="block px-4 py-2 m-2 transition duration-500 ease-in-out rounded hover:bg-teal-800">
                    <span>GitHub</span>
                </a>
            </div>
        </div>
    </div>
</div>

Playground Preview

', editor.getValue()); iframe = document.getElementById('preview'); iframe.contentWindow.document.open(); iframe.contentWindow.document.write(iframeContent); iframe.contentWindow.document.close(); // }, 250); } window.debounce = function(func, wait, immediate) { var timeout; return function() { var context = this, args = arguments; var later = function() { timeout = null; if (!immediate) func.apply(context, args); }; var callNow = immediate && !timeout; clearTimeout(timeout); timeout = setTimeout(later, wait); if (callNow) func.apply(context, args); }; }; -->

Tails

Static

MarkdownX

Pines

Wave

Designer

Help & Support

Sponsorships

Terms of Service

TailwindCSS Playground

Tails

Static

MarkdownX

Pines

Wave

Designer

Join 135,999 other developers as we learn, build, and grow together.

Community

Rewards

Resources

Meet the Team

Help & Support

Sponsorships

Terms of Service

TailwindCSS Playground