JSFiddle - React, Tailwind, and code Playground

by Sergey Kalashnikov

HTML

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<!-- Создано Microsoft Visio, экспорт SVG регистрации физического лица в качестве индивидуального предпринимателя.svg Page-1 -->
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:ev="http://www.w3.org/2001/xml-events"
		xmlns:v="http://schemas.microsoft.com/visio/2003/SVGExtensions/" width="7.34419in" height="5.71699in"
		viewBox="0 0 528.781 411.624" xml:space="preserve" color-interpolation-filters="sRGB" class="st16">
	<v:documentProperties v:langID="1049" v:metric="true" v:viewMarkup="false">
		<v:custProps>
			<v:cp v:nameU="BpmnElementType" v:lbl="BPMN Element Type" v:prompt="" v:type="1"
					v:format="Sub-Process;Event;Gateway;Process Diagram;Pool;Lane;Artifact;Connecting Object" v:sortKey=""
					v:invis="true" v:ask="false" v:langID="1049" v:cal="0" v:val="VT4(Process Diagram)"/>
			<v:cp v:nameU="BpmnId" v:lbl="Id" v:prompt="" v:type="0" v:format="" v:sortKey="" v:invis="true" v:ask="false"
					v:langID="1049" v:cal="0" v:val="VT0(0):26"/>
			<v:cp v:nameU="BpmnName" v:lbl="Name" v:prompt="" v:type="0" v:format="" v:sortKey="" v:invis="true" v:ask="false"
					v:langID="1049" v:cal="0" v:val="VT4()"/>
			<v:cp v:nameU="BpmnVersion" v:lbl="Version" v:prompt="" v:type="0" v:format="" v:sortKey="" v:invis="false"
					v:ask="false" v:langID="1049" v:cal="0" v:val="VT4()"/>
			<v:cp v:nameU="BpmnAuthor" v:lbl="Author" v:prompt="" v:type="0" v:format="" v:sortKey="" v:invis="false" v:ask="false"
					v:langID="1049" v:cal="0" v:val="VT4()"/>
			<v:cp v:nameU="BpmnLanguage" v:lbl="Language" v:prompt="" v:type="0" v:format="" v:sortKey="" v:invis="false"
					v:ask="false" v:langID="1049" v:cal="0" v:val="VT4()"/>
			<v:cp v:nameU="BpmnQueryLanguage" v:lbl="Query Language" v:prompt="" v:type="0" v:format="" v:sortKey=""
					v:invis="false" v:ask="false" v:langID="1049"...

CSS

*{
    font-family: wf_segoe-ui_light, wf_segoe-ui_normal, Tahoma, Verdana, Arial, Sans-serif;
}
.b-container{
    width:200px;
    height:150px;
    background-color: #ccc;
    margin:0px auto;
    padding:10px;
    font-size:30px;
    color: #fff;
}
.b-popup{
    width:100%;
    min-height:100%;
    background-color: rgba(0,0,0,0.5);
    overflow:hidden;
    position:fixed;
    top:0px;
}
.b-popup .b-popup-content{
    margin:40px auto 0px auto;
    width:600px;
    height: 400px;
    padding:10px;
    background-color: #fff;
    border-radius:5px;
    box-shadow: 0px 0px 10px #000;
}

JavaScript

$(document).ready(function(){
    PopUpHide();
    PopUpHide2();
});
function PopUpShow(){
    $("#popup1").show();
}
function PopUpHide(){
    $("#popup1").hide();
}
function PopUpShow2(){
    $("#popup2").show();
}
function PopUpHide2(){
    $("#popup2").hide();
}