JSFiddle - React, Tailwind, and code Playground

by von

HTML

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

<style>
     .foot {
          width: 100%;
          border-top: solid 1px #ccc;
          text-align: center;
          font-size: 90%;
          margin: 1em auto;
          padding: 1.5em 0;
        }
.row{
margin-right:15px !important;
margin-left:15px !important;
}
 html {
            scroll-behavior: smooth;
          }


          .gallery {
            display: flex;
          }

          figure {
           padding:10px;
            width: 200px;
            cursor: pointer;
          }

          figure .image {
            width: 120px;
            height: 100px;
            object-fit: cover;
            display: block;
            pointer-events: none;
          }

          .image-span {
            position: relative;
            display: block;
            pointer-events: none;
          }

          .image-span::after {
            content: "";
            display: block;
            position: absolute;
            top: 0;
            left: 0;
            bottom: 0;
            right: 0;
            width: 100%;
            height: 100%;
            background-image: url("mag-icon.png");
            background-position: 100% 100%;
            background-size: 35%;
            background-repeat: no-repeat;
           ...