JSFiddle - React, Tailwind, and code Playground
by pphheerroonn
HTML
<script src="https://cdn.apple-mapkit.com/mk/5.x.x/mapkit.js"></script>
<style>
#map {
height: 600px;
}
a:link, a:visited {
color: #2aaef5;
outline: none;
text-decoration: none;
}
.landmark {
width: 250px;
padding: 7px 0 0 0;
background: rgba(247, 247, 247, 0.75);
border-radius: 5px;
box-shadow: 10px 10px 50px rgba(0, 0, 0, 0.29);
font-family: Helvetica, Arial, sans-serif;
-webkit-transform-origin: 0 10px;
transform-origin: 0 10px;
}
.landmark h1 {
margin-top: 0;
padding: 5px 15px;
background: #2aaef5;
color: rgba(255, 255, 255, 0.9);
font-size: 16px;
font-weight: 300;
}
.landmark section {
padding: 0 15px 5px;
font-size: 14px;
}
.landmark section p {
margin: 5px 0;
}
.landmark:after {
content: "";
position: absolute;
top: 7px;
left: -13px;
width: 0;
height: 0;
margin-bottom: -13px;
border-right: 13px solid #2aaef5;
border-top: 13px solid rgba(0, 0, 0, 0);
border-bottom: 13px solid rgba(0, 0, 0, 0);
}
@-webkit-keyframes scale-and-fadein {
0% {
-webkit-transform: scale(0.2);
opacity: 0;
}
100% {
-webkit-transform: scale(1);
opacity: 1;
}
}
@keyframes scale-and-fadein {
0% {
transform: scale(0.2);
opacity: 0;
}
100% {
transform: scale(1);
opacity: 1;
...