JSFiddle - React, Tailwind, and code Playground

by cathead

HTML

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<div id="shell">
    <button 
        @click="toggle"
    >
        toggle
    </button>

    <transition name="bozo">    
        <div 
            class="tacos" 
            v-if="isOpen"
        >
            <div class="taco">
                <h3>Hello world lorem ipsum folar</h3>
                Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Maecenas sed diam eget risus varius blandit sit amet non magna. Sed posuere consectetur est at lobortis.

Donec id elit non mi porta gravida at eget metus.Cras mattis consectetur purus sit amet fermentum. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Maecenas sed diam eget risus varius blandit sit amet non magna. Sed posuere consectetur est at lobortis.

Maecenas faucibus mollis interdum. Vestibulum id ligula porta felis euismod semper. Nullam quis risus eget urna mollis ornare vel eu leo. Cras mattis consectetur purus sit amet fermentum. Nullam quis risus eget urna mollis ornare vel eu leo. Donec id elit non mi porta gravida at eget metus.
            </div>
            <div class="taco">
                <h3>Hello world lorem ipsum folar</h3>

Maecenas faucibus mollis interdum. Vestibulum id ligula porta felis euismod semper. Nullam quis risus eget urna mollis ornare vel eu leo. Cras mattis consectetur purus sit amet fermentum. Nullam quis risus eget urna mollis ornare vel eu leo. Donec id elit non mi porta gravida at eget metus.Cras mattis consectetur purus sit amet fermentum. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Integer posuere erat a ante venenatis dapibus posuere...

SCSS

.tacos {
  width: 400px;
}

.taco {
  border-bottom: 1px solid purple;
  padding: 10px 0;
}



.bozo-enter, 
.bozo-leave-to {
    opacity: 0;
}

.bozo-enter-active, 
.bozo-leave-active {
    transition: opacity 150ms ease;
}

.bozo-enter-to, 
.bozo-leave {
    opacity: 1;
}


* {
  margin: 0;
  padding: 0;
}
#shell {
  padding: 30px;
}

JavaScript

new Vue({
    el: '#shell',
    data: {
        isOpen: false
    },
    methods: {
      toggle() {
          this.isOpen = !this.isOpen;
      },
    }
});