JSFiddle - React, Tailwind, and code Playground

by greatCar

HTML

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link href="https://fonts.googleapis.com/css?family=Roboto:400,700" rel="stylesheet" type="text/css">

    <title>MarkupMaster(sm) Samples</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <style>
        .markupMaster {
            /*font-variant: small-caps;*/
            /*font-weight: bold;*/
            font-family: roboto;
            font-weight: 700;
        }

            .imgVideo {
                max-width: 100%;
                min-width: 80%;
                min-height: 80%;
            }

            .flexHorizontal {
                display: flex;
                justify-content: center;
            }

            .flexCenterBoth {
                display: flex;
                justify-content: center;
                align-items: center;
                /*height: 400px;
        background-color: DodgerBlue;*/
            }

            .videoHeight {
                max-height: 100%;
            }

            @media screen and (max-height: 938px) {
                /*938 1023 or 580px*/
                .videoHeight {
                    max-height: 700px;
                }
            }

            @media screen and (max-height: 768px) { /*1023 or 580px*/
                .videoHeight {
                    max-height: 550px;
                }
            }

            @media screen and (max-height: 600px) { /*1023 or 580px*/
                .videoHeight {
                    max-height: 450px;
                }
            }

 /*SPINNER:*/
      @keyframes spinner {
      0% {
      transform: translate3d(-50%, -50%, 0) rotate(0deg);
      }
      100% {
      transform: translate3d(-50%, -50%, 0) rotate(360deg);
      }
      }
     ...