How to fix div content overlapping in header using TailwindCSS and HTML? - html

Question

I'm experiencing an issue with a div element in the header of my website, where the content of the div is overlapping with other elements in the header. This issue can have various causes, including incorrect positioning, improper use of CSS styles, and conflicting styles among elements. But I can't see what is happening, does anybody see what is happening?
I'm using a Laravel project with Vue and TailwindCSS. But I'm not making any difficult part know, I just want to put some information in cards.
This is what I tried:
HTML
#extends('layouts.user')
#section('content')
<h1 style="text-align: center"><strong>CURSOS</strong></h1>
<div class="flip-card-container">
<div class="flip-card">
<div class="flip-card-inner">
<div class="flip-card-front">
<p class="title">FLIP CARD</p>
<p>Hover Me</p>
</div>
<div class="flip-card-back">
<p class="title">BACK</p>
<p>Leave Me</p>
</div>
</div>
</div>
<div class="flip-card">
<div class="flip-card-inner">
<div class="flip-card-front">
<p class="title">FLIP CARD</p>
<p>Hover Me</p>
</div>
<div class="flip-card-back">
<p class="title">BACK</p>
<p>Leave Me</p>
</div>
</div>
</div>
<div class="flip-card">
<div class="flip-card-inner">
<div class="flip-card-front">
<p class="title">FLIP CARD</p>
<p>Hover Me</p>
</div>
<div class="flip-card-back">
<p class="title">BACK</p>
<p>Leave Me</p>
</div>
</div>
</div>
<div class="flip-card">
<div class="flip-card-inner">
<div class="flip-card-front">
<p class="title">FLIP CARD</p>
<p>Hover Me</p>
</div>
<div class="flip-card-back">
<p class="title">BACK</p>
<p>Leave Me</p>
</div>
</div>
</div>
</div>
#stop
CSS
#tailwind base;
#tailwind components;
#tailwind utilities;
/* Beggining of card aesthetic */
.flip-card {
background-color: transparent;
width: 300px;
height: 300px;
float: left;
margin: 20px;
perspective: 1000px;
font-family: sans-serif;
position: relative;
z-index: 0;
}
.flip-card-container {
min-height: calc(100vh - 70px);
overflow: hidden;
position: relative;
z-index: 0;
}
.title {
font-size: 1.5em;
font-weight: 900;
text-align: center;
margin: 0;
}
.flip-card-inner {
position: relative;
width: 100%;
height: 100%;
text-align: center;
transition: transform 0.8s;
transform-style: preserve-3d;
}
.flip-card:hover .flip-card-inner {
transform: rotateY(180deg);
}
.flip-card-front, .flip-card-back {
box-shadow: 0 8px 14px 0 rgba(0,0,0,0.2);
position: absolute;
display: flex;
flex-direction: column;
justify-content: center;
width: 100%;
height: 100%;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
border: 1px solid coral;
border-radius: 1rem;
}
.flip-card-front {
background: url(/de/tu/imagen.jpg);
background-size: cover;
color: coral;
}
.flip-card-back {
background: linear-gradient(120deg, rgb(255, 174, 145) 30%, coral 88%,
bisque 40%, rgb(255, 185, 160) 78%);
color: white;
transform: rotateY(180deg);
}
/*Final */
body {
#apply font-montserrat;
}
.login-background {
background-image: url(/resources/img/fondo.svg);
background-repeat: no-repeat;
background-color: #dcdcdc;
position: relative;
z-index: 0;
}
header {
height: 70px;
#apply bg-orange-500;
position: relative;
z-index: 2;
}
footer {
#apply text-white;
}
footer a {
#apply hover:text-orange-500;
}
footer h6 {
#apply font-bold;
}
footer svg {
#apply inline-block w-8 h-8;
}
Result of the problem:
Content overlapping in the header