JSFiddle - React, Tailwind, and code Playground

by yoowordpress

HTML

<section class="container">
    
<div class="tbl_h">
<div class="CompanyName v479">Наименование</div>
<div class="Country v120">Регион</div>
</div>
    
<div class="tbl_tr grey">
<div class="CompanyName_grey v479">BURES ART</div>
<div class="Country v120">Чехия</div>
</div>
    
<div class="tbl_tr">
<div class="CompanyName v479">HAMMER-ART</div>
<div class="Country v120">Россия, г. Новосибирск</div>
</div>
    
<div class="tbl_tr grey">
<div class="CompanyName_grey v479"><a href="#" class="paulund_modal_1">IMEX</a></div>
<div class="Country v120">Италия</div>
</div>
    
 <div class="tbl_tr">
<div class="CompanyName v479">RAMASTUDIO</div>
<div class="Country v120">Россия, г. Москва</div>
</div>
    
<div class="tbl_tr grey">
<div class="CompanyName_grey v479">АЛЬФА АРТ</div>
<div class="Country v120">Россия, г. Санкт-Петербург</div>
</div>
    
    <div class="tbl_tr">
        <div class="CompanyName v479"><a href="#" class="paulund_modal_2">АРТ-ПРОФИЛЬ</a></div>
<div class="Country v120">Россия, г. Белгород</div>
</div>
    
<div class="tbl_tr grey">
<div class="CompanyName_grey v479"><a href="#" class="paulund_modal_3">АРТЭ</a></div>
<div class="Country v120">Россия, г. Москва</div>
</div>
    
    <div class="tbl_tr">
        <div class="CompanyName v479"><a href="#" class="paulund_modal_4">ДИЗАЙН-ИНТЕР-ТРЕЙД</a></div>
<div class="Country v120">Россия, г. Толятти</div>
</div>
    
<div class="tbl_tr grey">
<div class="CompanyName_grey v479">ЕВРО-АЗИАТСКАЯ ТОРГОВАЯ КОМПАНИЯ</div>
<div class="Country v120">Россия, г. Ессентуки</div>
</div>
    
    <div class="tbl_tr">
        <div class="CompanyName v479"><a href="#" class="paulund_modal_5">ГАЛЕОН-ТРЕЙД</a></div>
<div class="Country v120">Россия, г. Челябинск</div>
</div>
    
<div class="tbl_tr grey">
<div class="CompanyName_grey v479">ГАЛЕРЕЯ ФОРМА \ БАГЕТМАРКЕТ</div>
<div class="Country v120">Россия, г. Москва</div>
</div>
    
     <div class="tbl_tr">
         <div class="CompanyName v479"><a href="#"...

CSS

.tbl_tr:hover {
    background: none repeat scroll 0 0 #C4E0EE;
}
.CompanyName, .CompanyName_grey, .Country {
    padding-left: 5px !important;
}

.Country {
    color: #4d4d4d;
}

.CompanyName a {
    background: url("http://www.ite-expo.ru/images/right_grey.png") no-repeat scroll right center rgba(0, 0, 0, 0);
    color: #000000;
    display: block;
    text-decoration: none;
}
.CompanyName_grey a {
    background: url("http://www.ite-expo.ru/images/right_white.png") no-repeat scroll right center rgba(0, 0, 0, 0);
    color: #000000;
    display: block;
    text-decoration: none;
}
.FilterExhibitors {
    margin-top: 10px;
    overflow: hidden;
}
.FilterExhibitors .FilterItem {
    float: left;
    padding-right: 8px;
    width: 273px;
}
.FilterExhibitors .FilterItem input {
    width: 261px !important;
}
.FilterExhibitors .FilterItem select {
    width: 273px !important;
}
.FilterExhibitors .FilterSubmit {
    float: left;
    padding-right: 5px;
    padding-top: 15px;
}
.FilterExhibitors .FilterReset {
    float: left;
    padding-top: 15px;
    width: 60px !important;
}
.tbl_h, .tbl_tr {
    border-radius: 3px;
    overflow: hidden;
}
.tbl_tr {
background: none repeat scroll 0 0 #F7FDFA;
}

.tbl_h > div, .tbl_tr > div, .tbl_wo > div {
    float: left;
    overflow: hidden;
    padding: 7px 0 8px;
}
.tbl_h {
    color: #757575;
    font-size: 11px;
}
.grey {
    background: none repeat scroll 0 0 #CCCCCC;
}
.v120 {
    width: 220px;
}
.v479 {
    border-right: 1px solid #FFFFFF;
    width: 400px;
}

JavaScript

// Defining our jQuery plugin
$.fn.paulund_modal_box = function(prop){
// Default parameters
var options = $.extend({
height : "250",
width : "500",
title:"JQuery Modal Box Demo",
description: "Example of how to create a modal box.",
top: "20%",
left: "30%",
},prop);
//Click event on element
return this.click(function(e){
add_block_page();
add_popup_box();
add_styles();
$('.paulund_modal_box').fadeIn();
});
/**
* Add styles to the html markup
*/
function add_styles(){
$('.paulund_modal_box').css({
'position':'absolute',
'left':options.left,
'top':options.top,
'display':'none',
'height': options.height + 'px',
'width': options.width + 'px',
'border':'1px solid #fff',
'box-shadow': '0px 2px 7px #292929',
'-moz-box-shadow': '0px 2px 7px #292929',
'-webkit-box-shadow': '0px 2px 7px #292929',
'border-radius':'10px',
'-moz-border-radius':'10px',
'-webkit-border-radius':'10px',
'background': '#cccccc',
'z-index':'50',
});
$('.paulund_modal_close').css({
'position':'relative',
'top':'-10px',
'left':'27px',
'float':'right',
'display':'block',
'height':'50px',
'width':'50px',
    'background': 'url(http://artindustry.ru/expo/closebox.png) no-repeat',
});
/*Block page overlay*/
var pageHeight = $(window).height();
var pageWidth = $(window).width();
$('.paulund_block_page').css({
'position':'absolute',
'top':'0',
'left':'0',
'background-color':'rgba(0,0,0,0.6)',
'height':pageHeight,
'width':pageWidth,
'z-index':'10'
});
$('.paulund_inner_modal_box').css({
'background-color':'#F7FDFA',
'height':(options.height - 50) + 'px',
'width':(options.width - 50) + 'px',
'padding':'10px',
'margin':'15px',
'border-radius':'10px',
'-moz-border-radius':'10px',
'-webkit-border-radius':'10px'
});
}
/**
* Create the block page div
*/
function add_block_page(){
var block_page = $('<div class="paulund_block_page"></div>');
$(block_page).appendTo('body');
}
/**
* Creates the modal box
*/
function add_popup_box(){
var pop_up = $('<div class="paulund_modal_box"><a href="#"...