JSFiddle - React, Tailwind, and code Playground

by AntonLapshin

HTML

<div id="flat">
</div>

<div id="area-dialog" class="dialog" header-data="Вещь">
    <div class="close"></div>
    <center>
        <span class="desc"></span> 
        <br/>                    
        <img src="http://109.171.98.218/production/Images/picRating.png" class="pic"/>
    </center>
    <br/>    
    Группа: <span class="group"></span>
    <br/>    
    Стиль: <span class="style"></span>
    <br/>
    <img src="http://109.171.98.218/production/Images/picRating.png" /><span class="rating"></span>
    <br/>
    <img src="http://109.171.98.218/production/Images/picRouble.png" /><span class="rouble"></span>
    <br/>   
    <img src="http://109.171.98.218/production/Images/picDollar.png" /><span class="dollar"></span>
    <br/>  
    <img src="http://109.171.98.218/production/Images/picEuro.png" /><span class="euro"></span>
    <br/>  
</div>

CSS

body { font-family: calibri; }
.opacity-medium { opacity: 0.5; }

#flat img { position: absolute; }
#area-dialog { display: none; position: absolute; z-index: 999; text-align: left; font-size: small; }
#area-dialog .pic { width: 82px; height: 82px; border-radius: 7px; box-shadow: 0 0 1px black; margin-top: 5px; }

.dialog 
{ 
    margin: 5px 10px 5px 5px;
    position: relative; 
    border: 1px solid black; 
    border-radius: 5px; 
    padding: 10px; 
    display: block;
    float: left;
    min-width: 100px;
    max-width: 160px;
    text-align: center;
    background: white;
}

.dialog:before 
{ 
    content: attr(header-data); 
    display: block; 
    height: 25px; 
    line-height: 25px; 
    background-color: #333; 
    color: white; 
    margin: -10px -10px 10px -10px; 
    border-top-left-radius: 3px; 
    border-top-right-radius: 3px;   
    text-align: center !important;        
}

.close
{
    font-family: calibri;
    font-size: 11pt;
    position: absolute; 
    right: 4px; 
    top: 4px;     
    width: 15px;
    height: 15px;
    line-height: 12px;
    vertical-align: middle;
    background-color: #555;
    color: white;
    cursor: pointer;
    border-radius: 50%;
    text-align: center !important;
}
.close:hover
{
    background-color: green;
}
.close:after
{
    content: 'x';
}

JavaScript

function FlatInit()
{
    var result = "21&2081&КотЭ *Серый*&КотЭ&Животные&10000&0&0&0&http://109.171.98.218/production/Images/Item/Animal/Cote1_png24&100&69&437&133,447,156,448,152,529,77,530,75,526,102,516,103,500,115,471,130,465&1&1&1&0&2184&Бульдог&Собака&Животные&25000&0&0&0&http://109.171.98.218/production/Images/Item/Animal/dog4_png24&100&232&384&352,400,370,411,351,513,361,520,321,531,273,520,263,489,271,475,308,446,308,425,317,410&1&4&1&0&19601&Пылесос&Пылесос&Уборка&3000&0&0&0&http://109.171.98.218/production/Images/Item/Cleaner/cleaner_1&90&686&493&686,493,714,493,714,533,686,533&1&1&1&0&1002&Старый сундук&Сундук&Нет стиля&1&0&0&0&http://109.171.98.218/production/Images/Item/Chest/1/chest_1_2&40&95&440&144,498,144,477,155,463,194,464,194,485,185,500&1&0&1&0&1003&Старый сундук&Сундук&Нет стиля&1&0&0&0&http://109.171.98.218/production/Images/Item/Chest/1/chest_1_3&40&160&440&196,506,196,485,216,472,246,484,246,506,227,522&1&0&1&0&1004&Сундук из кедра&Сундук&Нет стиля&2&0&0&0&http://109.171.98.218/production/Images/Item/Chest/2/chest_2_1&40&30&440&75,515,76,488,127,464,135,472,134,500,87,525&1&0&1&0&824&Стол Nevero&Стол&Модерн&2500&27000&120&42&http://109.171.98.218/production/Images/Item/Modern/Table/4/mod_table_4&30&240&350&264,384,356,362,432,392,422,467,331,510,271,455&2&4&1&0&2282&Черепаха&Экзотические&Животные&5000&6000&40&20&http://109.171.98.218/production/Images/Item/Animal/turtle&27&210&367&217,391,288,372,242,409&1&2&1&0&772&Диван Mobis&Диван&Хай-тек&3000&20000&100&60&http://109.171.98.218/production/Images/Item/Hi_tech/Couch/hi_tech_couch_2&25&325&245&414,272,585,284,585,416,577,420,549,412,502,437,375,382,376,334,413,326&2&2&1&0&672&Тумба Aside&Тумба&Хай-тек&3000&40000&0&0&http://109.171.98.218/production/Images/Item/Hi_tech/Cupboard/hi_tech_cupboard_2&20&65&345&86,387,150,359,176,360,176,400,118,440,86,437&2&2&1&0&2392&Мужчина в чёрном...