JSFiddle - React, Tailwind, and code Playground

by NOVUSIDEA

HTML

<script src="https://unpkg.com/bootstrap@5/dist/js/bootstrap.min.js"></script>
<script src="https://unpkg.com/@highlightjs/[email protected]/highlight.min.js"></script>
<script src="https://unpkg.com/[email protected]/dist/axios.min.js"></script>
<script src="https://unpkg.com/[email protected]/dist/vue.js"></script>
<link rel="stylesheet" href="https://unpkg.com/bootstrap@5/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="https://unpkg.com/@highlightjs/[email protected]/styles/default.min.css">
<div id="app">

    <div class="input-group mb-3">
        <input type="text" v-model="url" @keyup.enter="getSource" class="form-control" placeholder="Write or paste your url&hellip;" aria-label="URL" aria-describedby="button-run" :disabled="loading">
        <button  class="btn btn-outline-secondary" @click="getSource" type="button" id="button-run" :disabled="loading">Run</button>
    </div>

    <div v-if="loading" class="card flex flex-row justify-content-center align-items-center p-3 bg-light">
        <div class="spinner-border" role="status" aria-hidden="true"></div>
        <span class="fs-2 ms-3">Loading</span>
    </div>

    <div v-if="src && !loading" class="card">
        <highlightjs class="mb-0" language='html' :code="src" />
    </div>

    <hr class="my-5">

    <div class="accordion" id="accordionExample">
        <div class="accordion-item">
            <h2 class="accordion-header" id="headingComposerJson">
                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseComposerJson">
                    composer.json
                </button>
            </h2>
            <div id="collapseComposerJson" class="accordion-collapse collapse" aria-labelledby="headingComposerJson" data-bs-parent="#accordionExample">
                <highlightjs class="accordion-body mb-0" language='json' code='{
    "require": {
         "guzzlehttp/guzzle": "^7.0"
    },
    "require-dev": {
       ...

CSS

body {
    padding: 2rem;
}

JavaScript

Vue.use(hljs.vuePlugin);

new Vue({
    el: '#app',
    data: {
        url: 'https://t3n.de',
        src: '',
        axios: axios.create(),
        loading: false,
    },
    methods: {
        getSource: function(){

            var _this = this;

            _this.loading = true;

            _this.src = '';

            this.axios.get('/path/to/source.php?url=' + this.url).then(function (response) {

                _this.url = response.data.origin;
                _this.src = response.data.source;

            }).catch(function (error) {
            
                console.log(error);
                
            }).then(function () {
            
                _this.loading = false;
                
            });

        }
    }
});