owl/tools/playground/templates.xml

<templates>

    <div t-name="App" t-on-run-project="_run" class="h-full flex">

        <Editor js="state.js" xml="state.xml" css="state.css" />


        <div class="flex flex-col w-1/2 h-full">

            <div class="bg-purple-300 mx-2 my-1 p-2 rounded-sm" style="background-color: #865A7B">
                <div class="flex items-center">
                    <div class="relative">
                        <select t-on-change="_setSample" class="block appearance-none w-full bg-gray-200 border border-gray-200 text-gray-700 py-1 px-2 pr-8 rounded-sm leading-tight focus:outline-none focus:bg-white focus:border-gray-500">
                            <t t-foreach="samples" t-as="sample" t-key="sample_index">
                                <option>
                                    <t t-esc="sample.description"/>
                                </option>
                            </t>
                        </select>
                        <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-gray-700">
                            <svg class="fill-current h-4 w-4"
                                xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
                                <path d="M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z"></path>
                            </svg>
                        </div>
                    </div>
                </div>

            </div>

            <div t-ref="iframe-container" class="bg-white flex-grow m-2 rounded-sm shadow"></div>
        </div>


    </div>

    <t t-name="Editor" t-on-open-file="_openFile">
        <div class="resize-x w-1/2">

            <div class="flex justify-between items-center" style="background-color: #865A7B">
                <ul class="flex justify-start">
                    <li>
                        <Tab t-on-click="_openXML">
                            xml
                        </Tab>
                    </li>
                    <li>
                        <Tab t-on-click="_openJS">
                            js
                        </Tab>
                    </li>
                    <li>
                        <Tab t-on-click="_openCSS">
                            css
                        </Tab>
                    </li>
                </ul>
                <ul class="flex justify-end m-2">
                    <li>
                        <button class="h-6 w-6 bg-white rounded-full p-1 shadow" t-on-click="_run">
                            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 9l3 3-3 3m5 0h3M5 20h14a2 2 0 002-2V6a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
                            </svg>
                        </button>
                    </li>
                </ul>
            </div>

            <div id="container" class="h-full"></div>
        </div>
    </t>

    <t t-name="Tab">
        <button class="bg-white hover:bg-gray-300 uppercase rounded-sm px-2 shadow mx-1">
            <t t-slot="default"/>
        </button>
    </t>

</templates>