JSFiddle - React, Tailwind, and code Playground

by Ian Sadovy

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css">
<div class="container-fluid">
    <div class="row">
        <div class="col-sm-4">
            <div id="mayor-prev" class="item">
                <h4>Мер міста</h4>
                <p><span id="mayor"></span> (<span id="name"></span>)</p>
            </div>
        </div>
        <div id="mainStreet-prev" class="col-sm-4 item">
            <h4>Головна вулиця</h4>
            <p><span id="mainStreet"></span> (<span id="name"></span>)</p>
        </div>
        <div class="col-sm-4">
            <div id="phoneCode-next" class="item">
                <h4>Телефоний код</h4>
                <p><span id="phoneCode"></span> (<span id="name"></span>)</p>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-sm-4">
            <div id="population-prev" class="item">
                <h4>Населення</h4> 
                <p><span id="population"></span> (<span id="name"></span>)</p>
            </div>
            <div id="name-prev" class="item">
                <h4>Назвза</h4>
                <span id="name"></span>
            </div>
            <div id="area-prev" class="item">
                <h4>Площа</h4>
                <p><span id="area"></span> км² (<span id="name"></span>)</p>
            </div>
        </div>
        <div id="current" class="col-sm-4">
            <center>
                <h3 id="name"></h3>
                <img id="logo"></img>
                <p>Область: <span id="region"></span></p>
                <p>Головна вулиця: <span id="mainStreet"></span></p>
                <p>Мер міста: <span id="mayor"></span></p>
                <p>Площа: <span id="area"></span></p>
                <p>Населення: <span id="population"></span></p>
                <p>Телефоний код: <span id="phoneCode"></span></p>
           ...

CSS

.item {
    padding: 5px;
    height: 100px;
}
.item:hover {
    background: #eee;
    cursor: pointer;
    
}

#name-prev, #name-next {
    background: #FFCDD2;
}
#current #population, #population-prev, #population-next {
    background: #E1BEE7;
}
#current #area, #area-prev, #area-next {
    background: #C5CAE9;
}
#current #mayor, #mayor-prev, #mayor-next {
    background: #B3E5FC;
}
#current #mainStreet, #mainStreet-prev, #mainStreet-next {
    background: #B2DFDB;
}
#current #phoneCode, #phoneCode-prev, #phoneCode-next {
    background: #DCEDC8;
}

JavaScript

var data = [
    {
    	name: "Вінниця",
        area: 113.2,
        population: 370711,
        mainStreet: "Соборна",
        mayor: "Моргунов Сергій Анатолійович",
        region: "Вінницька область",
        phoneCode: "+380-432",
        logo: "https://upload.wikimedia.org/wikipedia/commons/thumb/1/1f/Vinnytsya_gerb.png/120px-Vinnytsya_gerb.png"
    },
    {
    	name: "Дніпропетровськ",
        area: 405,
        population: 989437,
        mainStreet: "Карла Маркса",
        mayor: "Булавка Галина Іллівна",
        region: "Дніпропетровська область",
        phoneCode: "+380-56",
        logo: "https://upload.wikimedia.org/wikipedia/commons/thumb/9/90/Coat_of_arms_of_Dnipropetrovsk.png/105px-Coat_of_arms_of_Dnipropetrovsk.png"
    },
    {
    	name: "Донецьк",
        area: 358,
        population: 750000,
        mainStreet: "Артема",
        mayor: "ЖЕБРІВСЬКИЙ Павло Іванович",
        region: "Донецька область",
        phoneCode: "+380-622",
        logo: "https://upload.wikimedia.org/wikipedia/commons/thumb/9/98/%D0%91%D0%BE%D0%BB%D1%8C%D1%88%D0%BE%D0%B9_%D0%B3%D0%B5%D1%80%D0%B1_%D0%94%D0%BE%D0%BD%D0%B5%D1%86%D0%BA%D0%B0.png/120px-%D0%91%D0%BE%D0%BB%D1%8C%D1%88%D0%BE%D0%B9_%D0%B3%D0%B5%D1%80%D0%B1_%D0%94%D0%BE%D0%BD%D0%B5%D1%86%D0%BA%D0%B0.png"
    },
    {
    	name: "Житомир",
        area: 61,
        population: 269942,
        mainStreet: "Київська",
        mayor: "Сухомлин Сергій Іванович",
        region: "Житомирська оласть",
        phoneCode: "+380-412",
        logo: "https://upload.wikimedia.org/wikipedia/commons/thumb/8/82/Zhytomyr-COA.PNG/86px-Zhytomyr-COA.PNG"
    },
    {
    	name: "Запоріжжя",
        area: 331,
        population: 757617,
        mainStreet: "Леніна",
        mayor: "Буряк Володимир Вікторович",
        region: "Запорізька область",
        phoneCode: "+380-612",
        logo:...