JSFiddle - React, Tailwind, and code Playground

by wtalexy

HTML

<div id="image">
    <img src="https://pbs.twimg.com/media/CMSrIg_XAAAQU3a.jpg:large">
        <h1><span class="highlight">Sono</span> Neko その猫</h1>
</div>

<h1>Leave dead animals as gifts</h1>


<h3>Meowwww missing until dinner time</h3>

<p>Cat ipsum dolor sit amet, vommit food and eat it again. Find something else more interesting favor packaging over toy yet hide at bottom of staircase to trip human or intently stare at the same spot, but poop in litter box, scratch the walls attack feet ears back wide eyed. Scratch leg; meow for can opener to feed me. Where is my slave? i'm getting hungry purr for no reason or eat a plant, kill a hand eat a plant, kill a hand. Where is my slave? i'm getting hungry jump around on couch, meow constantly until given food, , so chase dog then run away yet stick butt in face, for poop on grasses for rub face on owner, under the bed. Brown cats with pink ears meow destroy the blinds why must they do that, and see owner, run in terror. Meowing non stop for food play time, yet stand in front of the computer screen get video posted to internet for chasing red dot poop in litter box, scratch the walls. Destroy couch leave dead animals as gifts why must they do that, for find something else more interesting hopped up on catnip sleep in the bathroom sink. Kitty power! pooping rainbow while flying in a toasted bread costume in space eat grass, throw it back up and spread kitty litter all over house. I like big cats and i can not lie. Under the bed brown cats with pink ears loves cheeseburgers has closed eyes but still sees you yet chase red laser dot. Claw drapes drink water out of the faucet and behind the couch refuse to leave cardboard box but hunt anything that moves. Rub face on owner favor packaging over toy yet play time. Hide when guests come over love to play with owner's hair tie. Purr for no reason make meme, make cute face eat a plant, kill a hand all of a sudden cat goes crazy, or stare at the wall, play with food and get...

CSS

body {
    margin: 0;
}
/* The Overlay */
 body::after {
    position: fixed;
    z-index: 14;
    top: 0;
    left: 0;
    display: block;
    width: 100%;
    height: 100%;
    content:'ff';
    opacity: .5;
    background-color: #000;
}
/* The Lightbox */
 #image {
    position: fixed;
    z-index: 15;
    top: 50%;
    width: 60vw;
    height: 60vh;
    margin: 0 20vw;
    margin-top: calc(-60vh / 2);
    background:#fff;
    border: 1px solid white;
    border-radius: 5px;
    overflow:hidden;
    box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.8);
}

/* Bonus: responsive and centered image */
 #image h1 {
     box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.8);
     position: relative;
     padding-left: 1em;
     font-family: sans-serif;
     color: #E2E8F2;
 }
.highlight
{
    color: #4E2622;
}
 #image img {
    max-width: 120%;
    height: auto;
    position:absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}