JSFiddle - React, Tailwind, and code Playground

by Kalilath

HTML

<!DOCTYPE html>
<html>
<head>
    <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@100;400&display=swap" rel="stylesheet">
    <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Oswald:wght@200&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="Wild.css">
<title>Page Title</title>
</head>
<body>
    <header>
        <h1>W&nbsp;I&nbsp;L&nbsp;D</h1>
    </header>


    
<div class="box1">
<!-- <h1>W &nbsp;&nbsp;I &nbsp;&nbsp;L&nbsp; &nbsp;D</h1>-->
      
</div>
    <div class="back"></div>
    <nav>
      <a href="#">About</a>
      <a href="#">Works</a>
      <a href="#">Partners</a>
      <a href="#">Price</a>
      <a href="#">Contacts</a>
    </nav>


    <!--THESE ARE BOXING THAT HOLD THE ITEMS-->


      <div class="item2">
        <div class="item1-inner">
          <div class="item1-front">
            <img src="Images/T-shirt.png" alt="Great Wave" style="width:400px;height:420px">
          </div>
          <div class="item1-back">
            <h1>Great Wave T-Shirt</h1>
            <p>The Great Wave off Kanagawa printed on a green t-shirt</p>
            <h3><br><SPAN STYLE="text-decoration:line-through; color:rgb(179, 46, 28); font-weight:bold;">£22.00</SPAN><br><SPAN STYLE="color:rgb(255, 255, 255); font-weight:bold;">£9.99</SPAN></h3>
          </div>
        </div>
      </div>

<div class="img-with-text"></div>
      <div id="cf">
        <img class="bottom" src="/Images/t-shirtclose.png"  alt="sometext" style="width:400px;height:420px" />
        <img class="top" src="/Images/T-shirt.png"  alt="sometext" style="width:400px;height:420px" />
        <p>Some text</p>
      </div>
      </div>
    </div>
<!--THESE ARE BOXING THAT HOLD THE...

CSS

html { 
  height: 100%;
  }
  
  body {
    background-image: linear-gradient(rgba(0, 0, 0, 0.527),rgba(0, 0, 0, 0.5)) , url(Images/Beach.jpg);
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    min-height: 100%;
    }

h1 {
	align-content: center;
  font-family:Oswald;
}
h3{
  font-family:Montserrat;
  font-size: 26px;
}
p{
  font-family:Montserrat;
}
figcaption{
  z-index: 200;
  font-family:Montserrat;
  font-size: 26px;
}

/* The flip box container - set the width and height to whatever you want. We have added the border property to demonstrate that the flip itself goes out of the box on hover (remove perspective if you don't want the 3D effect */
.item3 {
  position: absolute;
  width: 400px;
  height: 420px;
  color: #16151b;
  margin-top: 100px;
  margin-left: 200px;
  perspective: 1000px;
  background: white;

}

#cf {
  text-align: justify;
  width: 400px;
  position:relative;
  position: absolute;
  color: #16151b;
  margin-top: 100px;
  margin-left: 200px;
  perspective: 1000px;
  background-image: white;
  width: 100px
}

#cf img {
  display: block;
  margin: 0 auto;
  position:absolute;
  background-color: #bbb;
  left:0;
  -webkit-transition: opacity 1s ease-in-out;
  -moz-transition: opacity 1s ease-in-out;
  -o-transition: opacity 1s ease-in-out;
  transition: opacity 1s ease-in-out;
  display: block;
  margin: auto;
  width: 100%
}

#cf img.top:hover {
  opacity:0;
}

.item2 {
  width: 400px;
  height: 420px;
  color: #16151b;
  position: absolute;
  margin-top: 100px;
  margin-left: 700px;
  perspective: 1000px;
}


/* This container is needed to position the front and back side */
.item1-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.8s;
  transform-style: preserve-3d;
}

/* Do an horizontal flip when you move the mouse over the flip box container */
.item1:hover, .item2:hover .item1-inner {
  transform:...