JSFiddle - React, Tailwind, and code Playground

by podgorniy

HTML

<ol>
	<li>
		<a href="http://google.com">google.com</a>
		<p>Поисковая машина гугла</p>
        <div class="labels">
		<span>поиск</span>
		<span>гугл</span>
            </div>
	</li>

	<li>
		<a href="http://yandex.ru">yandex.ru</a>
		<p>Яндексовая поисковая машина</p>
                <div class="labels">
		<span>поиск</span>
		<span>яндекс</span>
        </div>
	</li>
</ol>

CSS

* {
    margin: 0;
    padding: 0;
}

ol {
    margin-left: 2em;
    margin-top: 2em;
}

li {
    margin-bottom: 1em;
}

span {
    background: #FFFFC2;
    border-radius: 3px;
}

.labels {
    text-align: right;
}

JavaScript

[{
    url: 'http://google.com',
    description: 'Поисковая машина гугла',
    tags: ['поиск', 'гугл']
}, {
    url: 'http://yandex.ru',
    description: 'Яндексовая поисковая машина',
    tags: ['поиск', 'яндекс']
}]