<html>
    <head>
        <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">
        <link rel="stylesheet" href="index.css">
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
        
        <style>
            .red { color: red; }
            .big { font-size: 100px; }
            .underline { text-decoration: underline; }
        </style>
        
    </head>
    <body>
        <div id="app" class="bg-blue-300 h-screen w-full flex flex-col justify-center items-center text-sm relative">
            
            <!-- Red Text if 5 > 1 -->
            <div>Text 1</div>
            
            <!-- Use size for text size (inline) -->
            <div>Text 2</div>
            
            <!-- underline and red text if toggle is true -->
            <div>Text 3</div>
            
            <!-- orange text (inline) -->
            <div>Text 4</div>
            
            <!-- red if toggle is true, otherwise big. Always underline -->
            <div>Text 5</div>
            
        </div>
        
        <script>
            var app = new Vue({
                el: '#app',
                data: {
                    size: 25,
                    toggle: true,
                },
            });
        </script>
    </body>
</html>

<html>

<head>

<style>

.red { color: red; }

.big { font-size: 100px; }

.underline { text-decoration: underline; }

</style>

</head>

<body>

<div id="app" class="bg-blue-300 h-screen w-full flex flex-col justify-center items-center

text-sm relative">

</div>

var app = new Vue({

el: '#app',

data: {

size: 25,

toggle: true,

});

</script>

</body>

</html>

›

"Download the Vue Devtools extension for a better development experience: https://github.com/vuejs/vue-devtools"

›

"You are running Vue in development mode. Make sure to turn on production mode when deploying for production. See more tips at https://vuejs.org/guide/deployment.html"

-5:54