JSFiddle - React, Tailwind, and code Playground

by NOVUSIDEA

HTML

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

    <form novalidate>
        <p>
            <input v-model="url" maxlength="2048" name="url" type="url" aria-autocomplete="both" aria-haspopup="false" autocapitalize="off" autocomplete="off" autocorrect="off" role="combobox" spellcheck="false" title="Suche" aria-label="Suche" placeholder="https://example.com">
        </p>
    </form>

    <ul class="pages" v-if="pages">
        <li v-for="(page, index) in pages" v-bin:key="index">
            <a :href="url + page.url" target="_blank" rel="noopener">
                <cite class="page-url">{{ url + page.url }}</cite>
                <h3 class="page-title" v-html="page.title"></h3>
            </a>
            <div class="page-description">
                <span v-html="truncate(page.description)"></span>
            </div>
        </li>
    </ul>

</div>

CSS

html, body {
    font-family: arial, sans-serif;
    font-size: 14px;
    line-height: 1.3;
}

body {
    color: #222;
}

a:link {
    color: #1a0dab;
}

a:hover {
    text-decoration: underline;
}

a:visited {
    color: #609;
}

input {
    background: #fff;
    display: block;
    line-height: 32px;
    height: 32px;
    width: 100%;
    color: rgba(0, 0, 0, .87);
    border: 1px solid #dfe1e5;
    padding: 1rem 1.5rem;
    border-radius: 16px;
}

#app {
    padding: 2rem;
}

.pages {
    list-style: none;
    padding: 0;
    margin: 0;
    /*width: 652px;*/
}

.pages > li {
    margin-bottom: 28px;
}

.page-url {
    font-size: 14px;
    font-style: normal;
    opacity: 0.5;
    color: #202124;
    text-decoration: none !important;
}

.page-title {
    font-size: 20px;
    padding-top: 4px;
    margin-bottom: 3px;
}

.page-description {
    color: #4d5156;
}

.page-description > span {
    line-height: 1.58;
    word-wrap: break-word;
}

JavaScript

new Vue({
    el: '#app',
    data: {
    	url: 'https://example.com',
        pages: [
            {
                url: '/',
                title: 'Home &raquo; Example',
                description: 'Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.'
            },
            {
                url: '/about',
                title: 'About &raquo; Example',
                description: 'Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.'
            },
            {
                url: '/projects',
                title: 'Projects &raquo; Example',
                description: 'Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.'
            },
            {
                url: '/contact',
                title: 'Contact &raquo; Example',
                description: 'Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.'
            },
        ]
    },

    methods: {
        truncate(text, length, ending) {
            if (length == null) {
                length = 160;
            }
            
            if (ending == null) {
                ending = '...';
            }
            
            if (text.length > length) {
                return text.substring(0, length - ending.length) + ending;
            } else {
                return text;
            }
        },
        breadcrumb(url) {

        }
    }

});