JSFiddle - React, Tailwind, and code Playground

by ricardoe

HTML

<link rel="stylesheet" href="https://ds.gumgum.com/stable/theme-blue.css">
<script src="https://unpkg.com/vue"></script>
<script src="https://mxcoder.github.io/gds-vue-components/dist/umd/all.js"></script>
<div id="app">
    <div class="gds-layout__container">
        <gds-button @click="openModal" context="primary">Open Modal</gds-button>
        <gds-modal uid="modal-default" :shown="modal" v-on:close="closeModal" v-on:esc="closeModal">
            <p>This is some content for the Modal</p>
            <div slot="footer">
                <gds-button context="danger" @click="closeModal">Cancel</gds-button>
            </div>
        </gds-modal>
    </div>
</div>

CSS

html,body{height:100%}

JavaScript

new Vue({
    el: '#app',
    data: function() {
        return {
            modal: false
        };
    },
    methods: {
        openModal: function() {
            this.modal = true;
        },
        closeModal: function() {
            this.modal = false;
        }
    },
    components: gds.all
})