JSFiddle - React, Tailwind, and code Playground

by Petr Haluza

HTML

<div id="HP231123">
<style>
#HP231123 { max-width: 960px; margin: 0 auto;}
#HP231123 h2 { font-size: 18px; background: #d5ecff; display: inline-block; padding: 5px 10px;}
#HP231123 h2 b { background: white; border-radius: 50%; height: 1.25em; width: 1.25em; display: inline-flex; justify-content: center; align-items: center; margin: 0 10px 0 0;}
#HP231123 .row > .column { padding: 0 8px}
#HP231123 .row:after { content: ""; display: table; clear: both;}

#HP231123 .row.gallery { display: flex; flex-wrap: wrap}
#HP231123 .row.gallery .column { display: flex;  flex-direction: column; justify-content: space-around; max-width: 290px;}
#HP231123 .gallery .column p { padding: 5px 0 20px; text-align: center;}
#HP231123 .modal { display: none; position: fixed; z-index: 1; padding-top: 100px;left: 0; top: 0; width: 100%; height: 100%;  overflow: auto; background-color: black;}
#HP231123 .modal-content { position: relative; background-color: #fefefe; margin: auto; padding: 0; width: 90%; max-width: 800px}
#HP231123 .close { color: white; position: absolute; top: -40px; right: -30px; font-size: 35px; font-weight: bold; opacity:1}
#HP231123 .close:hover,
#HP231123 .close:focus { color: #999; text-decoration: none; cursor: pointer}
#HP231123 .mySlides { display: none}
#HP231123 .cursor { cursor: pointer}
#HP231123 .cursor.intext { width: 20px; filter: sepia(2) saturate(5) hue-rotate(169deg)}
#HP231123 .prev,
#HP231123 .next { cursor: pointer; position: absolute; top: 50%; width: auto; padding: 16px; margin-top: -50px; color: white; font-weight: bold; font-size: 20px; transition: 0.6s ease; border-radius: 0 3px 3px 0; user-select: none;  -webkit-user-select: none}
#HP231123 .next { right: 0; border-radius: 3px 0 0 3px}
#HP231123 .prev:hover,
#HP231123 .next:hover { background-color: rgba(0, 0, 0, 0.8)}
#HP231123 .numbertext {  color: #f2f2f2;  font-size: 12px;  padding: 8px 12px;  position: absolute;  top: 0;}
img {  margin-bottom: -4px;}
#HP231123 .caption-container { ...

CSS

body {  font-family: Verdana, sans-serif;
  margin: 0;
}

* {
  box-sizing: border-box;
}