JSFiddle - React, Tailwind, and code Playground

by Susan Delgado

HTML

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://raw.githubusercontent.com/daneden/animate.css/master/animate.css">
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<html class=" js flexbox canvas canvastext webgl no-touch geolocation postmessage websqldatabase indexeddb hashchange history draganddrop websockets rgba hsla multiplebgs backgroundsize borderimage borderradius boxshadow textshadow opacity cssanimations csscolumns cssgradients cssreflections csstransforms csstransforms3d csstransitions fontface generatedcontent video audio localstorage sessionstorage webworkers applicationcache svg inlinesvg smil svgclippaths" lang="" style="">

  <head>
    <style>
      .gm-control-active>img {
        box-sizing: content-box;
        display: none;
        left: 50%;
        pointer-events: none;
        position: absolute;
        top: 50%;
        transform: translate(-50%, -50%)
      }

      .gm-control-active>img:nth-child(1) {
        display: block
      }

      .gm-control-active:hover>img:nth-child(1),
      .gm-control-active:active>img:nth-child(1) {
        display: none
      }

      .gm-control-active:hover>img:nth-child(2),
      .gm-control-active:active>img:nth-child(3) {
        display: block
      }

    </style>
    <link type="text/css" rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Google+Sans">
    <style>
      .gm-ui-hover-effect {
        opacity: .6
      }

      .gm-ui-hover-effect:hover {
        opacity: 1
      }

    </style>
    <style>
      .gm-style .gm-style-cc span,
      .gm-style .gm-style-cc a,
      .gm-style .gm-style-mtc div {
        font-size: 10px;
        box-sizing: border-box
      }

    </style>
    <style>
      @media print {

        .gm-style .gmnoprint,
       ...

CSS

html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
  margin: 0;
  padding: 0;
  border: 0;
  font: inherit;
  font-size: 100%;
  vertical-align: baseline
}

html {
  line-height: 1
}

ol,
ul {
  list-style: none
}

table {
  border-collapse: collapse;
  border-spacing: 0
}

caption,
th,
td {
  text-align: left;
  font-weight: normal;
  vertical-align: middle
}

q,
blockquote {
  quotes: none
}

q:before,
q:after,
blockquote:before,
blockquote:after {
  content: "";
  content: none
}

a img {
  border: none
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
menu,
nav,
section,
summary {
  display: block
}

body,
html {
  overflow-x: hidden
}

body {
  font-family: 'Neuzeit S LT W01 Book';
  font-size: 16px;
  line-height: 26px;
  color: #58595b
}

h1,
h2,
h3,
h4,
h5 {
  font-family: 'NeuzeitSLTW01-BookHeavy';
  margin-bottom: 20px
}

p {
  margin-bottom: 20px
}

.small-caps {
  font-variant: small-caps;
  text-transform: lowercase
}

.lowercase {
  text-transform: lowercase
}

strong,
.strong {
  font-family: 'NeuzeitSLTW01-BookHeavy'
}

ul.unstyled {
  list-style: none;
  padding-left: 20px
}

ul.list {
  list-style: disc;
  padding-left: 20px
}

ul.sub-list {
  padding-left: 85px
}

@media only screen and (max-width: 992px) {
  ul.sub-list {
    padding-left: 20px
  }
}

em {
  font-style: italic
}

.center {
  text-align: center
}

.left {
  float: right;
  display: inline-block;
  margin-left: 20px;
  margin-bottom: 20px
}

.mb0 {
  margin-bottom: 0 !important
}

.mb10 {
  margin-bottom: 10px...