JSFiddle - React, Tailwind, and code Playground

by Viet Phan

HTML

<script src="http://d3js.org/topojson.v1.min.js"></script>
<script src="https://raw.githubusercontent.com/markmarkoh/datamaps/v0.2.10/dist/datamaps.world.min.js"></script>
<div id="map" style="position: relative; width: 700px; height: 200px;">
    <p id="title">CaDao and Viet's map of the world</p>
</div>

CSS

#map {
    background:repeating-linear-gradient(45deg, #228eb5, #228eb5 5px, rgba(124, 124, 124, 0.8) 6px, rgba(124, 124, 124, 0.8) 6px);
}

#title {
    z-index:100;
    position:absolute;
    bottom: 5%; 
    left: 5%;
    width: 50%;
    color: #14556c;
    opacity: 1;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 100;
    font-weight: bold;
    font-style: italic;
    text-shadow: 0px 1px 1px #7abbd2; 
    -webkit-animation: intro 3s ease 1s 1 forwards; /* Chrome, Safari, Opera */
    -moz-animation: intro 3s ease 1s 1 forwards; /* Firefox */
    animation: intro 3s ease 1s 1 forwards; /* Standard syntax */
}
/* Intro text animation 
/* Chrome, Safari, Opera 
@-webkit-keyframes intro {
    0%   {left: -100%; bottom: 5%; opacity: 0;}
    50%  {left: 25%; bottom: 5%;opacity: 0.8;}
    100% {left: 5%; bottom: 5%;opacity: 1;}
}
/* Firefox 
@-moz-keyframes intro {
    0%   {left: -100%; bottom: 5%; opacity: 0;}
    50%  {left: 25%; bottom: 5%;opacity: 0.8;}
    100% {left: 5%; bottom: 5%;opacity: 1;}
}
/* Standard syntax 
@keyframes intro {
    0%   {left: -100%; bottom: 5%; opacity: 0;}
    50%  {left: 25%; bottom: 5%;opacity: 0.8;}
    100% {left: 5%; bottom: 5%;opacity: 1;}
}*/