JSFiddle - React, Tailwind, and code Playground

by NOVUSIDEA

HTML

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

    <div class="card">
        <div class="card-header p-3">
            <input class="form-control form-control-lg" v-model="domain">
        </div>
        <ul class="list-group list-group-flush" v-if="domain">
            <li v-for="tld in tlds" class="list-group-item">
                {{ domain }}.{{ tld }}
            </li>
        </ul>
    </div>

</div>

CSS

body {
    margin: 2rem;
}

JavaScript

var app = new Vue({
    el: '#app',
    data: {
        domain: 'example',
        tlds: [
            'design', 'com', 'net', 'org', 'info', 'biz',
            'in', 're', 'tv', 'co', 'be',
            'nl', 'pw', 'me', 'cc', 'uk'
        ]
    }
});