JSFiddle - React, Tailwind, and code Playground

by greenpeace

HTML

<script src="https://storage.googleapis.com/gpes-static/mapa-yemen/js/resize.js"></script>
<link href="https://fonts.googleapis.com/css?family=Lato:300,400&display=swap" rel="stylesheet">
<!-- Generated by ai2html v0.99.2 - 2020-03-24 15:06 -->
<!-- ai file: mapa-yemen.ai -->
<style media="screen,print">
	#g-mapa-yemen-box ,
	#g-mapa-yemen-box .g-artboard {
		margin:0 auto;
		font-family: "Lato", sans-serif;
	  font-weight: 300;
	}
	#g-mapa-yemen-box p {
		margin:0;
	}
	#g-mapa-yemen-box .g-aiAbs {
		position:absolute;
	}
	#g-mapa-yemen-box .g-aiImg {
		position:absolute;
		top:0;
		display:block;
		width:100% !important;
	}
	#g-mapa-yemen-box .g-aiSymbol {
		position: absolute;
		box-sizing: border-box;
	}
	#g-mapa-yemen-box .g-aiPointText p { white-space: nowrap; }
	#g-mapa-yemen-desktop {
		position:relative;
		overflow:hidden;
	}
	#g-mapa-yemen-desktop p {
		font-weight:500;
		line-height:23px;
		height:auto;
		filter:alpha(opacity=100);
		-ms-filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
		opacity:1;
		letter-spacing:0.005em;
		font-size:19px;
		text-align:left;
		color:rgb(0,0,0);
		text-transform:none;
		padding-bottom:0;
		padding-top:0;
		mix-blend-mode:normal;
		font-style:normal;
		position:static;
	}
	#g-mapa-yemen-desktop .g-pstyle0 {
		height:23px;
	}
	#g-mapa-yemen-desktop .g-pstyle1 {
		font-weight:700;
		height:23px;
	}
	#g-mapa-yemen-desktop .g-pstyle2 {
		line-height:22px;
		height:22px;
		font-size:18px;
	}
	#g-mapa-yemen-desktop .g-pstyle3 {
		line-height:29px;
		height:29px;
		letter-spacing:0.2em;
		font-size:24px;
		text-align:center;
		font-weight: 300;
	}
	#g-mapa-yemen-desktop .g-pstyle4 {
		line-height:29px;
		height:29px;
		letter-spacing:0.2em;
		font-size:24px;
		font-weight: 300;
	}
	#g-mapa-yemen-desktop .g-pstyle5 {
		line-height:16px;
		height:16px;
		letter-spacing:0em;
		font-size:13px;
	}
	#g-mapa-yemen-desktop .g-pstyle6...